diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5b819f261..1e482b2db 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,4 @@
 {
-  "cSpell.words": [
-    "bbox",
-    "Sparkline",
-    "timebar"
-  ]
-}
\ No newline at end of file
+  "cSpell.words": ["bbox", "Sparkline", "timebar"],
+  "svg.preview.background": "white"
+}
diff --git a/__tests__/integration/components/axis/axis-animation-update-12.ts b/__tests__/integration/components/axis/axis-animation-update-12.ts
index bdcd304e5..6c34e8e3a 100644
--- a/__tests__/integration/components/axis/axis-animation-update-12.ts
+++ b/__tests__/integration/components/axis/axis-animation-update-12.ts
@@ -14,8 +14,7 @@ export const AxisAnimationUpdate12 = () => {
   const g1 = group.appendChild(
     new Group({
       style: {
-        x: 100,
-        y: 100,
+        transform: 'translate(100, 100)',
       },
     })
   );
@@ -23,8 +22,7 @@ export const AxisAnimationUpdate12 = () => {
   const g2 = group.appendChild(
     new Group({
       style: {
-        x: 50,
-        y: 50,
+        transform: 'translate(50, 50)',
       },
     })
   );
diff --git a/__tests__/integration/components/axis/axis-animation-update-13.ts b/__tests__/integration/components/axis/axis-animation-update-13.ts
index ab12b6bf7..a8c18028d 100644
--- a/__tests__/integration/components/axis/axis-animation-update-13.ts
+++ b/__tests__/integration/components/axis/axis-animation-update-13.ts
@@ -13,8 +13,7 @@ export const AxisAnimationUpdate13 = () => {
   group.appendChild(
     new Group({
       style: {
-        x: 100,
-        y: 100,
+        transform: 'translate(100, 100)',
       },
     })
   );
@@ -22,8 +21,7 @@ export const AxisAnimationUpdate13 = () => {
   const g2 = group.appendChild(
     new Group({
       style: {
-        x: 50,
-        y: 50,
+        transform: 'translate(50, 50)',
       },
     })
   );
@@ -57,7 +55,7 @@ export const AxisAnimationUpdate13 = () => {
         titleTransformOrigin: 'center',
         titleTextBaseline: 'middle',
         titlePosition: 'left',
-        titleTransform: 'translate(50%, 0) rotate(-90)',
+        titleTransform: 'translate(-100%, 0) rotate(-90)',
         labelDirection: 'positive',
         tickDirection: 'positive',
         gridDirection: 'negative',
@@ -117,3 +115,4 @@ export const AxisAnimationUpdate13 = () => {
 AxisAnimationUpdate13.tags = ['坐标轴', '动画', '更新', '标题'];
 
 AxisAnimationUpdate13.wait = 500;
+AxisAnimationUpdate13.skip = true;
diff --git a/__tests__/integration/components/axis/axis-animation-update-5.ts b/__tests__/integration/components/axis/axis-animation-update-5.ts
index dc881a254..4d64ebc67 100644
--- a/__tests__/integration/components/axis/axis-animation-update-5.ts
+++ b/__tests__/integration/components/axis/axis-animation-update-5.ts
@@ -49,7 +49,6 @@ export const AxisAnimationUpdate5 = () => {
     new Button({
       style: {
         x: 80,
-        y: 0,
         text: 'reset',
         onClick: reset,
       },
diff --git a/__tests__/integration/components/axis/axis-animation-update-9.ts b/__tests__/integration/components/axis/axis-animation-update-9.ts
index be0bbd065..f902eb5b3 100644
--- a/__tests__/integration/components/axis/axis-animation-update-9.ts
+++ b/__tests__/integration/components/axis/axis-animation-update-9.ts
@@ -80,8 +80,3 @@ export const AxisAnimationUpdate9 = () => {
 AxisAnimationUpdate9.tags = ['坐标轴', '动画', '更新'];
 
 AxisAnimationUpdate9.wait = 500;
-
-// FIXME: skip for now
-// -             transform="matrix(1,0,0,1,54.239998,265.750000)"
-// +             transform="matrix(1,0,0,1,54.240002,265.750000)"
-AxisAnimationUpdate9.skip = true;
diff --git a/__tests__/integration/components/axis/axis-linear-basis-5.ts b/__tests__/integration/components/axis/axis-linear-basis-5.ts
index eb8c24556..ac6ec2345 100644
--- a/__tests__/integration/components/axis/axis-linear-basis-5.ts
+++ b/__tests__/integration/components/axis/axis-linear-basis-5.ts
@@ -24,7 +24,7 @@ export const AxisLinearBasis5 = () => {
         lineExtension: [10, 10],
         tickLength: 10,
         labelSpacing: 5,
-        labelTransform: 'rotate(90)',
+        labelTransform: 'rotate(45)',
         type: 'linear',
         tickLineWidth: 5,
       },
diff --git a/__tests__/integration/components/axis/axis-linear-custom-tick.ts b/__tests__/integration/components/axis/axis-linear-custom-tick.ts
index cce9ddb9c..f763634ed 100644
--- a/__tests__/integration/components/axis/axis-linear-custom-tick.ts
+++ b/__tests__/integration/components/axis/axis-linear-custom-tick.ts
@@ -17,9 +17,12 @@ export const AxisLinearCustomTick = () => {
         data: mockData,
         labelFormatter: () => '',
         tickFormatter: (datum: any, index: number, data: any, [cx, cy]: any) => {
-          if (index === 3) return new Rect({ style: { width: 20, height: 20, fill: 'green', anchor: '0.5 0.5' } });
+          if (index === 3)
+            return new Rect({
+              style: { x: 0, y: 0, width: 20, height: 20, fill: 'green', transform: 'translate(-10, -10)' },
+            });
           return index % 5 === 0
-            ? new Circle({ style: { r: index % 10 === 0 ? 10 : 5 } })
+            ? new Circle({ style: { cx: 0, cy: 0, r: index % 10 === 0 ? 10 : 5 } })
             : new Line({ style: { x1: 0, x2: 0, y1: 50 * cx, y2: 10 * cy } });
         },
         type: 'linear',
diff --git a/__tests__/integration/components/axis/axis-linear-label.ts b/__tests__/integration/components/axis/axis-linear-label.ts
index aa363956b..a28e0f46a 100644
--- a/__tests__/integration/components/axis/axis-linear-label.ts
+++ b/__tests__/integration/components/axis/axis-linear-label.ts
@@ -39,9 +39,11 @@ export const AxisLinearLabel = () => {
     const labelIcon = new Image({
       style: {
         src: icon,
+        x: 0,
+        y: 0,
         width: 30,
         height: 30,
-        anchor: '0.5 0.5',
+        transform: 'translate(-15, -15)',
       },
     });
     const labelText = new Text({
diff --git a/__tests__/integration/components/axis/axis-linear-title-position.ts b/__tests__/integration/components/axis/axis-linear-title-position.ts
index 796342e7f..7db56f32a 100644
--- a/__tests__/integration/components/axis/axis-linear-title-position.ts
+++ b/__tests__/integration/components/axis/axis-linear-title-position.ts
@@ -33,7 +33,7 @@ export const AxisLinearTitlePosition = () => {
     titleText: 'left',
     titlePosition: 'l',
     titleSpacing: 10,
-    titleTransform: 'translate(50%, 0) rotate(-90)',
+    titleTransform: 'rotate(-90)',
   });
   createAxis({
     startPos: [50, 500],
@@ -46,8 +46,7 @@ export const AxisLinearTitlePosition = () => {
     endPos: [550, 500],
     titleText: 'right',
     titlePosition: 'r',
-    titleSpacing: 10,
-    titleTransform: 'translate(-50%, 0) rotate(-90)',
+    titleTransform: 'rotate(-90)',
   });
 
   const g1 = group.appendChild(
@@ -63,15 +62,14 @@ export const AxisLinearTitlePosition = () => {
       titleText: 'right',
       titlePosition: 'r',
       titleSpacing: 10,
-      titleTransform: 'translate(-50%, 0) rotate(-90)',
+      titleTransform: 'rotate(-90)',
     })
   );
 
   const g2 = group.appendChild(
     new Group({
       style: {
-        x: 60,
-        y: 60,
+        transform: 'translate(60, 60)',
       },
     })
   );
@@ -83,7 +81,7 @@ export const AxisLinearTitlePosition = () => {
       titleText: 'right',
       titlePosition: 'r',
       titleSpacing: 10,
-      titleTransform: 'translate(-50%, 0) rotate(-90)',
+      titleTransform: 'rotate(-90)',
     })
   );
 
diff --git a/__tests__/integration/components/axis/axis-linear-title.ts b/__tests__/integration/components/axis/axis-linear-title.ts
index 4084424cf..78f33b475 100644
--- a/__tests__/integration/components/axis/axis-linear-title.ts
+++ b/__tests__/integration/components/axis/axis-linear-title.ts
@@ -78,7 +78,6 @@ export const AxisLinearTitle = () => {
         src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
         height: 30,
         width: 30,
-        anchor: '0 0',
       },
     })
   );
diff --git a/__tests__/integration/components/bugs/axis-title-position.ts b/__tests__/integration/components/bugs/axis-title-position.ts
index 3d07dee5b..c447b70c0 100644
--- a/__tests__/integration/components/bugs/axis-title-position.ts
+++ b/__tests__/integration/components/bugs/axis-title-position.ts
@@ -35,14 +35,10 @@ export const BugAxisTitlePosition = () => {
         titleSpacing: 10,
         titleTextBaseline: 'middle',
         titleTransformOrigin: 'center',
-        titleAnchor: '0.5 0.5',
-        titleTransform: 'translate(50%, 0)  rotate(-90)',
+        titleTransform: 'rotate(-90)',
         labelAlign: 'horizontal',
         labelSpacing: 4,
         labelDirection: 'positive',
-        lineArrow: undefined,
-        gridLength: 565,
-        gridDirection: 'negative',
         tickDirection: 'positive',
         lineOpacity: 1,
       },
diff --git a/__tests__/integration/components/bugs/category-give-shape-1.ts b/__tests__/integration/components/bugs/category-give-shape-1.ts
index c5687bec7..5542e908d 100644
--- a/__tests__/integration/components/bugs/category-give-shape-1.ts
+++ b/__tests__/integration/components/bugs/category-give-shape-1.ts
@@ -21,6 +21,8 @@ export const BugCategoryWithShape1 = () => {
   rect.appendChild(
     new Category({
       style: {
+        x: 50,
+        y: 50,
         width,
         height,
         gridCol: 10,
diff --git a/__tests__/integration/components/bugs/category-give-shape-2.ts b/__tests__/integration/components/bugs/category-give-shape-2.ts
index 58b874657..1febdeb1d 100644
--- a/__tests__/integration/components/bugs/category-give-shape-2.ts
+++ b/__tests__/integration/components/bugs/category-give-shape-2.ts
@@ -21,6 +21,8 @@ export const BugCategoryWithShape2 = () => {
   rect2.appendChild(
     new Category({
       style: {
+        x: 50,
+        y: 50,
         titleText: 'title',
         titleFontSize: 20,
         width,
diff --git a/__tests__/integration/components/bugs/category-marker.ts b/__tests__/integration/components/bugs/category-marker.ts
index 883201255..c25b5152b 100644
--- a/__tests__/integration/components/bugs/category-marker.ts
+++ b/__tests__/integration/components/bugs/category-marker.ts
@@ -21,7 +21,7 @@ export const BugCategoryMarker = () => {
   group.appendChild(
     new Category({
       style: {
-        itemMarker: (d: any, i: number) => () => new Path({ style: { path: circle(0, 0, 6) } }),
+        itemMarker: (d: any, i: number) => () => new Path({ style: { d: circle(0, 0, 6) } }),
         itemMarkerStroke: (_: any, index: number) => data[index].color,
         data,
 
diff --git a/__tests__/integration/components/checkbox/checkbox1.ts b/__tests__/integration/components/checkbox/checkbox1.ts
index 9e876c76a..47c8a3c6c 100644
--- a/__tests__/integration/components/checkbox/checkbox1.ts
+++ b/__tests__/integration/components/checkbox/checkbox1.ts
@@ -7,8 +7,7 @@ export function Checkbox1() {
   group.appendChild(
     new Checkbox({
       style: {
-        x: 10,
-        y: 10,
+        transform: 'translate(10, 10)',
         labelText: 'Checkbox',
       },
     })
@@ -17,8 +16,7 @@ export function Checkbox1() {
   const ck = group.appendChild(
     new Checkbox({
       style: {
-        x: 10,
-        y: 30,
+        transform: 'translate(10, 30)',
         labelText: 'Checkbox',
         checked: true,
       },
diff --git a/__tests__/integration/components/indicator/indicator.ts b/__tests__/integration/components/indicator/indicator.ts
index 56ab5fdf0..3c048620f 100644
--- a/__tests__/integration/components/indicator/indicator.ts
+++ b/__tests__/integration/components/indicator/indicator.ts
@@ -6,8 +6,7 @@ import { createGrid } from '../../utils/grid';
 export const IndicatorDemo = () => {
   const group = new Group({
     style: {
-      x: 30,
-      y: 30,
+      transform: 'translate(30, 30)',
     },
   });
 
@@ -218,10 +217,11 @@ export const IndicatorDemo = () => {
   const mi = createIndicator({ x: 250, y: 100, labelText: 0.5, position: 'bottom' });
 
   group.addEventListener('mousemove', (e: any) => {
-    console.log(e.offset, e.canvas);
     const { x, y } = e.offset;
     const [dx, dy] = group.getLocalPosition();
-    mi.setLocalPosition(x - dx, y - dy);
+    mi.style.x = x - dx;
+    mi.style.y = y - dy;
+    mi.update();
   });
 
   return group;
diff --git a/__tests__/integration/components/legend/category-item-10.ts b/__tests__/integration/components/legend/category-item-10.ts
index 8ce00e9de..903d14764 100644
--- a/__tests__/integration/components/legend/category-item-10.ts
+++ b/__tests__/integration/components/legend/category-item-10.ts
@@ -21,7 +21,7 @@ export const CategoryItem10 = () => {
           marker: () =>
             new Path({
               style: {
-                path: shape(0, 0, 6),
+                d: shape(0, 0, 6),
               },
             }),
           markerStroke: 'green',
diff --git a/__tests__/integration/components/legend/category-item-marker-2.ts b/__tests__/integration/components/legend/category-item-marker-2.ts
index 21db89e32..e45e9084d 100644
--- a/__tests__/integration/components/legend/category-item-marker-2.ts
+++ b/__tests__/integration/components/legend/category-item-marker-2.ts
@@ -79,11 +79,17 @@ export const CategoryItemMarker2 = () => {
         gridCol: 10,
         height: 40,
         titleText: 'Legend Title',
+        // titleFill: '#1D2129',
+        // titleFillOpacity: 0.65,
+        // titleFontSize: 12,
+        // titleFontWeight: 'normal',
+        // titleSpacing: 4,
+        // showTitle: false,
         width: 500,
         itemMarker: (d: any, i: number) => () =>
           new Path({
             style: {
-              path: paths[i],
+              d: paths[i],
             },
           }),
         itemMarkerStroke: 'red',
diff --git a/__tests__/integration/components/legend/category-items-11.ts b/__tests__/integration/components/legend/category-items-11.ts
index 6c4a3979c..8ba806451 100644
--- a/__tests__/integration/components/legend/category-items-11.ts
+++ b/__tests__/integration/components/legend/category-items-11.ts
@@ -24,7 +24,7 @@ export const CategoryItems11 = () => {
         itemValueFill: 'green',
         colPadding: 5,
         itemMarker: (d: any, i: number) => () =>
-          new Path({ style: { path: [circle, triangle, diamond][i % 3](0, 0, 6) } }),
+          new Path({ style: { d: [circle, triangle, diamond][i % 3](0, 0, 6) } }),
         itemMarkerStroke: (_: any, index: number) => colors[index % colors.length],
         itemMarkerStrokeWidth: 2,
       },
diff --git a/__tests__/integration/components/legend/category-items-12.ts b/__tests__/integration/components/legend/category-items-12.ts
index 9ccfdcd13..d62be3522 100644
--- a/__tests__/integration/components/legend/category-items-12.ts
+++ b/__tests__/integration/components/legend/category-items-12.ts
@@ -22,7 +22,7 @@ export const CategoryItems12 = () => {
     new CategoryItems({
       style: {
         data,
-        itemMarker: (d: any, i: number) => () => new Path({ style: { path: circle(0, 0, 6) } }),
+        itemMarker: (d: any, i: number) => () => new Path({ style: { d: circle(0, 0, 6) } }),
         itemMarkerStroke: (_: any, index: number) => data[index].color,
 
         width: 565,
diff --git a/__tests__/integration/components/legend/category-items-9.ts b/__tests__/integration/components/legend/category-items-9.ts
index 182788158..e1f1e5e63 100644
--- a/__tests__/integration/components/legend/category-items-9.ts
+++ b/__tests__/integration/components/legend/category-items-9.ts
@@ -10,7 +10,7 @@ export const CategoryItems9 = () => {
   group.appendChild(
     new CategoryItems({
       style: {
-        data: flowItemData,
+        data: flowItemData.slice(0, 5),
         layout: 'flex',
         itemLabelFill: 'red',
         itemValueFill: 'green',
diff --git a/__tests__/integration/components/legend/category-layout-3.ts b/__tests__/integration/components/legend/category-layout-3.ts
index ee72259cc..5a46cc45d 100644
--- a/__tests__/integration/components/legend/category-layout-3.ts
+++ b/__tests__/integration/components/legend/category-layout-3.ts
@@ -29,7 +29,7 @@ export const CategoryLayout3 = () => {
         itemMarker: () => () =>
           new Path({
             style: {
-              path: smooth(0, 0, 6),
+              d: smooth(0, 0, 6),
             },
           }),
       },
diff --git a/__tests__/integration/components/legend/category-layout-7.ts b/__tests__/integration/components/legend/category-layout-7.ts
index 534217d47..bf2120536 100644
--- a/__tests__/integration/components/legend/category-layout-7.ts
+++ b/__tests__/integration/components/legend/category-layout-7.ts
@@ -27,7 +27,7 @@ export const CategoryLayout7 = () => {
         itemMarker: () => () =>
           new Path({
             style: {
-              path: smooth(0, 0, 6),
+              d: smooth(0, 0, 6),
             },
           }),
         itemValueText: '',
diff --git a/__tests__/integration/components/legend/category-position-2.ts b/__tests__/integration/components/legend/category-position-2.ts
index 9a49a765d..700ec4384 100644
--- a/__tests__/integration/components/legend/category-position-2.ts
+++ b/__tests__/integration/components/legend/category-position-2.ts
@@ -8,8 +8,7 @@ export const CategoryPosition2 = () => {
   const g = group.appendChild(
     new Group({
       style: {
-        x: 50,
-        y: 50,
+        transform: 'translate(50, 50)',
       },
     })
   );
diff --git a/__tests__/integration/components/legend/continuous-1.ts b/__tests__/integration/components/legend/continuous-1.ts
index 30701e250..971a6c461 100644
--- a/__tests__/integration/components/legend/continuous-1.ts
+++ b/__tests__/integration/components/legend/continuous-1.ts
@@ -43,8 +43,7 @@ export const Continuous1 = () => {
           handleMarkerSize: 30,
           ribbonTrackFill: 'pink',
           showLabel: false,
-          x: 0,
-          y,
+          transform: `translateY(${y})`,
           ...con,
         },
       })
diff --git a/__tests__/integration/components/legend/continuous-2.ts b/__tests__/integration/components/legend/continuous-2.ts
index 591cbd787..895eb8016 100644
--- a/__tests__/integration/components/legend/continuous-2.ts
+++ b/__tests__/integration/components/legend/continuous-2.ts
@@ -39,8 +39,7 @@ export const Continuous2 = () => {
           ribbonTrackFill: 'pink',
           showLabel: false,
           type: 'size',
-          x: 0,
-          y,
+          transform: `translateY(${y})`,
           ...con,
         },
       })
diff --git a/__tests__/integration/components/legend/continuous-3.ts b/__tests__/integration/components/legend/continuous-3.ts
index a8ac02d04..35e0beb8d 100644
--- a/__tests__/integration/components/legend/continuous-3.ts
+++ b/__tests__/integration/components/legend/continuous-3.ts
@@ -39,8 +39,7 @@ export const Continuous3 = () => {
           ribbonTrackFill: 'pink',
           showLabel: false,
           type: 'size',
-          x: 0,
-          y,
+          transform: `translateY(${y})`,
           ...con,
         },
       })
diff --git a/__tests__/integration/components/legend/continuous-4.ts b/__tests__/integration/components/legend/continuous-4.ts
index 15f556b9a..1cfe9608d 100644
--- a/__tests__/integration/components/legend/continuous-4.ts
+++ b/__tests__/integration/components/legend/continuous-4.ts
@@ -52,8 +52,7 @@ export const Continuous4 = () => {
           labelFontSize: 10,
           labelSpacing: 10,
           labelTickStroke: 'red',
-          x,
-          y,
+          transform: `translate(${x}, ${y})`,
           ...shape,
           ...con,
         },
diff --git a/__tests__/integration/components/legend/continuous-5.ts b/__tests__/integration/components/legend/continuous-5.ts
index 0609855c2..765c232ad 100644
--- a/__tests__/integration/components/legend/continuous-5.ts
+++ b/__tests__/integration/components/legend/continuous-5.ts
@@ -55,8 +55,7 @@ export const Continuous5 = () => {
           labelSpacing: 10,
           orientation: 'vertical',
           showLabel: true,
-          x,
-          y,
+          transform: `translate(${x}, ${y})`,
           ...shape,
           ...con,
         },
diff --git a/__tests__/integration/components/legend/continuous-d3-color-legend.ts b/__tests__/integration/components/legend/continuous-d3-color-legend.ts
index 8bf6c9e88..968bb3196 100644
--- a/__tests__/integration/components/legend/continuous-d3-color-legend.ts
+++ b/__tests__/integration/components/legend/continuous-d3-color-legend.ts
@@ -38,8 +38,7 @@ export const ContinuousD3ColorLegend = () => {
         showLabel: true,
         showHandle: false,
         showTick: true,
-        x: 0,
-        y: 60,
+        transform: `translate(0, 60)`,
         width: 400,
         height: 60,
         block: true,
@@ -60,8 +59,7 @@ export const ContinuousD3ColorLegend = () => {
         showTick: true,
         showLabel: true,
         showHandle: false,
-        x: 0,
-        y: 120,
+        transform: `translate(0, 120)`,
         width: 400,
         height: 60,
         block: true,
@@ -82,8 +80,7 @@ export const ContinuousD3ColorLegend = () => {
         showTick: true,
         showHandle: false,
         showLabel: true,
-        x: 0,
-        y: 180,
+        transform: `translate(0, 180)`,
         width: 400,
         height: 60,
         block: true,
diff --git a/__tests__/integration/components/legend/continuous.ts b/__tests__/integration/components/legend/continuous.ts
index 99f3e814f..6e03f8e37 100644
--- a/__tests__/integration/components/legend/continuous.ts
+++ b/__tests__/integration/components/legend/continuous.ts
@@ -21,6 +21,7 @@ export const ContinuousDemo = () => {
           handleFormatter: (str: any) => `${str}°C`,
           titleText: 'Title',
           handleMarkerSize: 30,
+          transform: `translate(${x}, ${y})`,
           ...args,
         },
       })
diff --git a/__tests__/integration/components/legend/handle.ts b/__tests__/integration/components/legend/handle.ts
index f5a414992..75ab2efcb 100644
--- a/__tests__/integration/components/legend/handle.ts
+++ b/__tests__/integration/components/legend/handle.ts
@@ -9,8 +9,7 @@ export const HandleDemo = () => {
     group.appendChild(
       new Handle({
         style: {
-          x: 100,
-          y: 100,
+          transform: `translate(${args.x || 100}, ${args.y || 100})`,
           orientation: 'horizontal',
           labelText: 'labelText',
           ...args,
diff --git a/__tests__/integration/components/legend/ribbon-color.ts b/__tests__/integration/components/legend/ribbon-color.ts
index af6d2efd5..881dbb99d 100644
--- a/__tests__/integration/components/legend/ribbon-color.ts
+++ b/__tests__/integration/components/legend/ribbon-color.ts
@@ -12,7 +12,14 @@ export const RibbonColor = () => {
   const createRibbon = (args: any = {}) => {
     return group.appendChild(
       new Ribbon({
-        style: { type: 'color', orientation: 'horizontal', size: 30, length: 200, ...args },
+        style: {
+          type: 'color',
+          orientation: 'horizontal',
+          size: 30,
+          length: 200,
+          transform: `translate(${args.x}, ${args.y})`,
+          ...args,
+        },
       })
     );
   };
diff --git a/__tests__/integration/components/legend/ribbon.ts b/__tests__/integration/components/legend/ribbon.ts
index 28657b32d..cdcab7541 100644
--- a/__tests__/integration/components/legend/ribbon.ts
+++ b/__tests__/integration/components/legend/ribbon.ts
@@ -14,8 +14,7 @@ export const RibbonDemo = () => {
     return group.appendChild(
       new Ribbon({
         style: {
-          x: 100,
-          y: 100,
+          transform: `translate(${args.x || 100}, ${args.y || 100})`,
           type: 'color',
           orientation: 'horizontal',
           size: 30,
diff --git a/__tests__/integration/components/marker/marker-1.ts b/__tests__/integration/components/marker/marker-1.ts
index be35f115b..c97c6b53c 100644
--- a/__tests__/integration/components/marker/marker-1.ts
+++ b/__tests__/integration/components/marker/marker-1.ts
@@ -7,11 +7,17 @@ export const Marker1 = () => {
   const markers = Marker.getSymbols();
 
   markers.forEach((marker, index) => {
+    const x = 20 + (index % 10) * 50;
+    const y = 150 + Math.floor(index / 10) * 50;
     group.appendChild(
       new Marker({
         style: {
-          x: 20 + (index % 10) * 50,
-          y: 150 + Math.floor(index / 10) * 50,
+          x,
+          y,
+          // transform: `translate(${x}, ${y}) rotate(45deg) translate(${-x}, ${-y})`,
+          // transformOrigin: `0 0`,
+          transform: 'rotate(45deg)',
+          transformOrigin: `${x} ${y}`,
           symbol: marker,
           size: 16,
           stroke: 'blue',
diff --git a/__tests__/integration/components/sparkline/sparkline-10.ts b/__tests__/integration/components/sparkline/sparkline-10.ts
index e44366d74..1f53fa44e 100644
--- a/__tests__/integration/components/sparkline/sparkline-10.ts
+++ b/__tests__/integration/components/sparkline/sparkline-10.ts
@@ -7,8 +7,7 @@ export const Sparkline10 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        x: 10,
-        y: 10,
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-11.ts b/__tests__/integration/components/sparkline/sparkline-11.ts
index dc235511c..433a43459 100644
--- a/__tests__/integration/components/sparkline/sparkline-11.ts
+++ b/__tests__/integration/components/sparkline/sparkline-11.ts
@@ -7,8 +7,7 @@ export const Sparkline11 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        x: 10,
-        y: 10,
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-12.ts b/__tests__/integration/components/sparkline/sparkline-12.ts
index fcd00ceb8..91819df3a 100644
--- a/__tests__/integration/components/sparkline/sparkline-12.ts
+++ b/__tests__/integration/components/sparkline/sparkline-12.ts
@@ -7,8 +7,7 @@ export const Sparkline12 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        x: 10,
-        y: 10,
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-2.ts b/__tests__/integration/components/sparkline/sparkline-2.ts
index 4ab3d563b..d2b76c2f3 100644
--- a/__tests__/integration/components/sparkline/sparkline-2.ts
+++ b/__tests__/integration/components/sparkline/sparkline-2.ts
@@ -7,8 +7,7 @@ export const Sparkline2 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        x: 10,
-        y: 10,
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-3.ts b/__tests__/integration/components/sparkline/sparkline-3.ts
index 2bdcc5f54..0f1a3c982 100644
--- a/__tests__/integration/components/sparkline/sparkline-3.ts
+++ b/__tests__/integration/components/sparkline/sparkline-3.ts
@@ -7,8 +7,7 @@ export const Sparkline3 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        x: 10,
-        y: 10,
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-4.ts b/__tests__/integration/components/sparkline/sparkline-4.ts
index 39d771e03..a93e466e7 100644
--- a/__tests__/integration/components/sparkline/sparkline-4.ts
+++ b/__tests__/integration/components/sparkline/sparkline-4.ts
@@ -7,8 +7,7 @@ export const Sparkline4 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        x: 10,
-        y: 10,
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-5.ts b/__tests__/integration/components/sparkline/sparkline-5.ts
index 27641beae..fb78f0aea 100644
--- a/__tests__/integration/components/sparkline/sparkline-5.ts
+++ b/__tests__/integration/components/sparkline/sparkline-5.ts
@@ -7,8 +7,7 @@ export const Sparkline5 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        x: 10,
-        y: 10,
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-6.ts b/__tests__/integration/components/sparkline/sparkline-6.ts
index f84fc897f..4a106b34a 100644
--- a/__tests__/integration/components/sparkline/sparkline-6.ts
+++ b/__tests__/integration/components/sparkline/sparkline-6.ts
@@ -7,8 +7,7 @@ export const Sparkline6 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        x: 10,
-        y: 10,
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-7.ts b/__tests__/integration/components/sparkline/sparkline-7.ts
index 415d6ea7f..351ef7020 100644
--- a/__tests__/integration/components/sparkline/sparkline-7.ts
+++ b/__tests__/integration/components/sparkline/sparkline-7.ts
@@ -7,8 +7,7 @@ export const Sparkline7 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        x: 10,
-        y: 10,
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-8.ts b/__tests__/integration/components/sparkline/sparkline-8.ts
index 9452eca94..67e08d090 100644
--- a/__tests__/integration/components/sparkline/sparkline-8.ts
+++ b/__tests__/integration/components/sparkline/sparkline-8.ts
@@ -7,8 +7,7 @@ export const Sparkline8 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        x: 10,
-        y: 10,
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-9.ts b/__tests__/integration/components/sparkline/sparkline-9.ts
index 462a73c56..e9d16118c 100644
--- a/__tests__/integration/components/sparkline/sparkline-9.ts
+++ b/__tests__/integration/components/sparkline/sparkline-9.ts
@@ -7,8 +7,7 @@ export const Sparkline9 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        x: 10,
-        y: 10,
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,
diff --git a/__tests__/integration/components/sparkline/sparkline-scale-column.ts b/__tests__/integration/components/sparkline/sparkline-scale-column.ts
index 5c473bf98..bb8caaf50 100644
--- a/__tests__/integration/components/sparkline/sparkline-scale-column.ts
+++ b/__tests__/integration/components/sparkline/sparkline-scale-column.ts
@@ -29,7 +29,7 @@ export const SparklineScaleColumn = it((group) => {
     })
   );
 
-  const shape2 = { x: 10, y: 70, width: 300, height: 50 };
+  const shape2 = { x: 10, y: 70, transform: `translate(30, 30)`, width: 300, height: 50 };
 
   group.appendChild(
     new Rect({
diff --git a/__tests__/integration/components/sparkline/sparkline-scale-line.ts b/__tests__/integration/components/sparkline/sparkline-scale-line.ts
index 450392f0e..b4c932e8b 100644
--- a/__tests__/integration/components/sparkline/sparkline-scale-line.ts
+++ b/__tests__/integration/components/sparkline/sparkline-scale-line.ts
@@ -3,7 +3,7 @@ import { it } from '../../utils';
 import { Sparkline } from '../../../../src/ui/sparkline';
 
 export const SparklineScaleLine = it((group) => {
-  const shape1 = { x: 10, y: 10, width: 300, height: 50 };
+  const shape1 = { transform: 'translate(10, 10)', width: 300, height: 50 };
   group.appendChild(
     new Rect({
       style: {
@@ -33,7 +33,7 @@ export const SparklineScaleLine = it((group) => {
     })
   );
 
-  const shape2 = { x: 10, y: 70, width: 300, height: 50 };
+  const shape2 = { transform: 'translate(10, 70)', width: 300, height: 50 };
 
   group.appendChild(
     new Rect({
diff --git a/__tests__/integration/components/switch/switch-1.ts b/__tests__/integration/components/switch/switch-1.ts
index 00f737eca..e656890cb 100644
--- a/__tests__/integration/components/switch/switch-1.ts
+++ b/__tests__/integration/components/switch/switch-1.ts
@@ -15,7 +15,7 @@ export const Switch1 = () => {
   group.appendChild(
     new Switch({
       style: {
-        y: 40,
+        transform: 'translateY(40)',
         checked: true,
       },
     })
@@ -24,7 +24,7 @@ export const Switch1 = () => {
   const sw = group.appendChild(
     new Switch({
       style: {
-        y: 80,
+        transform: 'translateY(80)',
         checked: false,
       },
     })
diff --git a/__tests__/integration/components/tag/tag-1.ts b/__tests__/integration/components/tag/tag-1.ts
index 89c71c1bf..ca670e998 100644
--- a/__tests__/integration/components/tag/tag-1.ts
+++ b/__tests__/integration/components/tag/tag-1.ts
@@ -7,8 +7,7 @@ export const Tag1 = () => {
   group.appendChild(
     new Tag({
       style: {
-        x: 100,
-        y: 100,
+        transform: 'translate(100, 100)',
         text: 'G2',
       },
     })
@@ -17,8 +16,7 @@ export const Tag1 = () => {
   group.appendChild(
     new Tag({
       style: {
-        x: 200,
-        y: 100,
+        transform: 'translate(200, 100)',
         text: 'G6',
         backgroundFill: '#DBF1B7',
         labelFill: 'red',
@@ -34,8 +32,7 @@ export const Tag1 = () => {
   const tag = group.appendChild(
     new Tag({
       style: {
-        x: 300,
-        y: 100,
+        transform: 'translate(300, 100)',
         text: 'L7',
         radius: 6,
         padding: [6, 24],
diff --git a/__tests__/integration/components/title/title.ts b/__tests__/integration/components/title/title.ts
index 7f3ea5aee..1c0ee2ac2 100644
--- a/__tests__/integration/components/title/title.ts
+++ b/__tests__/integration/components/title/title.ts
@@ -5,16 +5,17 @@ export const TitleDemo = () => {
   const group = new Group({});
 
   const createTitle = (argsRect = {}, argsTitle = {}) => {
+    const { x, y, ...rest } = argsRect as any;
+
     const g = group.appendChild(new Group());
     const content = g.appendChild(
       new Rect({
         style: {
-          x: 0,
-          y: 0,
           width: 100,
           height: 100,
           fill: 'red',
-          ...argsRect,
+          transform: `translate(${x}, ${y})`,
+          ...rest,
         },
       })
     );
diff --git a/__tests__/integration/main.tsx b/__tests__/integration/main.tsx
index ad0429dd9..7b7697108 100644
--- a/__tests__/integration/main.tsx
+++ b/__tests__/integration/main.tsx
@@ -17,7 +17,9 @@ const { Option } = Select;
 const casesName = Object.keys(cases);
 const renderers = {
   svg: new SVGRenderer(),
-  canvas: new CanvasRenderer(),
+  canvas: new CanvasRenderer({
+    // enableDirtyRectangleRendering: false,
+  }),
   webgl: new WebGLRenderer(),
 } as const;
 renderers.webgl.registerPlugin(new ControlPlugin());
diff --git a/__tests__/integration/snapshots/AxisAnimationDisable.svg b/__tests__/integration/snapshots/AxisAnimationDisable.svg
index 65a0b773e..5e1f779bc 100644
--- a/__tests__/integration/snapshots/AxisAnimationDisable.svg
+++ b/__tests__/integration/snapshots/AxisAnimationDisable.svg
@@ -6,160 +6,139 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-45"
-        fill="none"
-        width="250"
-        height="550"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-46" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-49"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-50"
-              fill="none"
-              class="axis-grid"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-109"
-                fill="none"
-                class="grid-line-group"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g transform="matrix(1,0,0,1,150,500)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-58" fill="none" width="250" height="550">
+        <g id="g-svg-59" fill="none">
+          <g id="g-svg-62" fill="none" class="axis-grid-group">
+            <g id="g-svg-63" fill="none" class="axis-grid">
+              <g id="g-svg-121" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-111"
+                    id="g-svg-123"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,500 L 190,500"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,462.500000)">
+                <g>
                   <path
-                    id="g-svg-112"
+                    id="g-svg-124"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,462.5 L 190,462.5"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,425)">
+                <g>
                   <path
-                    id="g-svg-113"
+                    id="g-svg-125"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,425 L 190,425"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,387.500000)">
+                <g>
                   <path
-                    id="g-svg-114"
+                    id="g-svg-126"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,387.5 L 190,387.5"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,350)">
+                <g>
                   <path
-                    id="g-svg-115"
+                    id="g-svg-127"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,350 L 190,350"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,312.500000)">
+                <g>
                   <path
-                    id="g-svg-116"
+                    id="g-svg-128"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,312.5 L 190,312.5"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,275)">
+                <g>
                   <path
-                    id="g-svg-117"
+                    id="g-svg-129"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,275 L 190,275"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,237.500000)">
+                <g>
                   <path
-                    id="g-svg-118"
+                    id="g-svg-130"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,237.50000000000006 L 190,237.50000000000006"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,200)">
+                <g>
                   <path
-                    id="g-svg-119"
+                    id="g-svg-131"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,200 L 190,200"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,162.500000)">
+                <g>
                   <path
-                    id="g-svg-120"
+                    id="g-svg-132"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,162.5 L 190,162.5"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,125)">
+                <g>
                   <path
-                    id="g-svg-121"
+                    id="g-svg-133"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,125.00000000000006 L 190,125.00000000000006"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,87.500000)">
+                <g>
                   <path
-                    id="g-svg-122"
+                    id="g-svg-134"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,87.5 L 190,87.5"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
@@ -167,152 +146,131 @@
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-110"
-                fill="none"
-                class="grid-region-group"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g transform="matrix(1,0,0,1,150,462.500000)">
+              <g id="g-svg-122" fill="none" class="grid-region-group">
+                <g>
                   <path
-                    id="g-svg-123"
+                    id="g-svg-135"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,500 L 190,500 L 190,462.5 L 150,462.5 L 150,500"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,425)">
+                <g>
                   <path
-                    id="g-svg-124"
+                    id="g-svg-136"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,462.5 L 190,462.5 L 190,425 L 150,425 L 150,462.5"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,387.500000)">
+                <g>
                   <path
-                    id="g-svg-125"
+                    id="g-svg-137"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,425 L 190,425 L 190,387.5 L 150,387.5 L 150,425"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,350)">
+                <g>
                   <path
-                    id="g-svg-126"
+                    id="g-svg-138"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,387.5 L 190,387.5 L 190,350 L 150,350 L 150,387.5"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,312.500000)">
+                <g>
                   <path
-                    id="g-svg-127"
+                    id="g-svg-139"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,350 L 190,350 L 190,312.5 L 150,312.5 L 150,350"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,275)">
+                <g>
                   <path
-                    id="g-svg-128"
+                    id="g-svg-140"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,312.5 L 190,312.5 L 190,275 L 150,275 L 150,312.5"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,237.500000)">
+                <g>
                   <path
-                    id="g-svg-129"
+                    id="g-svg-141"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,37.49999999999994 L 40,37.49999999999994 L 40,0 L 0,0 L 0,37.49999999999994"
+                    d="M 150,275 L 190,275 L 190,237.50000000000006 L 150,237.50000000000006 L 150,275"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,200)">
+                <g>
                   <path
-                    id="g-svg-130"
+                    id="g-svg-142"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,37.50000000000006 L 40,37.50000000000006 L 40,0 L 0,0 L 0,37.50000000000006"
+                    d="M 150,237.50000000000006 L 190,237.50000000000006 L 190,200 L 150,200 L 150,237.50000000000006"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,162.500000)">
+                <g>
                   <path
-                    id="g-svg-131"
+                    id="g-svg-143"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,200 L 190,200 L 190,162.5 L 150,162.5 L 150,200"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,125)">
+                <g>
                   <path
-                    id="g-svg-132"
+                    id="g-svg-144"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,37.49999999999994 L 40,37.49999999999994 L 40,0 L 0,0 L 0,37.49999999999994"
+                    d="M 150,162.5 L 190,162.5 L 190,125.00000000000006 L 150,125.00000000000006 L 150,162.5"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,87.500000)">
+                <g>
                   <path
-                    id="g-svg-133"
+                    id="g-svg-145"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,37.50000000000006 L 40,37.50000000000006 L 40,0 L 0,0 L 0,37.50000000000006"
+                    d="M 150,125.00000000000006 L 190,125.00000000000006 L 190,87.5 L 150,87.5 L 150,125.00000000000006"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-51"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-52"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,150,40)">
+          <g id="g-svg-64" fill="none" class="axis-main-group">
+            <g id="g-svg-65" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-53"
+                  id="g-svg-66"
                   fill="none"
-                  x1="0"
-                  y1="470"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="150"
+                  y1="510"
+                  x2="150"
+                  y2="25"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,150,25)">
                   <path
                     id="g-svg-2"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-56"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-69" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-136"
+                id="g-svg-148"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,500)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-3"
                     fill="none"
@@ -327,12 +285,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-137"
+                id="g-svg-149"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,462.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-4"
                     fill="none"
@@ -347,12 +305,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-138"
+                id="g-svg-150"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,425)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-5"
                     fill="none"
@@ -367,12 +325,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-139"
+                id="g-svg-151"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,387.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-6"
                     fill="none"
@@ -387,12 +345,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-140"
+                id="g-svg-152"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,350)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-7"
                     fill="none"
@@ -407,12 +365,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-141"
+                id="g-svg-153"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,312.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-8"
                     fill="none"
@@ -427,12 +385,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-142"
+                id="g-svg-154"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,275)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-9"
                     fill="none"
@@ -447,12 +405,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-143"
+                id="g-svg-155"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,237.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-10"
                     fill="none"
@@ -467,12 +425,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-144"
+                id="g-svg-156"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,200)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-11"
                     fill="none"
@@ -487,12 +445,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-145"
+                id="g-svg-157"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,162.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-12"
                     fill="none"
@@ -507,12 +465,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-146"
+                id="g-svg-158"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,125)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-13"
                     fill="none"
@@ -527,12 +485,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-147"
+                id="g-svg-159"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,87.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-14"
                     fill="none"
@@ -547,19 +505,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-81"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-94" fill="none" class="axis-label-group">
               <g
-                id="g-svg-82"
+                id="g-svg-95"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,500)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-15"
                     fill="rgba(0,0,0,1)"
@@ -580,12 +533,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-83"
+                id="g-svg-96"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,462.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-16"
                     fill="rgba(0,0,0,1)"
@@ -606,12 +559,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-84"
+                id="g-svg-97"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,425)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-17"
                     fill="rgba(0,0,0,1)"
@@ -632,12 +585,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-85"
+                id="g-svg-98"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,387.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-18"
                     fill="rgba(0,0,0,1)"
@@ -658,12 +611,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-86"
+                id="g-svg-99"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,350)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-19"
                     fill="rgba(0,0,0,1)"
@@ -684,12 +637,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-87"
+                id="g-svg-100"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,312.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -710,12 +663,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-88"
+                id="g-svg-101"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,275)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -736,12 +689,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-89"
+                id="g-svg-102"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,237.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -762,12 +715,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-90"
+                id="g-svg-103"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,200)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -788,12 +741,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-91"
+                id="g-svg-104"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,162.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -814,12 +767,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-92"
+                id="g-svg-105"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,125)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-25"
                     fill="rgba(0,0,0,1)"
@@ -840,12 +793,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-93"
+                id="g-svg-106"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,87.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-26"
                     fill="rgba(0,0,0,1)"
@@ -868,14 +821,14 @@
             </g>
           </g>
           <g
-            id="g-svg-106"
+            id="g-svg-119"
             fill="none"
             class="axis-title-group"
-            transform="matrix(1,0,0,1,54.240002,265.750000)"
+            transform="matrix(1,0,0,1,69.620003,265.750000)"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-107"
+                id="g-svg-120"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -894,30 +847,29 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-47" fill="none" transform="matrix(1,0,0,1,250,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-60" fill="none" x="250" y="100">
+          <g>
             <path
-              id="g-svg-30"
+              id="g-svg-29"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 255,100 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="61.44"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="250"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-28"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-27" fill="none" class="marker" x="260" y="115" />
+          <g>
             <text
-              id="g-svg-29"
+              id="g-svg-28"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="260"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -928,30 +880,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-48" fill="none" transform="matrix(1,0,0,1,250,150)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-61" fill="none" x="250" y="150">
+          <g>
             <path
-              id="g-svg-33"
+              id="g-svg-32"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 255,150 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="250"
+              y="150"
             />
           </g>
-          <g
-            id="g-svg-31"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-30" fill="none" class="marker" x="260" y="165" />
+          <g>
             <text
-              id="g-svg-32"
+              id="g-svg-31"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="260"
+              y="165"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate1.svg b/__tests__/integration/snapshots/AxisAnimationUpdate1.svg
index c28fcbc2b..9f35c55d2 100644
--- a/__tests__/integration/snapshots/AxisAnimationUpdate1.svg
+++ b/__tests__/integration/snapshots/AxisAnimationUpdate1.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-381"
-        fill="none"
-        width="650"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-382" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-385"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-386"
-              fill="none"
-              class="axis-grid"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-1"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-379" fill="none" width="650" height="150">
+        <g id="g-svg-380" fill="none">
+          <g id="g-svg-383" fill="none" class="axis-grid-group">
+            <g id="g-svg-384" fill="none" class="axis-grid">
+              <g id="g-svg-1" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-3"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 200,50 L 200,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,215,50)">
+                <g>
                   <path
                     id="g-svg-4"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 215,50 L 215,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,50)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 230,50 L 230,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,245,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 245,50 L 245,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 260,50 L 260,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 275,50 L 275,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,290,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 290,50 L 290,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,305,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 305,50 L 305,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 320,50 L 320,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 335,50 L 335,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 350,50 L 350,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,365,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 365,50 L 365,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 380,50 L 380,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,395,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 395,50 L 395,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,50)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 410,50 L 410,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 425,50 L 425,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,440,50)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 440,50 L 440,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,455,50)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 455,50 L 455,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,470,50)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 470,50 L 470,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,485,50)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -251,220 +230,199 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 485,50 L 485,90"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              >
-                <g transform="matrix(1,0,0,1,200,50)">
+              <g id="g-svg-2" fill="none" class="grid-region-group">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 200,50 L 200,90 L 215,90 L 215,50 L 200,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,215,50)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 215,50 L 215,90 L 230,90 L 230,50 L 215,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,50)">
+                <g>
                   <path
                     id="g-svg-25"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 230,50 L 230,90 L 245,90 L 245,50 L 230,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,245,50)">
+                <g>
                   <path
                     id="g-svg-26"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 245,50 L 245,90 L 260,90 L 260,50 L 245,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,50)">
+                <g>
                   <path
                     id="g-svg-27"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 260,50 L 260,90 L 275,90 L 275,50 L 260,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-28"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 275,50 L 275,90 L 290,90 L 290,50 L 275,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,290,50)">
+                <g>
                   <path
                     id="g-svg-29"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 290,50 L 290,90 L 305,90 L 305,50 L 290,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,305,50)">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 305,50 L 305,90 L 320,90 L 320,50 L 305,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 320,50 L 320,90 L 335,90 L 335,50 L 320,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,50)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 335,50 L 335,90 L 350,90 L 350,50 L 335,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 350,50 L 350,90 L 365,90 L 365,50 L 350,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,365,50)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 365,50 L 365,90 L 380,90 L 380,50 L 365,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,50)">
+                <g>
                   <path
                     id="g-svg-35"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 380,50 L 380,90 L 395,90 L 395,50 L 380,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,395,50)">
+                <g>
                   <path
                     id="g-svg-36"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 395,50 L 395,90 L 410,90 L 410,50 L 395,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,50)">
+                <g>
                   <path
                     id="g-svg-37"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 410,50 L 410,90 L 425,90 L 425,50 L 410,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-38"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 425,50 L 425,90 L 440,90 L 440,50 L 425,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,440,50)">
+                <g>
                   <path
                     id="g-svg-39"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 440,50 L 440,90 L 455,90 L 455,50 L 440,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,455,50)">
+                <g>
                   <path
                     id="g-svg-40"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 455,50 L 455,90 L 470,90 L 470,50 L 455,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,470,50)">
+                <g>
                   <path
                     id="g-svg-41"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 470,50 L 470,90 L 485,90 L 485,50 L 470,50"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-387"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-388"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,190,50)">
+          <g id="g-svg-385" fill="none" class="axis-main-group">
+            <g id="g-svg-386" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-389"
+                  id="g-svg-387"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="335"
-                  y2="-1.83697019872103e-15"
+                  x1="190"
+                  y1="50"
+                  x2="525"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,335,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,525,50)">
                   <path
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-392"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-390" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-393"
+                id="g-svg-391"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,200,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -479,12 +437,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-394"
+                id="g-svg-392"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,215,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -499,12 +457,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-395"
+                id="g-svg-393"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,230,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
@@ -519,12 +477,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-396"
+                id="g-svg-394"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,245,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-47"
                     fill="none"
@@ -539,12 +497,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-397"
+                id="g-svg-395"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,260,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-48"
                     fill="none"
@@ -559,12 +517,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-398"
+                id="g-svg-396"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,275,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-49"
                     fill="none"
@@ -579,12 +537,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-399"
+                id="g-svg-397"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,290,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-50"
                     fill="none"
@@ -599,12 +557,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-400"
+                id="g-svg-398"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,305,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -619,12 +577,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-401"
+                id="g-svg-399"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,320,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -639,12 +597,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-402"
+                id="g-svg-400"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,335,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -659,12 +617,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-403"
+                id="g-svg-401"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,350,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -679,12 +637,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-404"
+                id="g-svg-402"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,365,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
@@ -699,12 +657,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-405"
+                id="g-svg-403"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,380,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
@@ -719,12 +677,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-406"
+                id="g-svg-404"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,395,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
@@ -739,12 +697,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-407"
+                id="g-svg-405"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,410,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
@@ -759,12 +717,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-408"
+                id="g-svg-406"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,425,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -779,12 +737,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-409"
+                id="g-svg-407"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,440,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -799,12 +757,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-410"
+                id="g-svg-408"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,455,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -819,12 +777,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-411"
+                id="g-svg-409"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,470,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -839,12 +797,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-412"
+                id="g-svg-410"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,485,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
@@ -859,19 +817,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-433"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-431" fill="none" class="axis-label-group">
               <g
-                id="g-svg-434"
+                id="g-svg-432"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,200,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -893,12 +846,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-435"
+                id="g-svg-433"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,215,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -920,12 +873,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-436"
+                id="g-svg-434"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,230,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -947,12 +900,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-437"
+                id="g-svg-435"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,245,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -974,12 +927,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-438"
+                id="g-svg-436"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,260,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -1001,12 +954,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-439"
+                id="g-svg-437"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,275,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -1028,12 +981,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-440"
+                id="g-svg-438"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,290,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -1055,12 +1008,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-441"
+                id="g-svg-439"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,305,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -1082,12 +1035,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-442"
+                id="g-svg-440"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,320,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-72"
                     fill="rgba(0,0,0,1)"
@@ -1109,12 +1062,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-443"
+                id="g-svg-441"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,335,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-73"
                     fill="rgba(0,0,0,1)"
@@ -1136,12 +1089,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-444"
+                id="g-svg-442"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,350,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-74"
                     fill="rgba(0,0,0,1)"
@@ -1163,12 +1116,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-445"
+                id="g-svg-443"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,365,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-75"
                     fill="rgba(0,0,0,1)"
@@ -1190,12 +1143,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-446"
+                id="g-svg-444"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,380,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-76"
                     fill="rgba(0,0,0,1)"
@@ -1217,12 +1170,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-447"
+                id="g-svg-445"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,395,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-77"
                     fill="rgba(0,0,0,1)"
@@ -1244,12 +1197,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-448"
+                id="g-svg-446"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,410,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-78"
                     fill="rgba(0,0,0,1)"
@@ -1271,12 +1224,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-449"
+                id="g-svg-447"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,425,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-79"
                     fill="rgba(0,0,0,1)"
@@ -1298,12 +1251,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-450"
+                id="g-svg-448"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,440,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-80"
                     fill="rgba(0,0,0,1)"
@@ -1325,12 +1278,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-451"
+                id="g-svg-449"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,455,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-81"
                     fill="rgba(0,0,0,1)"
@@ -1352,12 +1305,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-452"
+                id="g-svg-450"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,470,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-82"
                     fill="rgba(0,0,0,1)"
@@ -1379,12 +1332,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-453"
+                id="g-svg-451"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,485,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-83"
                     fill="rgba(0,0,0,1)"
@@ -1407,37 +1360,31 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-474"
-            fill="none"
-            class="axis-title-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
+          <g id="g-svg-472" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-383" fill="none" transform="matrix(1,0,0,1,50,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-381" fill="none" x="50" y="100">
+          <g>
             <path
               id="g-svg-86"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 55,100 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="61.44"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="50"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-84"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-84" fill="none" class="marker" x="60" y="115" />
+          <g>
             <text
               id="g-svg-85"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="60"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -1448,30 +1395,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-384" fill="none" transform="matrix(1,0,0,1,150,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-382" fill="none" x="150" y="100">
+          <g>
             <path
               id="g-svg-89"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 155,100 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="150"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-87"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-87" fill="none" class="marker" x="160" y="115" />
+          <g>
             <text
               id="g-svg-88"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="160"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate10.svg b/__tests__/integration/snapshots/AxisAnimationUpdate10.svg
index 5753867e7..ff26a5c7e 100644
--- a/__tests__/integration/snapshots/AxisAnimationUpdate10.svg
+++ b/__tests__/integration/snapshots/AxisAnimationUpdate10.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-30"
-        fill="none"
-        width="650"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-34"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-35"
-              fill="none"
-              class="axis-grid"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-1"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-33" fill="none" width="650" height="150">
+        <g id="g-svg-34" fill="none">
+          <g id="g-svg-37" fill="none" class="axis-grid-group">
+            <g id="g-svg-38" fill="none" class="axis-grid">
+              <g id="g-svg-1" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-3"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 200,50 L 200,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,215,50)">
+                <g>
                   <path
                     id="g-svg-4"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 215,50 L 215,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,50)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 230,50 L 230,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,245,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 245,50 L 245,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 260,50 L 260,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 275,50 L 275,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,290,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 290,50 L 290,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,305,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 305,50 L 305,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 320,50 L 320,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 335,50 L 335,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 350,50 L 350,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,365,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 365,50 L 365,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 380,50 L 380,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,395,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 395,50 L 395,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,50)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 410,50 L 410,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 425,50 L 425,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,440,50)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 440,50 L 440,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,455,50)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 455,50 L 455,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,470,50)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 470,50 L 470,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,485,50)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -251,220 +230,199 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 485,50 L 485,90"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              >
-                <g transform="matrix(1,0,0,1,200,50)">
+              <g id="g-svg-2" fill="none" class="grid-region-group">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 200,50 L 200,90 L 215,90 L 215,50 L 200,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,215,50)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 215,50 L 215,90 L 230,90 L 230,50 L 215,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,50)">
+                <g>
                   <path
                     id="g-svg-25"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 230,50 L 230,90 L 245,90 L 245,50 L 230,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,245,50)">
+                <g>
                   <path
                     id="g-svg-26"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 245,50 L 245,90 L 260,90 L 260,50 L 245,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,50)">
+                <g>
                   <path
                     id="g-svg-27"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 260,50 L 260,90 L 275,90 L 275,50 L 260,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-28"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 275,50 L 275,90 L 290,90 L 290,50 L 275,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,290,50)">
+                <g>
                   <path
                     id="g-svg-29"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 290,50 L 290,90 L 305,90 L 305,50 L 290,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,305,50)">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 305,50 L 305,90 L 320,90 L 320,50 L 305,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 320,50 L 320,90 L 335,90 L 335,50 L 320,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,50)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 335,50 L 335,90 L 350,90 L 350,50 L 335,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 350,50 L 350,90 L 365,90 L 365,50 L 350,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,365,50)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 365,50 L 365,90 L 380,90 L 380,50 L 365,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,50)">
+                <g>
                   <path
                     id="g-svg-35"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 380,50 L 380,90 L 395,90 L 395,50 L 380,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,395,50)">
+                <g>
                   <path
                     id="g-svg-36"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 395,50 L 395,90 L 410,90 L 410,50 L 395,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,50)">
+                <g>
                   <path
                     id="g-svg-37"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 410,50 L 410,90 L 425,90 L 425,50 L 410,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-38"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 425,50 L 425,90 L 440,90 L 440,50 L 425,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,440,50)">
+                <g>
                   <path
                     id="g-svg-39"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 440,50 L 440,90 L 455,90 L 455,50 L 440,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,455,50)">
+                <g>
                   <path
                     id="g-svg-40"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 455,50 L 455,90 L 470,90 L 470,50 L 455,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,470,50)">
+                <g>
                   <path
                     id="g-svg-41"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 470,50 L 470,90 L 485,90 L 485,50 L 470,50"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-36"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-37"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,190,50)">
+          <g id="g-svg-39" fill="none" class="axis-main-group">
+            <g id="g-svg-40" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-38"
+                  id="g-svg-41"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="335"
-                  y2="-1.83697019872103e-15"
+                  x1="190"
+                  y1="50"
+                  x2="525"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,335,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,525,50)">
                   <path
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-41"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-44" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-42"
+                id="g-svg-45"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,200,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -479,12 +437,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-43"
+                id="g-svg-46"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,215,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -499,12 +457,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-44"
+                id="g-svg-47"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,230,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
@@ -519,12 +477,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-45"
+                id="g-svg-48"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,245,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-47"
                     fill="none"
@@ -539,12 +497,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-46"
+                id="g-svg-49"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,260,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-48"
                     fill="none"
@@ -559,12 +517,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-47"
+                id="g-svg-50"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,275,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-49"
                     fill="none"
@@ -579,12 +537,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-48"
+                id="g-svg-51"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,290,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-50"
                     fill="none"
@@ -599,12 +557,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-49"
+                id="g-svg-52"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,305,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -619,12 +577,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-50"
+                id="g-svg-53"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,320,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -639,12 +597,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-51"
+                id="g-svg-54"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,335,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -659,12 +617,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-52"
+                id="g-svg-55"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,350,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -679,12 +637,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-53"
+                id="g-svg-56"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,365,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
@@ -699,12 +657,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-54"
+                id="g-svg-57"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,380,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
@@ -719,12 +677,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-55"
+                id="g-svg-58"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,395,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
@@ -739,12 +697,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-56"
+                id="g-svg-59"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,410,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
@@ -759,12 +717,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-57"
+                id="g-svg-60"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,425,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -779,12 +737,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-58"
+                id="g-svg-61"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,440,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -799,12 +757,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-59"
+                id="g-svg-62"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,455,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -819,12 +777,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-60"
+                id="g-svg-63"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,470,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -839,12 +797,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-61"
+                id="g-svg-64"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,485,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
@@ -859,19 +817,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-82"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-85" fill="none" class="axis-label-group">
               <g
-                id="g-svg-83"
+                id="g-svg-86"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,200,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -893,12 +846,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-84"
+                id="g-svg-87"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,215,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -920,12 +873,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-85"
+                id="g-svg-88"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,230,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -947,12 +900,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-86"
+                id="g-svg-89"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,245,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -974,12 +927,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-87"
+                id="g-svg-90"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,260,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -1001,12 +954,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-88"
+                id="g-svg-91"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,275,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -1028,12 +981,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-89"
+                id="g-svg-92"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,290,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -1055,12 +1008,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-90"
+                id="g-svg-93"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,305,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -1082,12 +1035,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-91"
+                id="g-svg-94"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,320,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-72"
                     fill="rgba(0,0,0,1)"
@@ -1109,12 +1062,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-92"
+                id="g-svg-95"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,335,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-73"
                     fill="rgba(0,0,0,1)"
@@ -1136,12 +1089,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-93"
+                id="g-svg-96"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,350,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-74"
                     fill="rgba(0,0,0,1)"
@@ -1163,12 +1116,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-94"
+                id="g-svg-97"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,365,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-75"
                     fill="rgba(0,0,0,1)"
@@ -1190,12 +1143,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-95"
+                id="g-svg-98"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,380,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-76"
                     fill="rgba(0,0,0,1)"
@@ -1217,12 +1170,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-96"
+                id="g-svg-99"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,395,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-77"
                     fill="rgba(0,0,0,1)"
@@ -1244,12 +1197,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-97"
+                id="g-svg-100"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,410,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-78"
                     fill="rgba(0,0,0,1)"
@@ -1271,12 +1224,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-98"
+                id="g-svg-101"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,425,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-79"
                     fill="rgba(0,0,0,1)"
@@ -1298,12 +1251,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-99"
+                id="g-svg-102"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,440,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-80"
                     fill="rgba(0,0,0,1)"
@@ -1325,12 +1278,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-100"
+                id="g-svg-103"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,455,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-81"
                     fill="rgba(0,0,0,1)"
@@ -1352,12 +1305,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-101"
+                id="g-svg-104"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,470,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-82"
                     fill="rgba(0,0,0,1)"
@@ -1379,12 +1332,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-102"
+                id="g-svg-105"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,485,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-83"
                     fill="rgba(0,0,0,1)"
@@ -1407,37 +1360,31 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-123"
-            fill="none"
-            class="axis-title-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
+          <g id="g-svg-126" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-32" fill="none" transform="matrix(1,0,0,1,50,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-35" fill="none" x="50" y="100">
+          <g>
             <path
               id="g-svg-86"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 55,100 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="61.44"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="50"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-84"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-84" fill="none" class="marker" x="60" y="115" />
+          <g>
             <text
               id="g-svg-85"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="60"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -1448,30 +1395,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-33" fill="none" transform="matrix(1,0,0,1,150,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-36" fill="none" x="150" y="100">
+          <g>
             <path
               id="g-svg-89"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 155,100 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="150"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-87"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-87" fill="none" class="marker" x="160" y="115" />
+          <g>
             <text
               id="g-svg-88"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="160"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate11.svg b/__tests__/integration/snapshots/AxisAnimationUpdate11.svg
index 68599e7c8..a583f7a37 100644
--- a/__tests__/integration/snapshots/AxisAnimationUpdate11.svg
+++ b/__tests__/integration/snapshots/AxisAnimationUpdate11.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-90"
-        fill="none"
-        width="250"
-        height="250"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-91" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-94"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-95"
-              fill="none"
-              class="axis-grid"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-1"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,230,150)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-90" fill="none" width="250" height="250">
+        <g id="g-svg-91" fill="none">
+          <g id="g-svg-94" fill="none" class="axis-grid-group">
+            <g id="g-svg-95" fill="none" class="axis-grid">
+              <g id="g-svg-1" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-3"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,227.274063,170.705521)">
+                <g>
                   <path
                     id="g-svg-4"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 227.27406610312545,170.70552360820164 L 227.27406610312545,170.70552360820164"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170.705521,227.274063)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170.70552360820164,227.27406610312545 L 170.70552360820164,227.27406610312545"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,129.294479,227.274063)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 129.29447639179836,227.27406610312548 L 129.29447639179836,227.27406610312548"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000001,219.2820323027551 L 110.00000000000001,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,72.725937,170.705521)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -163,70 +142,49 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 72.72593389687455,170.70552360820167 L 72.72593389687455,170.70552360820167"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-2" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-96"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-97"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,70,150)">
+          <g id="g-svg-96" fill="none" class="axis-main-group">
+            <g id="g-svg-97" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-98"
                   fill="none"
-                  d="M 160,0 A 80 80 0 0 1 0 0 L -0.11780851333078682,-14.999537364671845"
+                  d="M 230,150 A 80 80 0 0 1 70 150 L 69.88219148666921,135.00046263532815"
                   class="axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.003927,0.499985,-0.499985,0.003927,-0.117809,-14.999537)">
+                <g transform="matrix(0.003927,0.499985,-0.499985,0.003927,69.882195,135.000458)">
                   <path
                     id="g-svg-17"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-102"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-102" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-103"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,230,150)"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-18"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -240,14 +198,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,227.274063,170.705521)"
               >
-                <g transform="matrix(1,0,0,1,-9.659258,-2.588191)">
+                <g>
                   <line
                     id="g-svg-19"
                     fill="none"
-                    x1="9.659258262890683"
-                    y1="2.5881904510252074"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-9.659258262890683"
+                    y2="-2.5881904510252074"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -260,14 +218,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,219.282028,190)"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-20"
                     fill="none"
-                    x1="8.660254037844387"
-                    y1="4.999999999999999"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844387"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -280,14 +238,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-21"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -300,14 +258,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,190,219.282028)"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-22"
                     fill="none"
-                    x1="5.000000000000001"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000001"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -320,14 +278,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,170.705521,227.274063)"
               >
-                <g transform="matrix(1,0,0,1,-2.588191,-9.659258)">
+                <g>
                   <line
                     id="g-svg-23"
                     fill="none"
-                    x1="2.5881904510252074"
-                    y1="9.659258262890683"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-2.5881904510252074"
+                    y2="-9.659258262890683"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -340,14 +298,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,230)"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -360,14 +318,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,129.294479,227.274063)"
               >
-                <g transform="matrix(1,0,0,1,0,-9.659258)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
                     x1="0"
-                    y1="9.659258262890685"
+                    y1="0"
                     x2="2.588190451025204"
-                    y2="0"
+                    y2="-9.659258262890685"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -380,14 +338,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,110,219.282028)"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844387"
+                    y1="0"
                     x2="4.999999999999998"
-                    y2="0"
+                    y2="-8.660254037844387"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -400,14 +358,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -420,14 +378,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,80.717964,190)"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -440,14 +398,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,72.725937,170.705521)"
               >
-                <g transform="matrix(1,0,0,1,0,-2.588191)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
                     x1="0"
-                    y1="2.58819045102521"
+                    y1="0"
                     x2="9.659258262890681"
-                    y2="0"
+                    y2="-2.58819045102521"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -455,19 +413,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-127"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-127" fill="none" class="axis-label-group">
               <g
                 id="g-svg-128"
                 fill="none"
                 class="axis-label"
-                transform="matrix(-0,-1,1,-0,200,150)"
+                transform="matrix(1,0,0,1,200,150)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-30"
                     fill="rgba(0,0,0,1)"
@@ -492,9 +445,9 @@
                 id="g-svg-129"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.258819,-0.965926,0.965926,0.258819,198.296295,162.940948)"
+                transform="matrix(1,0,0,1,198.296295,162.940948)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.258819,-0.965926,0.965926,0.258819,0,0)">
                   <text
                     id="g-svg-31"
                     fill="rgba(0,0,0,1)"
@@ -519,9 +472,9 @@
                 id="g-svg-130"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,193.301270,175)"
+                transform="matrix(1,0,0,1,193.301270,175)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-32"
                     fill="rgba(0,0,0,1)"
@@ -546,9 +499,9 @@
                 id="g-svg-131"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,185.355347,185.355347)"
+                transform="matrix(1,0,0,1,185.355347,185.355347)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-33"
                     fill="rgba(0,0,0,1)"
@@ -573,9 +526,9 @@
                 id="g-svg-132"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,175,193.301270)"
+                transform="matrix(1,0,0,1,175,193.301270)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-34"
                     fill="rgba(0,0,0,1)"
@@ -600,9 +553,9 @@
                 id="g-svg-133"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.965926,-0.258819,0.258819,0.965926,162.940948,198.296295)"
+                transform="matrix(1,0,0,1,162.940948,198.296295)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.965926,-0.258819,0.258819,0.965926,0,0)">
                   <text
                     id="g-svg-35"
                     fill="rgba(0,0,0,1)"
@@ -629,7 +582,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,150,200)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-36"
                     fill="rgba(0,0,0,1)"
@@ -654,9 +607,9 @@
                 id="g-svg-135"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,137.059052,198.296295)"
+                transform="matrix(1,0,0,1,137.059052,198.296295)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.965926,0.258819,-0.258819,0.965926,0,0)">
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -681,9 +634,9 @@
                 id="g-svg-136"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,125,193.301270)"
+                transform="matrix(1,0,0,1,125,193.301270)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -708,9 +661,9 @@
                 id="g-svg-137"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,114.644661,185.355347)"
+                transform="matrix(1,0,0,1,114.644661,185.355347)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -735,9 +688,9 @@
                 id="g-svg-138"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,106.698730,175)"
+                transform="matrix(1,0,0,1,106.698730,175)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-40"
                     fill="rgba(0,0,0,1)"
@@ -762,9 +715,9 @@
                 id="g-svg-139"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.258819,0.965926,-0.965926,0.258819,101.703712,162.940948)"
+                transform="matrix(1,0,0,1,101.703712,162.940948)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.258819,0.965926,-0.965926,0.258819,0,0)">
                   <text
                     id="g-svg-41"
                     fill="rgba(0,0,0,1)"
@@ -791,9 +744,9 @@
             id="g-svg-152"
             fill="none"
             class="axis-title-group"
-            transform="matrix(1,0,0,1,147.421539,104.461349)"
+            transform="matrix(1,0,0,1,147.421539,104.461342)"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-153"
                 fill="rgba(255,0,0,1)"
@@ -814,10 +767,10 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-92" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-92" fill="none">
+          <g>
             <path
-              id="g-svg-45"
+              id="g-svg-44"
               fill="rgba(0,0,0,0)"
               class=".background"
               d="M 5,0 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
@@ -825,19 +778,18 @@
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="0"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-43"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-42" fill="none" class="marker" x="10" y="15" />
+          <g>
             <text
-              id="g-svg-44"
+              id="g-svg-43"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="10"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -848,30 +800,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-93" fill="none" transform="matrix(1,0,0,1,80,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-93" fill="none" x="80" y="0">
+          <g>
             <path
-              id="g-svg-48"
+              id="g-svg-47"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 85,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="80"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-46"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-45" fill="none" class="marker" x="90" y="15" />
+          <g>
             <text
-              id="g-svg-47"
+              id="g-svg-46"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="90"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate12.svg b/__tests__/integration/snapshots/AxisAnimationUpdate12.svg
index 7c904a49d..791e5a10f 100644
--- a/__tests__/integration/snapshots/AxisAnimationUpdate12.svg
+++ b/__tests__/integration/snapshots/AxisAnimationUpdate12.svg
@@ -6,37 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-49"
-        fill="none"
-        width="250"
-        height="250"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-50" fill="none" transform="matrix(1,0,0,1,100,100)" />
-        <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,50,50)">
-          <g id="g-svg-52" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-55"
-              fill="none"
-              class="axis-grid-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-56"
-                fill="none"
-                class="axis-grid"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-1"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                >
-                  <g transform="matrix(1,0,0,1,150,550)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="250" height="250">
+        <g id="g-svg-49" fill="none" transform="matrix(1,0,0,1,100,100)" />
+        <g id="g-svg-50" fill="none" transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-51" fill="none">
+            <g id="g-svg-54" fill="none" class="axis-grid-group">
+              <g id="g-svg-55" fill="none" class="axis-grid">
+                <g id="g-svg-1" fill="none" class="grid-line-group">
+                  <g>
                     <path
                       id="g-svg-3"
                       fill="none"
@@ -44,10 +23,10 @@
                       stroke="rgba(255,0,0,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 40,0"
+                      d="M 150,550 L 190,550"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,508.333344)">
+                  <g>
                     <path
                       id="g-svg-4"
                       fill="none"
@@ -55,10 +34,10 @@
                       stroke="rgba(255,0,0,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 40,0"
+                      d="M 150,508.3333333333333 L 190,508.3333333333333"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,466.666656)">
+                  <g>
                     <path
                       id="g-svg-5"
                       fill="none"
@@ -66,10 +45,10 @@
                       stroke="rgba(255,0,0,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 40,0"
+                      d="M 150,466.6666666666667 L 190,466.6666666666667"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,425)">
+                  <g>
                     <path
                       id="g-svg-6"
                       fill="none"
@@ -77,10 +56,10 @@
                       stroke="rgba(255,0,0,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 40,0"
+                      d="M 150,425 L 190,425"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,383.333344)">
+                  <g>
                     <path
                       id="g-svg-7"
                       fill="none"
@@ -88,10 +67,10 @@
                       stroke="rgba(255,0,0,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 40,0"
+                      d="M 150,383.33333333333337 L 190,383.33333333333337"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,341.666656)">
+                  <g>
                     <path
                       id="g-svg-8"
                       fill="none"
@@ -99,10 +78,10 @@
                       stroke="rgba(255,0,0,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 40,0"
+                      d="M 150,341.6666666666667 L 190,341.6666666666667"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,300)">
+                  <g>
                     <path
                       id="g-svg-9"
                       fill="none"
@@ -110,10 +89,10 @@
                       stroke="rgba(255,0,0,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 40,0"
+                      d="M 150,300 L 190,300"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,258.333344)">
+                  <g>
                     <path
                       id="g-svg-10"
                       fill="none"
@@ -121,10 +100,10 @@
                       stroke="rgba(255,0,0,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 40,0"
+                      d="M 150,258.33333333333337 L 190,258.33333333333337"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,216.666672)">
+                  <g>
                     <path
                       id="g-svg-11"
                       fill="none"
@@ -132,10 +111,10 @@
                       stroke="rgba(255,0,0,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 40,0"
+                      d="M 150,216.66666666666669 L 190,216.66666666666669"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,175)">
+                  <g>
                     <path
                       id="g-svg-12"
                       fill="none"
@@ -143,10 +122,10 @@
                       stroke="rgba(255,0,0,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 40,0"
+                      d="M 150,175 L 190,175"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,133.333328)">
+                  <g>
                     <path
                       id="g-svg-13"
                       fill="none"
@@ -154,10 +133,10 @@
                       stroke="rgba(255,0,0,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 40,0"
+                      d="M 150,133.33333333333337 L 190,133.33333333333337"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,91.666664)">
+                  <g>
                     <path
                       id="g-svg-14"
                       fill="none"
@@ -165,156 +144,135 @@
                       stroke="rgba(255,0,0,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 40,0"
+                      d="M 150,91.66666666666669 L 190,91.66666666666669"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-2"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                >
-                  <g transform="matrix(1,0,0,1,150,508.333344)">
+                <g id="g-svg-2" fill="none" class="grid-region-group">
+                  <g>
                     <path
                       id="g-svg-15"
                       fill="rgba(144,238,144,1)"
-                      d="M 0,41.666666666666686 L 40,41.666666666666686 L 40,0 L 0,0 L 0,41.666666666666686"
+                      d="M 150,550 L 190,550 L 190,508.3333333333333 L 150,508.3333333333333 L 150,550"
                       class="grid-region"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,466.666656)">
+                  <g>
                     <path
                       id="g-svg-16"
                       fill="rgba(0,0,0,0)"
-                      d="M 0,41.66666666666663 L 40,41.66666666666663 L 40,0 L 0,0 L 0,41.66666666666663"
+                      d="M 150,508.3333333333333 L 190,508.3333333333333 L 190,466.6666666666667 L 150,466.6666666666667 L 150,508.3333333333333"
                       class="grid-region"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,425)">
+                  <g>
                     <path
                       id="g-svg-17"
                       fill="rgba(144,238,144,1)"
-                      d="M 0,41.666666666666686 L 40,41.666666666666686 L 40,0 L 0,0 L 0,41.666666666666686"
+                      d="M 150,466.6666666666667 L 190,466.6666666666667 L 190,425 L 150,425 L 150,466.6666666666667"
                       class="grid-region"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,383.333344)">
+                  <g>
                     <path
                       id="g-svg-18"
                       fill="rgba(0,0,0,0)"
-                      d="M 0,41.66666666666663 L 40,41.66666666666663 L 40,0 L 0,0 L 0,41.66666666666663"
+                      d="M 150,425 L 190,425 L 190,383.33333333333337 L 150,383.33333333333337 L 150,425"
                       class="grid-region"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,341.666656)">
+                  <g>
                     <path
                       id="g-svg-19"
                       fill="rgba(144,238,144,1)"
-                      d="M 0,41.666666666666686 L 40,41.666666666666686 L 40,0 L 0,0 L 0,41.666666666666686"
+                      d="M 150,383.33333333333337 L 190,383.33333333333337 L 190,341.6666666666667 L 150,341.6666666666667 L 150,383.33333333333337"
                       class="grid-region"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,300)">
+                  <g>
                     <path
                       id="g-svg-20"
                       fill="rgba(0,0,0,0)"
-                      d="M 0,41.666666666666686 L 40,41.666666666666686 L 40,0 L 0,0 L 0,41.666666666666686"
+                      d="M 150,341.6666666666667 L 190,341.6666666666667 L 190,300 L 150,300 L 150,341.6666666666667"
                       class="grid-region"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,258.333344)">
+                  <g>
                     <path
                       id="g-svg-21"
                       fill="rgba(144,238,144,1)"
-                      d="M 0,41.66666666666663 L 40,41.66666666666663 L 40,0 L 0,0 L 0,41.66666666666663"
+                      d="M 150,300 L 190,300 L 190,258.33333333333337 L 150,258.33333333333337 L 150,300"
                       class="grid-region"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,216.666672)">
+                  <g>
                     <path
                       id="g-svg-22"
                       fill="rgba(0,0,0,0)"
-                      d="M 0,41.666666666666686 L 40,41.666666666666686 L 40,0 L 0,0 L 0,41.666666666666686"
+                      d="M 150,258.33333333333337 L 190,258.33333333333337 L 190,216.66666666666669 L 150,216.66666666666669 L 150,258.33333333333337"
                       class="grid-region"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,175)">
+                  <g>
                     <path
                       id="g-svg-23"
                       fill="rgba(144,238,144,1)"
-                      d="M 0,41.666666666666686 L 40,41.666666666666686 L 40,0 L 0,0 L 0,41.666666666666686"
+                      d="M 150,216.66666666666669 L 190,216.66666666666669 L 190,175 L 150,175 L 150,216.66666666666669"
                       class="grid-region"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,133.333328)">
+                  <g>
                     <path
                       id="g-svg-24"
                       fill="rgba(0,0,0,0)"
-                      d="M 0,41.66666666666663 L 40,41.66666666666663 L 40,0 L 0,0 L 0,41.66666666666663"
+                      d="M 150,175 L 190,175 L 190,133.33333333333337 L 150,133.33333333333337 L 150,175"
                       class="grid-region"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,91.666664)">
+                  <g>
                     <path
                       id="g-svg-25"
                       fill="rgba(144,238,144,1)"
-                      d="M 0,41.666666666666686 L 40,41.666666666666686 L 40,0 L 0,0 L 0,41.666666666666686"
+                      d="M 150,133.33333333333337 L 190,133.33333333333337 L 190,91.66666666666669 L 150,91.66666666666669 L 150,133.33333333333337"
                       class="grid-region"
                     />
                   </g>
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-57"
-              fill="none"
-              class="axis-main-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-58"
-                fill="none"
-                class="axis-line-group"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g transform="matrix(1,0,0,1,150,40)">
+            <g id="g-svg-56" fill="none" class="axis-main-group">
+              <g id="g-svg-57" fill="none" class="axis-line-group">
+                <g>
                   <line
-                    id="g-svg-59"
+                    id="g-svg-58"
                     fill="none"
-                    x1="0"
-                    y1="520"
-                    x2="-9.18485099360515e-16"
-                    y2="-15"
+                    x1="150"
+                    y1="560"
+                    x2="150"
+                    y2="25"
                     class="axis-line axis-line"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
-                  <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                  <g transform="matrix(0,0.500000,-0.500000,0,150,25)">
                     <path
                       id="g-svg-27"
                       fill="rgba(0,0,0,1)"
-                      d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                      transform="translate(-10,-10)"
+                      d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                       stroke-width="1"
                       stroke="rgba(0,0,0,1)"
                     />
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-62"
-                fill="none"
-                class="axis-tick-group"
-                transform="matrix(1,0,0,1,0,0)"
-              >
+              <g id="g-svg-61" fill="none" class="axis-tick-group">
                 <g
-                  id="g-svg-63"
+                  id="g-svg-62"
                   fill="none"
                   class="axis-tick"
                   transform="matrix(1,0,0,1,150,550)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-28"
                       fill="none"
@@ -329,12 +287,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-64"
+                  id="g-svg-63"
                   fill="none"
                   class="axis-tick"
                   transform="matrix(1,0,0,1,150,508.333344)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-29"
                       fill="none"
@@ -349,12 +307,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-65"
+                  id="g-svg-64"
                   fill="none"
                   class="axis-tick"
                   transform="matrix(1,0,0,1,150,466.666656)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-30"
                       fill="none"
@@ -369,12 +327,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-66"
+                  id="g-svg-65"
                   fill="none"
                   class="axis-tick"
                   transform="matrix(1,0,0,1,150,425)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-31"
                       fill="none"
@@ -389,12 +347,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-67"
+                  id="g-svg-66"
                   fill="none"
                   class="axis-tick"
                   transform="matrix(1,0,0,1,150,383.333344)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-32"
                       fill="none"
@@ -409,12 +367,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-68"
+                  id="g-svg-67"
                   fill="none"
                   class="axis-tick"
                   transform="matrix(1,0,0,1,150,341.666656)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-33"
                       fill="none"
@@ -429,12 +387,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-69"
+                  id="g-svg-68"
                   fill="none"
                   class="axis-tick"
                   transform="matrix(1,0,0,1,150,300)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-34"
                       fill="none"
@@ -449,12 +407,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-70"
+                  id="g-svg-69"
                   fill="none"
                   class="axis-tick"
                   transform="matrix(1,0,0,1,150,258.333344)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-35"
                       fill="none"
@@ -469,12 +427,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-71"
+                  id="g-svg-70"
                   fill="none"
                   class="axis-tick"
                   transform="matrix(1,0,0,1,150,216.666672)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-36"
                       fill="none"
@@ -489,12 +447,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-72"
+                  id="g-svg-71"
                   fill="none"
                   class="axis-tick"
                   transform="matrix(1,0,0,1,150,175)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-37"
                       fill="none"
@@ -509,12 +467,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-73"
+                  id="g-svg-72"
                   fill="none"
                   class="axis-tick"
                   transform="matrix(1,0,0,1,150,133.333328)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-38"
                       fill="none"
@@ -529,12 +487,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-74"
+                  id="g-svg-73"
                   fill="none"
                   class="axis-tick"
                   transform="matrix(1,0,0,1,150,91.666664)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-39"
                       fill="none"
@@ -549,19 +507,14 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-87"
-                fill="none"
-                class="axis-label-group"
-                transform="matrix(1,0,0,1,0,0)"
-              >
+              <g id="g-svg-86" fill="none" class="axis-label-group">
                 <g
-                  id="g-svg-88"
+                  id="g-svg-87"
                   fill="none"
                   class="axis-label"
                   transform="matrix(1,0,0,1,140,550)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-40"
                       fill="rgba(0,0,0,1)"
@@ -582,12 +535,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-89"
+                  id="g-svg-88"
                   fill="none"
                   class="axis-label"
                   transform="matrix(1,0,0,1,140,508.333344)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-41"
                       fill="rgba(0,0,0,1)"
@@ -608,12 +561,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-90"
+                  id="g-svg-89"
                   fill="none"
                   class="axis-label"
                   transform="matrix(1,0,0,1,140,466.666656)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-42"
                       fill="rgba(0,0,0,1)"
@@ -634,12 +587,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-91"
+                  id="g-svg-90"
                   fill="none"
                   class="axis-label"
                   transform="matrix(1,0,0,1,140,425)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-43"
                       fill="rgba(0,0,0,1)"
@@ -660,12 +613,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-92"
+                  id="g-svg-91"
                   fill="none"
                   class="axis-label"
                   transform="matrix(1,0,0,1,140,383.333344)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-44"
                       fill="rgba(0,0,0,1)"
@@ -686,12 +639,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-93"
+                  id="g-svg-92"
                   fill="none"
                   class="axis-label"
                   transform="matrix(1,0,0,1,140,341.666656)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-45"
                       fill="rgba(0,0,0,1)"
@@ -712,12 +665,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-94"
+                  id="g-svg-93"
                   fill="none"
                   class="axis-label"
                   transform="matrix(1,0,0,1,140,300)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-46"
                       fill="rgba(0,0,0,1)"
@@ -738,12 +691,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-95"
+                  id="g-svg-94"
                   fill="none"
                   class="axis-label"
                   transform="matrix(1,0,0,1,140,258.333344)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-47"
                       fill="rgba(0,0,0,1)"
@@ -764,12 +717,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-96"
+                  id="g-svg-95"
                   fill="none"
                   class="axis-label"
                   transform="matrix(1,0,0,1,140,216.666672)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-48"
                       fill="rgba(0,0,0,1)"
@@ -790,12 +743,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-97"
+                  id="g-svg-96"
                   fill="none"
                   class="axis-label"
                   transform="matrix(1,0,0,1,140,175)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-49"
                       fill="rgba(0,0,0,1)"
@@ -816,12 +769,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-98"
+                  id="g-svg-97"
                   fill="none"
                   class="axis-label"
                   transform="matrix(1,0,0,1,140,133.333328)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-50"
                       fill="rgba(0,0,0,1)"
@@ -842,12 +795,12 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-99"
+                  id="g-svg-98"
                   fill="none"
                   class="axis-label"
                   transform="matrix(1,0,0,1,140,91.666664)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-51"
                       fill="rgba(0,0,0,1)"
@@ -869,16 +822,11 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-112"
-              fill="none"
-              class="axis-title-group"
-              transform="matrix(1,0,0,1,0,0)"
-            />
+            <g id="g-svg-111" fill="none" class="axis-title-group" />
           </g>
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-52" fill="none">
+          <g>
             <path
               id="g-svg-54"
               fill="rgba(0,0,0,0)"
@@ -888,19 +836,18 @@
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="0"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-52"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-52" fill="none" class="marker" x="10" y="15" />
+          <g>
             <text
               id="g-svg-53"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="10"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -911,30 +858,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,80,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none" x="80" y="0">
+          <g>
             <path
               id="g-svg-57"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 85,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="80"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-55"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-55" fill="none" class="marker" x="90" y="15" />
+          <g>
             <text
               id="g-svg-56"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="90"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate13.svg b/__tests__/integration/snapshots/AxisAnimationUpdate13.svg
deleted file mode 100644
index 2d62a3586..000000000
--- a/__tests__/integration/snapshots/AxisAnimationUpdate13.svg
+++ /dev/null
@@ -1,937 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="200"
-  height="500"
-  style="background: transparent;"
-  color-interpolation-filters="sRGB"
->
-  <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-58"
-        fill="none"
-        width="200"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-59" fill="none" transform="matrix(1,0,0,1,100,100)" />
-        <g id="g-svg-60" fill="none" transform="matrix(1,0,0,1,50,50)">
-          <g id="g-svg-61" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-63"
-              fill="none"
-              class="axis-grid-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-64"
-                fill="none"
-                class="axis-grid"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-1"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                >
-                  <g transform="matrix(1,0,0,1,45,435)">
-                    <path
-                      id="g-svg-3"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,45,402.083344)">
-                    <path
-                      id="g-svg-4"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,45,369.166656)">
-                    <path
-                      id="g-svg-5"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,45,336.250000)">
-                    <path
-                      id="g-svg-6"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,45,303.333344)">
-                    <path
-                      id="g-svg-7"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,45,270.416656)">
-                    <path
-                      id="g-svg-8"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,45,237.500000)">
-                    <path
-                      id="g-svg-9"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,45,204.583328)">
-                    <path
-                      id="g-svg-10"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,45,171.666672)">
-                    <path
-                      id="g-svg-11"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,45,138.750000)">
-                    <path
-                      id="g-svg-12"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,45,105.833336)">
-                    <path
-                      id="g-svg-13"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,45,72.916664)">
-                    <path
-                      id="g-svg-14"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                  <g transform="matrix(1,0,0,1,45,40)">
-                    <path
-                      id="g-svg-15"
-                      fill="none"
-                      class="grid-line"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-width="0.5"
-                      stroke-dasharray="0,0"
-                      d="M 0,0 C 362.5 0,725 0,725 0"
-                      stroke-opacity="0.05"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-2"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
-              </g>
-            </g>
-            <g
-              id="g-svg-65"
-              fill="none"
-              class="axis-main-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-66"
-                fill="none"
-                class="axis-line-group"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g transform="matrix(1,0,0,1,45,40)">
-                  <line
-                    id="g-svg-67"
-                    fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="395"
-                    class="axis-line axis-line"
-                    stroke-width="0.5"
-                    stroke="rgba(0,0,0,1)"
-                    stroke-opacity="0.45"
-                    opacity="0"
-                  />
-                </g>
-              </g>
-              <g
-                id="g-svg-68"
-                fill="none"
-                class="axis-tick-group"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-69"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,435)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-16"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-70"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,402.083344)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-17"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-71"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,369.166656)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-18"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-72"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,336.250000)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-19"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-73"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,303.333344)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-20"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-74"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,270.416656)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-21"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-75"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,237.500000)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-22"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-76"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,204.583328)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-23"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-77"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,171.666672)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-24"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-78"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,138.750000)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-25"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-79"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,105.833336)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-26"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-80"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,72.916664)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-27"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-                <g
-                  id="g-svg-81"
-                  fill="none"
-                  class="axis-tick"
-                  transform="matrix(1,0,0,1,45,40)"
-                >
-                  <g transform="matrix(1,0,0,1,-4,0)">
-                    <line
-                      id="g-svg-28"
-                      fill="none"
-                      x1="4"
-                      y1="0"
-                      x2="0"
-                      y2="0"
-                      class="axis-tick-item"
-                      stroke-width="1"
-                      stroke="rgba(0,0,0,1)"
-                      stroke-opacity="0.25"
-                    />
-                  </g>
-                </g>
-              </g>
-              <g
-                id="g-svg-95"
-                fill="none"
-                class="axis-label-group"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-96"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,435)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-29"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      2
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-97"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,402.083344)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-30"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      2.2
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-98"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,369.166656)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-31"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      2.4
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-99"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,336.250000)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-32"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      2.6
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-100"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,303.333344)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-33"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      2.8
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-101"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,270.416656)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-34"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      3
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-102"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,237.500000)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-35"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      3.2
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-103"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,204.583328)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-36"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      3.4
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-104"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,171.666672)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-37"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      3.6
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-105"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,138.750000)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-38"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      3.8
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-106"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,105.833336)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-39"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      4
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-107"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,72.916664)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-40"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      4.2
-                    </text>
-                  </g>
-                </g>
-                <g
-                  id="g-svg-108"
-                  fill="none"
-                  class="axis-label"
-                  transform="matrix(1,0,0,1,37,40)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
-                    <text
-                      id="g-svg-41"
-                      fill="rgba(0,0,0,1)"
-                      dominant-baseline="central"
-                      paint-order="stroke"
-                      dx="0.5"
-                      font-family="sans-serif"
-                      font-size="12"
-                      font-style="normal"
-                      font-variant="normal"
-                      font-weight="lighter"
-                      stroke-width="1"
-                      text-anchor="end"
-                      class="axis-label-item"
-                      fill-opacity="0.65"
-                    >
-                      4.4
-                    </text>
-                  </g>
-                </g>
-              </g>
-            </g>
-            <g
-              id="g-svg-122"
-              fill="none"
-              class="axis-title-group"
-              transform="matrix(1,0,0,1,-15.559999,237.500000)"
-            >
-              <g transform="matrix(0,-1,1,0,11.500000,0)">
-                <text
-                  id="g-svg-123"
-                  fill="rgba(0,0,0,1)"
-                  dominant-baseline="central"
-                  paint-order="stroke"
-                  dx="0.5"
-                  font-family="sans-serif"
-                  font-size="12"
-                  font-style="normal"
-                  font-variant="normal"
-                  font-weight="normal"
-                  stroke-width="1"
-                  text-anchor="middle"
-                  class="axis-title"
-                  fill-opacity="0.65"
-                >
-                  y
-                </text>
-              </g>
-            </g>
-          </g>
-        </g>
-        <g id="g-svg-62" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
-            <path
-              id="g-svg-44"
-              fill="rgba(0,0,0,0)"
-              class=".background"
-              d="M 5,0 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
-              width="61.44"
-              height="30"
-              stroke="rgba(187,187,187,1)"
-              stroke-width="1"
-            />
-          </g>
-          <g
-            id="g-svg-42"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
-            <text
-              id="g-svg-43"
-              fill="rgba(0,0,0,1)"
-              class="text"
-              dominant-baseline="central"
-              paint-order="stroke"
-              dx="0.5"
-              font-size="12"
-              text-anchor="left"
-            >
-              update
-            </text>
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate2.svg b/__tests__/integration/snapshots/AxisAnimationUpdate2.svg
index 1788f7e90..20ddb6879 100644
--- a/__tests__/integration/snapshots/AxisAnimationUpdate2.svg
+++ b/__tests__/integration/snapshots/AxisAnimationUpdate2.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-90"
-        fill="none"
-        width="650"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-91" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-94"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-95"
-              fill="none"
-              class="axis-grid"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-1"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-90" fill="none" width="650" height="150">
+        <g id="g-svg-91" fill="none">
+          <g id="g-svg-94" fill="none" class="axis-grid-group">
+            <g id="g-svg-95" fill="none" class="axis-grid">
+              <g id="g-svg-1" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-3"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 200,50 L 200,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,215,50)">
+                <g>
                   <path
                     id="g-svg-4"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 215,50 L 215,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,50)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 230,50 L 230,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,245,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 245,50 L 245,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 260,50 L 260,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 275,50 L 275,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,290,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 290,50 L 290,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,305,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 305,50 L 305,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 320,50 L 320,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 380,50 L 380,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,395,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 395,50 L 395,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 410,50 L 410,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 425,50 L 425,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,440,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 440,50 L 440,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,455,50)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 455,50 L 455,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,470,50)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 470,50 L 470,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,485,50)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -218,209 +197,188 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 485,50 L 485,90"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              >
-                <g transform="matrix(1,0,0,1,200,50)">
+              <g id="g-svg-2" fill="none" class="grid-region-group">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 200,50 L 200,90 L 215,90 L 215,50 L 200,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,215,50)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 215,50 L 215,90 L 230,90 L 230,50 L 215,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,50)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 230,50 L 230,90 L 245,90 L 245,50 L 230,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,245,50)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 245,50 L 245,90 L 260,90 L 260,50 L 245,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,50)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 260,50 L 260,90 L 275,90 L 275,50 L 260,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-25"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 275,50 L 275,90 L 290,90 L 290,50 L 275,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,290,50)">
+                <g>
                   <path
                     id="g-svg-26"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 290,50 L 290,90 L 305,90 L 305,50 L 290,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,305,50)">
+                <g>
                   <path
                     id="g-svg-27"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 305,50 L 305,90 L 320,90 L 320,50 L 305,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-28"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 60,40 L 60,0 L 0,0"
+                    d="M 320,50 L 320,90 L 380,90 L 380,50 L 320,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,50)">
+                <g>
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 380,50 L 380,90 L 395,90 L 395,50 L 380,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,395,50)">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 395,50 L 395,90 L 410,90 L 410,50 L 395,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,50)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 410,50 L 410,90 L 425,90 L 425,50 L 410,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 425,50 L 425,90 L 440,90 L 440,50 L 425,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,440,50)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 440,50 L 440,90 L 455,90 L 455,50 L 440,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,455,50)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 455,50 L 455,90 L 470,90 L 470,50 L 455,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,470,50)">
+                <g>
                   <path
                     id="g-svg-35"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 15,40 L 15,0 L 0,0"
+                    d="M 470,50 L 470,90 L 485,90 L 485,50 L 470,50"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-96"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-97"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,190,50)">
+          <g id="g-svg-96" fill="none" class="axis-main-group">
+            <g id="g-svg-97" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-98"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="130"
-                  y2="0"
+                  x1="190"
+                  y1="50"
+                  x2="320"
+                  y2="50"
                   class="axis-line axis-line-first"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,380,50)">
+              <g>
                 <line
                   id="g-svg-99"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="145"
-                  y2="-1.83697019872103e-15"
+                  x1="380"
+                  y1="50"
+                  x2="525"
+                  y2="50"
                   class="axis-line axis-line-second"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,145,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,525,50)">
                   <path
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-102"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-102" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-103"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,200,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -440,7 +398,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,215,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -460,7 +418,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,230,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -480,7 +438,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,245,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
@@ -500,7 +458,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,260,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
@@ -520,7 +478,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,275,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
@@ -540,7 +498,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,290,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -560,7 +518,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,305,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -580,7 +538,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,320,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
@@ -600,7 +558,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,380,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-47"
                     fill="none"
@@ -620,7 +578,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,395,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-48"
                     fill="none"
@@ -640,7 +598,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,410,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-49"
                     fill="none"
@@ -660,7 +618,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,425,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-50"
                     fill="none"
@@ -680,7 +638,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,440,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -700,7 +658,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,455,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -720,7 +678,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,470,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -740,7 +698,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,485,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -755,19 +713,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-137"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-137" fill="none" class="axis-label-group">
               <g
                 id="g-svg-138"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,200,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-55"
                     fill="rgba(0,0,0,1)"
@@ -794,7 +747,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,215,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-56"
                     fill="rgba(0,0,0,1)"
@@ -821,7 +774,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,230,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -848,7 +801,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,245,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -875,7 +828,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,260,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -902,7 +855,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,275,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -929,7 +882,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,290,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -956,7 +909,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,305,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -983,7 +936,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,320,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -1010,7 +963,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,380,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -1037,7 +990,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,395,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -1064,7 +1017,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,410,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -1091,7 +1044,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,425,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -1118,7 +1071,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,440,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -1145,7 +1098,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,455,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -1172,7 +1125,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,470,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -1199,7 +1152,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,485,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -1222,37 +1175,31 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-172"
-            fill="none"
-            class="axis-title-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
+          <g id="g-svg-172" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-92" fill="none" transform="matrix(1,0,0,1,50,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-92" fill="none" x="50" y="100">
+          <g>
             <path
               id="g-svg-74"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 55,100 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="61.44"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="50"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-72"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-72" fill="none" class="marker" x="60" y="115" />
+          <g>
             <text
               id="g-svg-73"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="60"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -1263,30 +1210,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-93" fill="none" transform="matrix(1,0,0,1,150,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-93" fill="none" x="150" y="100">
+          <g>
             <path
               id="g-svg-77"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 155,100 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="150"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-75"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-75" fill="none" class="marker" x="160" y="115" />
+          <g>
             <text
               id="g-svg-76"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="160"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate3.svg b/__tests__/integration/snapshots/AxisAnimationUpdate3.svg
index da69dabc1..4ddf856c3 100644
--- a/__tests__/integration/snapshots/AxisAnimationUpdate3.svg
+++ b/__tests__/integration/snapshots/AxisAnimationUpdate3.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-78"
-        fill="none"
-        width="650"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-79" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-82"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-83"
-              fill="none"
-              class="axis-grid"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-1"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-78" fill="none" width="650" height="150">
+        <g id="g-svg-79" fill="none">
+          <g id="g-svg-82" fill="none" class="axis-grid-group">
+            <g id="g-svg-83" fill="none" class="axis-grid">
+              <g id="g-svg-1" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-3"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 50,50 L 50,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,141.666672,50)">
+                <g>
                   <path
                     id="g-svg-4"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 141.66666666666666,50 L 141.66666666666666,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,233.333328,50)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 233.33333333333331,50 L 233.33333333333331,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,325,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 325,50 L 325,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,416.666656,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 416.66666666666663,50 L 416.66666666666663,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,508.333344,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -97,108 +76,87 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 508.3333333333333,50 L 508.3333333333333,90"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+              <g id="g-svg-2" fill="none" class="grid-region-group">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 91.66666666666666,40 L 91.66666666666666,0 L 0,0"
+                    d="M 50,50 L 50,90 L 141.66666666666666,90 L 141.66666666666666,50 L 50,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,141.666672,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 91.66666666666666,40 L 91.66666666666666,0 L 0,0"
+                    d="M 141.66666666666666,50 L 141.66666666666666,90 L 233.33333333333331,90 L 233.33333333333331,50 L 141.66666666666666,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,233.333328,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 91.66666666666669,40 L 91.66666666666669,0 L 0,0"
+                    d="M 233.33333333333331,50 L 233.33333333333331,90 L 325,90 L 325,50 L 233.33333333333331,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,325,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 91.66666666666663,40 L 91.66666666666663,0 L 0,0"
+                    d="M 325,50 L 325,90 L 416.66666666666663,90 L 416.66666666666663,50 L 325,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,416.666656,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 91.66666666666669,40 L 91.66666666666669,0 L 0,0"
+                    d="M 416.66666666666663,50 L 416.66666666666663,90 L 508.3333333333333,90 L 508.3333333333333,50 L 416.66666666666663,50"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-84"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-85"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,40,50)">
+          <g id="g-svg-84" fill="none" class="axis-main-group">
+            <g id="g-svg-85" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-86"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="585"
-                  y2="-1.83697019872103e-15"
+                  x1="40"
+                  y1="50"
+                  x2="625"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,585,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,625,50)">
                   <path
                     id="g-svg-15"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-89"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-89" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-90"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,50,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-16"
                     fill="none"
@@ -218,7 +176,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,141.666672,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-17"
                     fill="none"
@@ -238,7 +196,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,233.333328,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-18"
                     fill="none"
@@ -258,7 +216,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,325,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-19"
                     fill="none"
@@ -278,7 +236,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,416.666656,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-20"
                     fill="none"
@@ -298,7 +256,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,508.333344,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-21"
                     fill="none"
@@ -313,19 +271,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-102"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-102" fill="none" class="axis-label-group">
               <g
                 id="g-svg-103"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,50,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -352,7 +305,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,141.666672,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -379,7 +332,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,233.333328,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -406,7 +359,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,325,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-25"
                     fill="rgba(0,0,0,1)"
@@ -433,7 +386,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,416.666656,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-26"
                     fill="rgba(0,0,0,1)"
@@ -460,7 +413,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,508.333344,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-27"
                     fill="rgba(0,0,0,1)"
@@ -483,37 +436,31 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-115"
-            fill="none"
-            class="axis-title-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
+          <g id="g-svg-115" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-80" fill="none" transform="matrix(1,0,0,1,50,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-80" fill="none" x="50" y="100">
+          <g>
             <path
               id="g-svg-30"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 55,100 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="61.44"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="50"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-28"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-28" fill="none" class="marker" x="60" y="115" />
+          <g>
             <text
               id="g-svg-29"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="60"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -524,30 +471,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-81" fill="none" transform="matrix(1,0,0,1,150,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-81" fill="none" x="150" y="100">
+          <g>
             <path
               id="g-svg-33"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 155,100 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="150"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-31"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-31" fill="none" class="marker" x="160" y="115" />
+          <g>
             <text
               id="g-svg-32"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="160"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate4.svg b/__tests__/integration/snapshots/AxisAnimationUpdate4.svg
index 2542e9698..aaee256ae 100644
--- a/__tests__/integration/snapshots/AxisAnimationUpdate4.svg
+++ b/__tests__/integration/snapshots/AxisAnimationUpdate4.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-34"
-        fill="none"
-        width="650"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-35" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-38"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-39"
-              fill="none"
-              class="axis-grid"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-1"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-34" fill="none" width="650" height="150">
+        <g id="g-svg-35" fill="none">
+          <g id="g-svg-38" fill="none" class="axis-grid-group">
+            <g id="g-svg-39" fill="none" class="axis-grid">
+              <g id="g-svg-1" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-3"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 200,50 L 200,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,50)">
+                <g>
                   <path
                     id="g-svg-4"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 250,50 L 250,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,50)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 300,50 L 300,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 350,50 L 350,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 400,50 L 400,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -97,108 +76,87 @@
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,40"
+                    d="M 450,50 L 450,90"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              >
-                <g transform="matrix(1,0,0,1,200,50)">
+              <g id="g-svg-2" fill="none" class="grid-region-group">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 50,40 L 50,0 L 0,0"
+                    d="M 200,50 L 200,90 L 250,90 L 250,50 L 200,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 50,40 L 50,0 L 0,0"
+                    d="M 250,50 L 250,90 L 300,90 L 300,50 L 250,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 50,40 L 50,0 L 0,0"
+                    d="M 300,50 L 300,90 L 350,90 L 350,50 L 300,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,40 L 50,40 L 50,0 L 0,0"
+                    d="M 350,50 L 350,90 L 400,90 L 400,50 L 350,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,0 L 0,40 L 50,40 L 50,0 L 0,0"
+                    d="M 400,50 L 400,90 L 450,90 L 450,50 L 400,50"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-40"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-41"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,190,50)">
+          <g id="g-svg-40" fill="none" class="axis-main-group">
+            <g id="g-svg-41" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-42"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="335"
-                  y2="-1.83697019872103e-15"
+                  x1="190"
+                  y1="50"
+                  x2="525"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,335,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,525,50)">
                   <path
                     id="g-svg-15"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-45"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-45" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-46"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,200,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-16"
                     fill="none"
@@ -218,7 +176,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,250,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-17"
                     fill="none"
@@ -238,7 +196,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,300,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-18"
                     fill="none"
@@ -258,7 +216,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,350,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-19"
                     fill="none"
@@ -278,7 +236,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,400,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-20"
                     fill="none"
@@ -298,7 +256,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,450,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-21"
                     fill="none"
@@ -313,19 +271,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-58"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-58" fill="none" class="axis-label-group">
               <g
                 id="g-svg-59"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,200,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -352,7 +305,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,250,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -379,7 +332,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,300,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -406,7 +359,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,350,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-25"
                     fill="rgba(0,0,0,1)"
@@ -433,7 +386,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,400,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-26"
                     fill="rgba(0,0,0,1)"
@@ -460,7 +413,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,450,60)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-27"
                     fill="rgba(0,0,0,1)"
@@ -483,37 +436,31 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-71"
-            fill="none"
-            class="axis-title-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
+          <g id="g-svg-71" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-36" fill="none" transform="matrix(1,0,0,1,50,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-36" fill="none" x="50" y="100">
+          <g>
             <path
               id="g-svg-30"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 55,100 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="61.44"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="50"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-28"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-28" fill="none" class="marker" x="60" y="115" />
+          <g>
             <text
               id="g-svg-29"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="60"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -524,30 +471,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-37" fill="none" transform="matrix(1,0,0,1,150,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-37" fill="none" x="150" y="100">
+          <g>
             <path
               id="g-svg-33"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 155,100 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="150"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-31"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-31" fill="none" class="marker" x="160" y="115" />
+          <g>
             <text
               id="g-svg-32"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="160"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate5.svg b/__tests__/integration/snapshots/AxisAnimationUpdate5.svg
index 2251d30d0..5028f397e 100644
--- a/__tests__/integration/snapshots/AxisAnimationUpdate5.svg
+++ b/__tests__/integration/snapshots/AxisAnimationUpdate5.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-34"
-        fill="none"
-        width="250"
-        height="250"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-35" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-38"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-39"
-              fill="none"
-              class="axis-grid"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-1"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,230,150)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-34" fill="none" width="250" height="250">
+        <g id="g-svg-35" fill="none">
+          <g id="g-svg-38" fill="none" class="axis-grid-group">
+            <g id="g-svg-39" fill="none" class="axis-grid">
+              <g id="g-svg-1" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-3"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,227.274063,170.705521)">
+                <g>
                   <path
                     id="g-svg-4"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 227.27406610312545,170.70552360820164 L 227.27406610312545,170.70552360820164"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170.705521,227.274063)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170.70552360820164,227.27406610312545 L 170.70552360820164,227.27406610312545"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,129.294479,227.274063)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 129.29447639179836,227.27406610312548 L 129.29447639179836,227.27406610312548"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000001,219.2820323027551 L 110.00000000000001,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,72.725937,170.705521)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -163,70 +142,49 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 72.72593389687455,170.70552360820167 L 72.72593389687455,170.70552360820167"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-2" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-40"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-41"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,70,150)">
+          <g id="g-svg-40" fill="none" class="axis-main-group">
+            <g id="g-svg-41" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-42"
                   fill="none"
-                  d="M 160,0 A 80 80 0 0 1 0 0 L -0.11780851333078682,-14.999537364671845"
+                  d="M 230,150 A 80 80 0 0 1 70 150 L 69.88219148666921,135.00046263532815"
                   class="axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.003927,0.499985,-0.499985,0.003927,-0.117809,-14.999537)">
+                <g transform="matrix(0.003927,0.499985,-0.499985,0.003927,69.882195,135.000458)">
                   <path
                     id="g-svg-17"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-46"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-46" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-47"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,230,150)"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-18"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -240,14 +198,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,227.274063,170.705521)"
               >
-                <g transform="matrix(1,0,0,1,-9.659258,-2.588191)">
+                <g>
                   <line
                     id="g-svg-19"
                     fill="none"
-                    x1="9.659258262890683"
-                    y1="2.5881904510252074"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-9.659258262890683"
+                    y2="-2.5881904510252074"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -260,14 +218,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,219.282028,190)"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-20"
                     fill="none"
-                    x1="8.660254037844387"
-                    y1="4.999999999999999"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844387"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -280,14 +238,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-21"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -300,14 +258,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,190,219.282028)"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-22"
                     fill="none"
-                    x1="5.000000000000001"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000001"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -320,14 +278,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,170.705521,227.274063)"
               >
-                <g transform="matrix(1,0,0,1,-2.588191,-9.659258)">
+                <g>
                   <line
                     id="g-svg-23"
                     fill="none"
-                    x1="2.5881904510252074"
-                    y1="9.659258262890683"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-2.5881904510252074"
+                    y2="-9.659258262890683"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -340,14 +298,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,230)"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -360,14 +318,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,129.294479,227.274063)"
               >
-                <g transform="matrix(1,0,0,1,0,-9.659258)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
                     x1="0"
-                    y1="9.659258262890685"
+                    y1="0"
                     x2="2.588190451025204"
-                    y2="0"
+                    y2="-9.659258262890685"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -380,14 +338,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,110,219.282028)"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844387"
+                    y1="0"
                     x2="4.999999999999998"
-                    y2="0"
+                    y2="-8.660254037844387"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -400,14 +358,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -420,14 +378,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,80.717964,190)"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -440,14 +398,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,72.725937,170.705521)"
               >
-                <g transform="matrix(1,0,0,1,0,-2.588191)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
                     x1="0"
-                    y1="2.58819045102521"
+                    y1="0"
                     x2="9.659258262890681"
-                    y2="0"
+                    y2="-2.58819045102521"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -455,19 +413,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-71"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-71" fill="none" class="axis-label-group">
               <g
                 id="g-svg-72"
                 fill="none"
                 class="axis-label"
-                transform="matrix(-0,-1,1,-0,200,150)"
+                transform="matrix(1,0,0,1,200,150)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-30"
                     fill="rgba(0,0,0,1)"
@@ -492,9 +445,9 @@
                 id="g-svg-73"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.258819,-0.965926,0.965926,0.258819,198.296295,162.940948)"
+                transform="matrix(1,0,0,1,198.296295,162.940948)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.258819,-0.965926,0.965926,0.258819,0,0)">
                   <text
                     id="g-svg-31"
                     fill="rgba(0,0,0,1)"
@@ -519,9 +472,9 @@
                 id="g-svg-74"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,193.301270,175)"
+                transform="matrix(1,0,0,1,193.301270,175)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-32"
                     fill="rgba(0,0,0,1)"
@@ -546,9 +499,9 @@
                 id="g-svg-75"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,185.355347,185.355347)"
+                transform="matrix(1,0,0,1,185.355347,185.355347)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-33"
                     fill="rgba(0,0,0,1)"
@@ -573,9 +526,9 @@
                 id="g-svg-76"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,175,193.301270)"
+                transform="matrix(1,0,0,1,175,193.301270)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-34"
                     fill="rgba(0,0,0,1)"
@@ -600,9 +553,9 @@
                 id="g-svg-77"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.965926,-0.258819,0.258819,0.965926,162.940948,198.296295)"
+                transform="matrix(1,0,0,1,162.940948,198.296295)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.965926,-0.258819,0.258819,0.965926,0,0)">
                   <text
                     id="g-svg-35"
                     fill="rgba(0,0,0,1)"
@@ -629,7 +582,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,150,200)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-36"
                     fill="rgba(0,0,0,1)"
@@ -654,9 +607,9 @@
                 id="g-svg-79"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,137.059052,198.296295)"
+                transform="matrix(1,0,0,1,137.059052,198.296295)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.965926,0.258819,-0.258819,0.965926,0,0)">
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -681,9 +634,9 @@
                 id="g-svg-80"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,125,193.301270)"
+                transform="matrix(1,0,0,1,125,193.301270)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -708,9 +661,9 @@
                 id="g-svg-81"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,114.644661,185.355347)"
+                transform="matrix(1,0,0,1,114.644661,185.355347)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -735,9 +688,9 @@
                 id="g-svg-82"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,106.698730,175)"
+                transform="matrix(1,0,0,1,106.698730,175)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-40"
                     fill="rgba(0,0,0,1)"
@@ -762,9 +715,9 @@
                 id="g-svg-83"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.258819,0.965926,-0.965926,0.258819,101.703712,162.940948)"
+                transform="matrix(1,0,0,1,101.703712,162.940948)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.258819,0.965926,-0.965926,0.258819,0,0)">
                   <text
                     id="g-svg-41"
                     fill="rgba(0,0,0,1)"
@@ -787,15 +740,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-96"
-            fill="none"
-            class="axis-title-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
+          <g id="g-svg-96" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-36" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-36" fill="none">
+          <g>
             <path
               id="g-svg-44"
               fill="rgba(0,0,0,0)"
@@ -805,19 +753,18 @@
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="0"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-42"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-42" fill="none" class="marker" x="10" y="15" />
+          <g>
             <text
               id="g-svg-43"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="10"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -828,30 +775,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-37" fill="none" transform="matrix(1,0,0,1,80,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-37" fill="none" x="80">
+          <g>
             <path
               id="g-svg-47"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 85,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="80"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-45"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-45" fill="none" class="marker" x="90" y="15" />
+          <g>
             <text
               id="g-svg-46"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="90"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate6.svg b/__tests__/integration/snapshots/AxisAnimationUpdate6.svg
index e9405115a..e37483930 100644
--- a/__tests__/integration/snapshots/AxisAnimationUpdate6.svg
+++ b/__tests__/integration/snapshots/AxisAnimationUpdate6.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="260"
-        height="260"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-49" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-52"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-53"
-              fill="none"
-              class="axis-grid"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-1"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,250,150)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="260" height="260">
+        <g id="g-svg-49" fill="none">
+          <g id="g-svg-52" fill="none" class="axis-grid-group">
+            <g id="g-svg-53" fill="none" class="axis-grid">
+              <g id="g-svg-1" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-3"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,150 L 250,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,236.602539,200)">
+                <g>
                   <path
                     id="g-svg-4"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 236.60254037844388,200 L 236.60254037844388,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,236.602539)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,236.60254037844385 L 200,236.60254037844385"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,250)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,250 L 150,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,236.602539)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100.00000000000003,236.60254037844388 L 100.00000000000003,236.60254037844388"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,63.397461,200)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 63.39745962155612,200 L 63.39745962155612,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,150)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,150 L 50,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,63.397461,100)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 63.397459621556095,100.00000000000006 L 63.397459621556095,100.00000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,63.397461)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 99.99999999999996,63.39745962155615 L 99.99999999999996,63.39745962155615"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 149.99999999999997,50 L 149.99999999999997,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,63.397461)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,63.39745962155614 L 200,63.39745962155614"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,236.602539,100)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -163,60 +142,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 236.60254037844385,99.99999999999996 L 236.60254037844385,99.99999999999996"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-2" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-54"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-55"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-54" fill="none" class="axis-main-group">
+            <g id="g-svg-55" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-56"
                   fill="none"
-                  d="M 200,100 A 100 100 0 1 0 0 100 A 100 100 0 1 0 200 99.99999999999997"
+                  d="M 250,150 A 100 100 0 1 0 50 150 A 100 100 0 1 0 250 149.99999999999997"
                   class="axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-58"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-58" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-59"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,250,150)"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-16"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -230,14 +189,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,236.602539,200)"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-17"
                     fill="none"
-                    x1="8.660254037844387"
-                    y1="4.999999999999999"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844387"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -250,14 +209,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,200,236.602539)"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-18"
                     fill="none"
-                    x1="5.000000000000001"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000001"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -270,14 +229,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,250)"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-19"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -290,14 +249,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,100,236.602539)"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-20"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844387"
+                    y1="0"
                     x2="4.999999999999998"
-                    y2="0"
+                    y2="-8.660254037844387"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -310,14 +269,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,63.397461,200)"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-21"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -330,14 +289,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,50,150)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-22"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -350,7 +309,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,63.397461,100)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-23"
                     fill="none"
@@ -370,7 +329,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,100,63.397461)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
@@ -390,7 +349,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
@@ -410,13 +369,13 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,200,63.397461)"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="5.000000000000001"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5.000000000000001"
                     y2="8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -430,13 +389,13 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,236.602539,100)"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="8.660254037844384"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844384"
                     y2="5.000000000000004"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -445,19 +404,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-83"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-83" fill="none" class="axis-label-group">
               <g
                 id="g-svg-84"
                 fill="none"
                 class="axis-label"
-                transform="matrix(-0,-1,1,-0,230,150)"
+                transform="matrix(1,0,0,1,230,150)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-28"
                     fill="rgba(0,0,0,1)"
@@ -482,9 +436,9 @@
                 id="g-svg-85"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,219.282028,190)"
+                transform="matrix(1,0,0,1,219.282028,190)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
@@ -509,9 +463,9 @@
                 id="g-svg-86"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,190,219.282028)"
+                transform="matrix(1,0,0,1,190,219.282028)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-30"
                     fill="rgba(0,0,0,1)"
@@ -538,7 +492,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,150,230)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-31"
                     fill="rgba(0,0,0,1)"
@@ -563,9 +517,9 @@
                 id="g-svg-88"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,110,219.282028)"
+                transform="matrix(1,0,0,1,110,219.282028)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-32"
                     fill="rgba(0,0,0,1)"
@@ -590,9 +544,9 @@
                 id="g-svg-89"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,80.717964,190)"
+                transform="matrix(1,0,0,1,80.717964,190)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-33"
                     fill="rgba(0,0,0,1)"
@@ -617,9 +571,9 @@
                 id="g-svg-90"
                 fill="none"
                 class="axis-label"
-                transform="matrix(-0,-1,1,-0,70,150)"
+                transform="matrix(1,0,0,1,70,150)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-34"
                     fill="rgba(0,0,0,1)"
@@ -644,9 +598,9 @@
                 id="g-svg-91"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,80.717964,110)"
+                transform="matrix(1,0,0,1,80.717964,110)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-35"
                     fill="rgba(0,0,0,1)"
@@ -671,9 +625,9 @@
                 id="g-svg-92"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,110,80.717964)"
+                transform="matrix(1,0,0,1,110,80.717964)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-36"
                     fill="rgba(0,0,0,1)"
@@ -700,7 +654,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,150,70)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -725,9 +679,9 @@
                 id="g-svg-94"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,190,80.717964)"
+                transform="matrix(1,0,0,1,190,80.717964)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -752,9 +706,9 @@
                 id="g-svg-95"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,219.282028,110)"
+                transform="matrix(1,0,0,1,219.282028,110)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -777,15 +731,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-108"
-            fill="none"
-            class="axis-title-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
+          <g id="g-svg-108" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-50" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-50" fill="none">
+          <g>
             <path
               id="g-svg-42"
               fill="rgba(0,0,0,0)"
@@ -795,19 +744,18 @@
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="0"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-40"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-40" fill="none" class="marker" x="10" y="15" />
+          <g>
             <text
               id="g-svg-41"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="10"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -818,30 +766,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,80,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-51" fill="none" x="80" y="0">
+          <g>
             <path
               id="g-svg-45"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 85,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="80"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-43"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-43" fill="none" class="marker" x="90" y="15" />
+          <g>
             <text
               id="g-svg-44"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="90"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate7.svg b/__tests__/integration/snapshots/AxisAnimationUpdate7.svg
index c6ab28e4d..ccb75e2e2 100644
--- a/__tests__/integration/snapshots/AxisAnimationUpdate7.svg
+++ b/__tests__/integration/snapshots/AxisAnimationUpdate7.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-46"
-        fill="none"
-        width="260"
-        height="260"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-47" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-50"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-51"
-              fill="none"
-              class="axis-grid"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-1"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,230,150)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-46" fill="none" width="260" height="260">
+        <g id="g-svg-47" fill="none">
+          <g id="g-svg-50" fill="none" class="axis-grid-group">
+            <g id="g-svg-51" fill="none" class="axis-grid">
+              <g id="g-svg-1" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-3"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-4"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000001,219.2820323027551 L 110.00000000000001,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,80.717964)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 109.99999999999997,80.71796769724492 L 109.99999999999997,80.71796769724492"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,80.717964)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -97,60 +76,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,80.71796769724492 L 190,80.71796769724492"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-2" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-52"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-53"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-52" fill="none" class="axis-main-group">
+            <g id="g-svg-53" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-54"
                   fill="none"
-                  d="M 160,80 A 80 80 0 1 0 0 80 A 80 80 0 1 0 160 79.99999999999997"
+                  d="M 230,150 A 80 80 0 1 0 70 150 A 80 80 0 1 0 230 149.99999999999997"
                   class="axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-56"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-56" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-57"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,230,150)"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-10"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -164,14 +123,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,190,219.282028)"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-11"
                     fill="none"
-                    x1="5.000000000000001"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000001"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -184,14 +143,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,110,219.282028)"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-12"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844387"
+                    y1="0"
                     x2="4.999999999999998"
-                    y2="0"
+                    y2="-8.660254037844387"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -204,14 +163,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,70,150)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-13"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -224,7 +183,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,110,80.717964)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-14"
                     fill="none"
@@ -244,13 +203,13 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,190,80.717964)"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-15"
                     fill="none"
-                    x1="5.000000000000001"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5.000000000000001"
                     y2="8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -259,19 +218,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-69"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-69" fill="none" class="axis-label-group">
               <g
                 id="g-svg-70"
                 fill="none"
                 class="axis-label"
-                transform="matrix(-0,-1,1,-0,210,150)"
+                transform="matrix(1,0,0,1,210,150)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-16"
                     fill="rgba(0,0,0,1)"
@@ -296,9 +250,9 @@
                 id="g-svg-71"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,180,201.961517)"
+                transform="matrix(1,0,0,1,180,201.961517)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-17"
                     fill="rgba(0,0,0,1)"
@@ -323,9 +277,9 @@
                 id="g-svg-72"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,120,201.961517)"
+                transform="matrix(1,0,0,1,120,201.961517)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-18"
                     fill="rgba(0,0,0,1)"
@@ -350,9 +304,9 @@
                 id="g-svg-73"
                 fill="none"
                 class="axis-label"
-                transform="matrix(-0,-1,1,-0,90,150)"
+                transform="matrix(1,0,0,1,90,150)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-19"
                     fill="rgba(0,0,0,1)"
@@ -377,9 +331,9 @@
                 id="g-svg-74"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,120,98.038475)"
+                transform="matrix(1,0,0,1,120,98.038475)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -404,9 +358,9 @@
                 id="g-svg-75"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,180,98.038475)"
+                transform="matrix(1,0,0,1,180,98.038475)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -429,15 +383,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-82"
-            fill="none"
-            class="axis-title-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
+          <g id="g-svg-82" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-48" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-48" fill="none">
+          <g>
             <path
               id="g-svg-24"
               fill="rgba(0,0,0,0)"
@@ -447,19 +396,18 @@
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="0"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-22"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-22" fill="none" class="marker" x="10" y="15" />
+          <g>
             <text
               id="g-svg-23"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="10"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -470,30 +418,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-49" fill="none" transform="matrix(1,0,0,1,80,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-49" fill="none" x="80" y="0">
+          <g>
             <path
               id="g-svg-27"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 85,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="80"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-25" fill="none" class="marker" x="90" y="15" />
+          <g>
             <text
               id="g-svg-26"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="90"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate8.svg b/__tests__/integration/snapshots/AxisAnimationUpdate8.svg
index 371becc2d..c43d3951d 100644
--- a/__tests__/integration/snapshots/AxisAnimationUpdate8.svg
+++ b/__tests__/integration/snapshots/AxisAnimationUpdate8.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-28"
-        fill="none"
-        width="260"
-        height="260"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-29" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-32"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-33"
-              fill="none"
-              class="axis-grid"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-1"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,250,150)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-28" fill="none" width="260" height="260">
+        <g id="g-svg-29" fill="none">
+          <g id="g-svg-32" fill="none" class="axis-grid-group">
+            <g id="g-svg-33" fill="none" class="axis-grid">
+              <g id="g-svg-1" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-3"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,150 L 250,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,236.602539,200)">
+                <g>
                   <path
                     id="g-svg-4"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 236.60254037844388,200 L 236.60254037844388,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,236.602539)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,236.60254037844385 L 200,236.60254037844385"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,250)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,250 L 150,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,236.602539)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100.00000000000003,236.60254037844388 L 100.00000000000003,236.60254037844388"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,63.397461,200)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -97,70 +76,49 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 63.39745962155612,200 L 63.39745962155612,200"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-2" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-34"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-35"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,50,150)">
+          <g id="g-svg-34" fill="none" class="axis-main-group">
+            <g id="g-svg-35" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-36"
                   fill="none"
-                  d="M 200,0 A 100 100 0 0 1 0 0 L -0.11780851333068024,-14.999537364671845"
+                  d="M 250,150 A 100 100 0 0 1 50 150 L 49.88219148666932,135.00046263532815"
                   class="axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.003927,0.499985,-0.499985,0.003927,-0.117809,-14.999537)">
+                <g transform="matrix(0.003927,0.499985,-0.499985,0.003927,49.882191,135.000458)">
                   <path
                     id="g-svg-11"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-40"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-40" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-41"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,250,150)"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-12"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -174,14 +132,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,236.602539,200)"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-13"
                     fill="none"
-                    x1="8.660254037844387"
-                    y1="4.999999999999999"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844387"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -194,14 +152,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,200,236.602539)"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-14"
                     fill="none"
-                    x1="5.000000000000001"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000001"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -214,14 +172,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,250)"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-15"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -234,14 +192,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,100,236.602539)"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-16"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844387"
+                    y1="0"
                     x2="4.999999999999998"
-                    y2="0"
+                    y2="-8.660254037844387"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -254,14 +212,14 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,63.397461,200)"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-17"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -269,19 +227,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-53"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-53" fill="none" class="axis-label-group">
               <g
                 id="g-svg-54"
                 fill="none"
                 class="axis-label"
-                transform="matrix(-0,-1,1,-0,230,150)"
+                transform="matrix(1,0,0,1,230,150)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-18"
                     fill="rgba(0,0,0,1)"
@@ -306,9 +259,9 @@
                 id="g-svg-55"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,219.282028,190)"
+                transform="matrix(1,0,0,1,219.282028,190)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-19"
                     fill="rgba(0,0,0,1)"
@@ -333,9 +286,9 @@
                 id="g-svg-56"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,190,219.282028)"
+                transform="matrix(1,0,0,1,190,219.282028)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -362,7 +315,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,150,230)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -387,9 +340,9 @@
                 id="g-svg-58"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,110,219.282028)"
+                transform="matrix(1,0,0,1,110,219.282028)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -414,9 +367,9 @@
                 id="g-svg-59"
                 fill="none"
                 class="axis-label"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,80.717964,190)"
+                transform="matrix(1,0,0,1,80.717964,190)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -439,15 +392,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-66"
-            fill="none"
-            class="axis-title-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
+          <g id="g-svg-66" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-30" fill="none">
+          <g>
             <path
               id="g-svg-26"
               fill="rgba(0,0,0,0)"
@@ -457,19 +405,18 @@
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="0"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-24"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-24" fill="none" class="marker" x="10" y="15" />
+          <g>
             <text
               id="g-svg-25"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="10"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -480,30 +427,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,80,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-31" fill="none" x="80" y="0">
+          <g>
             <path
               id="g-svg-29"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 85,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="80"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-27"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-27" fill="none" class="marker" x="90" y="15" />
+          <g>
             <text
               id="g-svg-28"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="90"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisAnimationUpdate9.svg b/__tests__/integration/snapshots/AxisAnimationUpdate9.svg
index 95e7f93a3..c24c95358 100644
--- a/__tests__/integration/snapshots/AxisAnimationUpdate9.svg
+++ b/__tests__/integration/snapshots/AxisAnimationUpdate9.svg
@@ -6,160 +6,139 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-30"
-        fill="none"
-        width="250"
-        height="550"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-34"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-35"
-              fill="none"
-              class="axis-grid"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-94"
-                fill="none"
-                class="grid-line-group"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g transform="matrix(1,0,0,1,150,500)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-30" fill="none" width="250" height="550">
+        <g id="g-svg-31" fill="none">
+          <g id="g-svg-34" fill="none" class="axis-grid-group">
+            <g id="g-svg-35" fill="none" class="axis-grid">
+              <g id="g-svg-93" fill="none" class="grid-line-group">
+                <g>
+                  <path
+                    id="g-svg-95"
+                    fill="none"
+                    d="M 150,500 L 190,500"
+                    class="grid-line"
+                    stroke="rgba(255,0,0,1)"
+                    stroke-width="1"
+                    stroke-dasharray="4,4"
+                  />
+                </g>
+                <g>
                   <path
                     id="g-svg-96"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,462.5 L 190,462.5"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,462.500000)">
+                <g>
                   <path
                     id="g-svg-97"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,425 L 190,425"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,425)">
+                <g>
                   <path
                     id="g-svg-98"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,387.5 L 190,387.5"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,387.500000)">
+                <g>
                   <path
                     id="g-svg-99"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,350 L 190,350"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,350)">
+                <g>
                   <path
                     id="g-svg-100"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,312.5 L 190,312.5"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,312.500000)">
+                <g>
                   <path
                     id="g-svg-101"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,275 L 190,275"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,275)">
+                <g>
                   <path
                     id="g-svg-102"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,237.50000000000006 L 190,237.50000000000006"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,237.500000)">
+                <g>
                   <path
                     id="g-svg-103"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,200 L 190,200"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,200)">
+                <g>
                   <path
                     id="g-svg-104"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,162.5 L 190,162.5"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,162.500000)">
+                <g>
                   <path
                     id="g-svg-105"
                     fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,125.00000000000006 L 190,125.00000000000006"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,125)">
+                <g>
                   <path
                     id="g-svg-106"
                     fill="none"
-                    d="M 0,0 L 40,0"
-                    class="grid-line"
-                    stroke="rgba(255,0,0,1)"
-                    stroke-width="1"
-                    stroke-dasharray="4,4"
-                  />
-                </g>
-                <g transform="matrix(1,0,0,1,150,87.500000)">
-                  <path
-                    id="g-svg-107"
-                    fill="none"
-                    d="M 0,0 L 40,0"
+                    d="M 150,87.5 L 190,87.5"
                     class="grid-line"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="1"
@@ -167,152 +146,131 @@
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-95"
-                fill="none"
-                class="grid-region-group"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g transform="matrix(1,0,0,1,150,462.500000)">
+              <g id="g-svg-94" fill="none" class="grid-region-group">
+                <g>
                   <path
-                    id="g-svg-108"
+                    id="g-svg-107"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,500 L 190,500 L 190,462.5 L 150,462.5 L 150,500"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,425)">
+                <g>
                   <path
-                    id="g-svg-109"
+                    id="g-svg-108"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,462.5 L 190,462.5 L 190,425 L 150,425 L 150,462.5"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,387.500000)">
+                <g>
                   <path
-                    id="g-svg-110"
+                    id="g-svg-109"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,425 L 190,425 L 190,387.5 L 150,387.5 L 150,425"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,350)">
+                <g>
                   <path
-                    id="g-svg-111"
+                    id="g-svg-110"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,387.5 L 190,387.5 L 190,350 L 150,350 L 150,387.5"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,312.500000)">
+                <g>
                   <path
-                    id="g-svg-112"
+                    id="g-svg-111"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,350 L 190,350 L 190,312.5 L 150,312.5 L 150,350"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,275)">
+                <g>
                   <path
-                    id="g-svg-113"
+                    id="g-svg-112"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,312.5 L 190,312.5 L 190,275 L 150,275 L 150,312.5"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,237.500000)">
+                <g>
                   <path
-                    id="g-svg-114"
+                    id="g-svg-113"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,37.49999999999994 L 40,37.49999999999994 L 40,0 L 0,0 L 0,37.49999999999994"
+                    d="M 150,275 L 190,275 L 190,237.50000000000006 L 150,237.50000000000006 L 150,275"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,200)">
+                <g>
                   <path
-                    id="g-svg-115"
+                    id="g-svg-114"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,37.50000000000006 L 40,37.50000000000006 L 40,0 L 0,0 L 0,37.50000000000006"
+                    d="M 150,237.50000000000006 L 190,237.50000000000006 L 190,200 L 150,200 L 150,237.50000000000006"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,162.500000)">
+                <g>
                   <path
-                    id="g-svg-116"
+                    id="g-svg-115"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,37.5 L 40,37.5 L 40,0 L 0,0 L 0,37.5"
+                    d="M 150,200 L 190,200 L 190,162.5 L 150,162.5 L 150,200"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,125)">
+                <g>
                   <path
-                    id="g-svg-117"
+                    id="g-svg-116"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,37.49999999999994 L 40,37.49999999999994 L 40,0 L 0,0 L 0,37.49999999999994"
+                    d="M 150,162.5 L 190,162.5 L 190,125.00000000000006 L 150,125.00000000000006 L 150,162.5"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,87.500000)">
+                <g>
                   <path
-                    id="g-svg-118"
+                    id="g-svg-117"
                     fill="rgba(144,238,144,1)"
-                    d="M 0,37.50000000000006 L 40,37.50000000000006 L 40,0 L 0,0 L 0,37.50000000000006"
+                    d="M 150,125.00000000000006 L 190,125.00000000000006 L 190,87.5 L 150,87.5 L 150,125.00000000000006"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-36"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-37"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,150,40)">
+          <g id="g-svg-36" fill="none" class="axis-main-group">
+            <g id="g-svg-37" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-38"
                   fill="none"
-                  x1="0"
-                  y1="470"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="150"
+                  y1="510"
+                  x2="150"
+                  y2="25"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,150,25)">
                   <path
                     id="g-svg-2"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-41"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-41" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-121"
+                id="g-svg-120"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,500)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-3"
                     fill="none"
@@ -327,12 +285,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-122"
+                id="g-svg-121"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,462.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-4"
                     fill="none"
@@ -347,12 +305,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-123"
+                id="g-svg-122"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,425)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-5"
                     fill="none"
@@ -367,12 +325,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-124"
+                id="g-svg-123"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,387.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-6"
                     fill="none"
@@ -387,12 +345,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-125"
+                id="g-svg-124"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,350)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-7"
                     fill="none"
@@ -407,12 +365,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-126"
+                id="g-svg-125"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,312.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-8"
                     fill="none"
@@ -427,12 +385,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-127"
+                id="g-svg-126"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,275)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-9"
                     fill="none"
@@ -447,12 +405,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-128"
+                id="g-svg-127"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,237.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-10"
                     fill="none"
@@ -467,12 +425,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-129"
+                id="g-svg-128"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,200)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-11"
                     fill="none"
@@ -487,12 +445,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-130"
+                id="g-svg-129"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,162.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-12"
                     fill="none"
@@ -507,12 +465,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-131"
+                id="g-svg-130"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,125)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-13"
                     fill="none"
@@ -527,12 +485,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-132"
+                id="g-svg-131"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,150,87.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-14"
                     fill="none"
@@ -547,19 +505,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-66"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-66" fill="none" class="axis-label-group">
               <g
                 id="g-svg-67"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,500)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-15"
                     fill="rgba(0,0,0,1)"
@@ -585,7 +538,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,462.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-16"
                     fill="rgba(0,0,0,1)"
@@ -611,7 +564,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,425)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-17"
                     fill="rgba(0,0,0,1)"
@@ -637,7 +590,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,387.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-18"
                     fill="rgba(0,0,0,1)"
@@ -663,7 +616,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,350)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-19"
                     fill="rgba(0,0,0,1)"
@@ -689,7 +642,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,312.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -715,7 +668,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,275)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -741,7 +694,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,237.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -767,7 +720,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,200)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -793,7 +746,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,162.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -819,7 +772,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,125)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-25"
                     fill="rgba(0,0,0,1)"
@@ -845,7 +798,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,140,87.500000)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-26"
                     fill="rgba(0,0,0,1)"
@@ -871,9 +824,9 @@
             id="g-svg-91"
             fill="none"
             class="axis-title-group"
-            transform="matrix(1,0,0,1,54.240002,265.750000)"
+            transform="matrix(1,0,0,1,69.620003,265.750000)"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-92"
                 fill="rgba(255,0,0,1)"
@@ -894,30 +847,29 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-32" fill="none" transform="matrix(1,0,0,1,250,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-32" fill="none" x="250" y="100">
+          <g>
             <path
-              id="g-svg-30"
+              id="g-svg-29"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 255,100 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="61.44"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="250"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-28"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-27" fill="none" class="marker" x="260" y="115" />
+          <g>
             <text
-              id="g-svg-29"
+              id="g-svg-28"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="260"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -928,30 +880,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-33" fill="none" transform="matrix(1,0,0,1,250,150)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-33" fill="none" x="250" y="150">
+          <g>
             <path
-              id="g-svg-33"
+              id="g-svg-32"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 255,150 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="250"
+              y="150"
             />
           </g>
-          <g
-            id="g-svg-31"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-30" fill="none" class="marker" x="260" y="165" />
+          <g>
             <text
-              id="g-svg-32"
+              id="g-svg-31"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="260"
+              y="165"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisArc.svg b/__tests__/integration/snapshots/AxisArc.svg
index d6a19ec68..055691ece 100644
--- a/__tests__/integration/snapshots/AxisArc.svg
+++ b/__tests__/integration/snapshots/AxisArc.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-349"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-350" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-337" fill="none" width="400" height="300">
+        <g id="g-svg-338" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,158.362274,70.438248)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 158.36227706141227,70.43824837053813 L 158.36227706141227,70.43824837053813"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,166.632935,71.748192)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 166.63293526542077,71.74819194129556 L 166.63293526542077,71.74819194129556"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,174.721359,73.915482)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 174.72135954999578,73.91547869638772 L 174.72135954999578,73.91547869638772"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,182.538925,76.916367)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 182.53893144606403,76.91636338859193 L 182.53893144606403,76.91636338859193"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,80.717964)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,80.71796769724492 L 190,80.71796769724492"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,197.022827,85.278641)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 197.02282018339787,85.2786404500042 L 197.02282018339787,85.2786404500042"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,203.530441,90.548416)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 203.53044850870867,90.54841396180846 L 203.53044850870867,90.54841396180846"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,209.451584,96.469551)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 209.45158603819152,96.46955149129134 L 209.45158603819152,96.46955149129134"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,214.721359,102.977180)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 214.72135954999578,102.97717981660215 L 214.72135954999578,102.97717981660215"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,223.083633,117.461067)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 223.08363661140805,117.46106855393599 L 223.08363661140805,117.46106855393599"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,226.084518,125.278641)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 226.0845213036123,125.2786404500042 L 226.0845213036123,125.2786404500042"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,228.251801,133.367065)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 228.25180805870446,133.36706473457926 L 228.25180805870446,133.36706473457926"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,229.561752,141.637726)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 229.56175162946187,141.63772293858773 L 229.56175162946187,141.63772293858773"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,229.561752,158.362274)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 229.56175162946187,158.36227706141227 L 229.56175162946187,158.36227706141227"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,228.251801,166.632935)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 228.25180805870446,166.63293526542074 L 228.25180805870446,166.63293526542074"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,226.084518,174.721359)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 226.0845213036123,174.72135954999578 L 226.0845213036123,174.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,223.083633,182.538925)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,10 +230,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 223.08363661140805,182.538931446064 L 223.08363661140805,182.538931446064"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-25"
                     fill="none"
@@ -262,10 +241,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,214.721359,197.022827)">
+                <g>
                   <path
                     id="g-svg-26"
                     fill="none"
@@ -273,10 +252,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 214.7213595499958,197.02282018339784 L 214.7213595499958,197.02282018339784"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,209.451584,203.530441)">
+                <g>
                   <path
                     id="g-svg-27"
                     fill="none"
@@ -284,10 +263,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 209.45158603819152,203.53044850870867 L 209.45158603819152,203.53044850870867"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,203.530441,209.451584)">
+                <g>
                   <path
                     id="g-svg-28"
                     fill="none"
@@ -295,10 +274,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 203.53044850870867,209.45158603819152 L 203.53044850870867,209.45158603819152"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,197.022827,214.721359)">
+                <g>
                   <path
                     id="g-svg-29"
                     fill="none"
@@ -306,10 +285,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 197.02282018339787,214.72135954999578 L 197.02282018339787,214.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -317,10 +296,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,182.538925,223.083633)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -328,10 +307,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 182.53893144606403,223.08363661140805 L 182.53893144606403,223.08363661140805"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,174.721359,226.084518)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -339,10 +318,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 174.72135954999578,226.0845213036123 L 174.72135954999578,226.0845213036123"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,166.632935,228.251801)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -350,10 +329,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 166.63293526542077,228.25180805870446 L 166.63293526542077,228.25180805870446"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,158.362274,229.561752)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -361,10 +340,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 158.36227706141227,229.56175162946187 L 158.36227706141227,229.56175162946187"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-35"
                     fill="none"
@@ -372,10 +351,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,141.637726,229.561752)">
+                <g>
                   <path
                     id="g-svg-36"
                     fill="none"
@@ -383,10 +362,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 141.63772293858779,229.56175162946187 L 141.63772293858779,229.56175162946187"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,133.367065,228.251801)">
+                <g>
                   <path
                     id="g-svg-37"
                     fill="none"
@@ -394,10 +373,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 133.36706473457926,228.25180805870446 L 133.36706473457926,228.25180805870446"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125.278641,226.084518)">
+                <g>
                   <path
                     id="g-svg-38"
                     fill="none"
@@ -405,10 +384,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125.27864045000418,226.0845213036123 L 125.27864045000418,226.0845213036123"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,117.461067,223.083633)">
+                <g>
                   <path
                     id="g-svg-39"
                     fill="none"
@@ -416,10 +395,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 117.461068553936,223.08363661140808 L 117.461068553936,223.08363661140808"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-40"
                     fill="none"
@@ -427,10 +406,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000001,219.2820323027551 L 110.00000000000001,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,102.977180,214.721359)">
+                <g>
                   <path
                     id="g-svg-41"
                     fill="none"
@@ -438,10 +417,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 102.97717981660216,214.72135954999578 L 102.97717981660216,214.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,96.469551,209.451584)">
+                <g>
                   <path
                     id="g-svg-42"
                     fill="none"
@@ -449,10 +428,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 96.46955149129134,209.45158603819152 L 96.46955149129134,209.45158603819152"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,90.548416,203.530441)">
+                <g>
                   <path
                     id="g-svg-43"
                     fill="none"
@@ -460,10 +439,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 90.54841396180848,203.53044850870867 L 90.54841396180848,203.53044850870867"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,85.278641,197.022827)">
+                <g>
                   <path
                     id="g-svg-44"
                     fill="none"
@@ -471,10 +450,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 85.27864045000422,197.02282018339787 L 85.27864045000422,197.02282018339787"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-45"
                     fill="none"
@@ -482,10 +461,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,76.916367,182.538925)">
+                <g>
                   <path
                     id="g-svg-46"
                     fill="none"
@@ -493,10 +472,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 76.91636338859195,182.53893144606403 L 76.91636338859195,182.53893144606403"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,73.915482,174.721359)">
+                <g>
                   <path
                     id="g-svg-47"
                     fill="none"
@@ -504,10 +483,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 73.91547869638772,174.72135954999584 L 73.91547869638772,174.72135954999584"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,71.748192,166.632935)">
+                <g>
                   <path
                     id="g-svg-48"
                     fill="none"
@@ -515,10 +494,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 71.74819194129554,166.63293526542074 L 71.74819194129554,166.63293526542074"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70.438248,158.362274)">
+                <g>
                   <path
                     id="g-svg-49"
                     fill="none"
@@ -526,10 +505,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70.43824837053813,158.3622770614123 L 70.43824837053813,158.3622770614123"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-50"
                     fill="none"
@@ -537,10 +516,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70.438248,141.637726)">
+                <g>
                   <path
                     id="g-svg-51"
                     fill="none"
@@ -548,10 +527,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70.43824837053813,141.63772293858776 L 70.43824837053813,141.63772293858776"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,71.748192,133.367065)">
+                <g>
                   <path
                     id="g-svg-52"
                     fill="none"
@@ -559,10 +538,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 71.74819194129554,133.3670647345793 L 71.74819194129554,133.3670647345793"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,73.915482,125.278641)">
+                <g>
                   <path
                     id="g-svg-53"
                     fill="none"
@@ -570,10 +549,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 73.91547869638772,125.27864045000419 L 73.91547869638772,125.27864045000419"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,76.916367,117.461067)">
+                <g>
                   <path
                     id="g-svg-54"
                     fill="none"
@@ -581,10 +560,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 76.91636338859192,117.46106855393602 L 76.91636338859192,117.46106855393602"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-55"
                     fill="none"
@@ -592,10 +571,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,85.278641,102.977180)">
+                <g>
                   <path
                     id="g-svg-56"
                     fill="none"
@@ -603,10 +582,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 85.2786404500042,102.97717981660216 L 85.2786404500042,102.97717981660216"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,90.548416,96.469551)">
+                <g>
                   <path
                     id="g-svg-57"
                     fill="none"
@@ -614,10 +593,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 90.54841396180846,96.46955149129134 L 90.54841396180846,96.46955149129134"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,96.469551,90.548416)">
+                <g>
                   <path
                     id="g-svg-58"
                     fill="none"
@@ -625,10 +604,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 96.46955149129133,90.54841396180848 L 96.46955149129133,90.54841396180848"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,102.977180,85.278641)">
+                <g>
                   <path
                     id="g-svg-59"
                     fill="none"
@@ -636,10 +615,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 102.97717981660213,85.27864045000422 L 102.97717981660213,85.27864045000422"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,80.717964)">
+                <g>
                   <path
                     id="g-svg-60"
                     fill="none"
@@ -647,10 +626,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 109.99999999999997,80.71796769724492 L 109.99999999999997,80.71796769724492"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,117.461067,76.916367)">
+                <g>
                   <path
                     id="g-svg-61"
                     fill="none"
@@ -658,10 +637,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 117.461068553936,76.91636338859192 L 117.461068553936,76.91636338859192"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125.278641,73.915482)">
+                <g>
                   <path
                     id="g-svg-62"
                     fill="none"
@@ -669,10 +648,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125.27864045000419,73.91547869638772 L 125.27864045000419,73.91547869638772"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,133.367065,71.748192)">
+                <g>
                   <path
                     id="g-svg-63"
                     fill="none"
@@ -680,10 +659,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 133.36706473457923,71.74819194129556 L 133.36706473457923,71.74819194129556"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,141.637726,70.438248)">
+                <g>
                   <path
                     id="g-svg-64"
                     fill="none"
@@ -691,60 +670,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 141.63772293858773,70.43824837053813 L 141.63772293858773,70.43824837053813"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-65"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-66"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-65" fill="none" class="axis-main-group">
+            <g id="g-svg-66" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-67"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-69"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-69" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-70"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-130"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -758,13 +717,13 @@
                 transform="matrix(1,0,0,1,158.362274,70.438248)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0.522642,0)">
+                <g>
                   <line
                     id="g-svg-131"
                     fill="none"
-                    x1="0.5226423163382673"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-0.5226423163382673"
                     y2="4.972609476841367"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -778,13 +737,13 @@
                 transform="matrix(1,0,0,1,166.632935,71.748192)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-1.039558,0)">
+                <g>
                   <line
                     id="g-svg-132"
                     fill="none"
-                    x1="1.0395584540887972"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-1.0395584540887972"
                     y2="4.890738003669028"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -798,13 +757,13 @@
                 transform="matrix(1,0,0,1,174.721359,73.915482)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-1.545085,0)">
+                <g>
                   <line
                     id="g-svg-133"
                     fill="none"
-                    x1="1.5450849718747373"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-1.5450849718747373"
                     y2="4.755282581475767"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -818,13 +777,13 @@
                 transform="matrix(1,0,0,1,182.538925,76.916367)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-2.033683,0)">
+                <g>
                   <line
                     id="g-svg-134"
                     fill="none"
-                    x1="2.033683215379001"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-2.033683215379001"
                     y2="4.567727288213004"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -838,13 +797,13 @@
                 transform="matrix(1,0,0,1,190,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-135"
                     fill="none"
-                    x1="5.000000000000001"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5.000000000000001"
                     y2="8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -858,13 +817,13 @@
                 transform="matrix(1,0,0,1,197.022827,85.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-2.938926,0)">
+                <g>
                   <line
                     id="g-svg-136"
                     fill="none"
-                    x1="2.938926261462366"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-2.938926261462366"
                     y2="4.045084971874737"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -878,13 +837,13 @@
                 transform="matrix(1,0,0,1,203.530441,90.548416)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-3.345653,0)">
+                <g>
                   <line
                     id="g-svg-137"
                     fill="none"
-                    x1="3.345653031794291"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-3.345653031794291"
                     y2="3.715724127386971"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -898,13 +857,13 @@
                 transform="matrix(1,0,0,1,209.451584,96.469551)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-3.715724,0)">
+                <g>
                   <line
                     id="g-svg-138"
                     fill="none"
-                    x1="3.715724127386971"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-3.715724127386971"
                     y2="3.345653031794291"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -918,13 +877,13 @@
                 transform="matrix(1,0,0,1,214.721359,102.977180)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4.045085,0)">
+                <g>
                   <line
                     id="g-svg-139"
                     fill="none"
-                    x1="4.045084971874737"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4.045084971874737"
                     y2="2.938926261462366"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -938,13 +897,13 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-140"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -958,13 +917,13 @@
                 transform="matrix(1,0,0,1,223.083633,117.461067)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4.567727,0)">
+                <g>
                   <line
                     id="g-svg-141"
                     fill="none"
-                    x1="4.567727288213004"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4.567727288213004"
                     y2="2.0336832153790008"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -978,13 +937,13 @@
                 transform="matrix(1,0,0,1,226.084518,125.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4.755282,0)">
+                <g>
                   <line
                     id="g-svg-142"
                     fill="none"
-                    x1="4.755282581475767"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4.755282581475767"
                     y2="1.545084971874737"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -998,13 +957,13 @@
                 transform="matrix(1,0,0,1,228.251801,133.367065)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4.890738,0)">
+                <g>
                   <line
                     id="g-svg-143"
                     fill="none"
-                    x1="4.8907380036690284"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4.8907380036690284"
                     y2="1.0395584540887965"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1018,13 +977,13 @@
                 transform="matrix(1,0,0,1,229.561752,141.637726)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4.972610,0)">
+                <g>
                   <line
                     id="g-svg-144"
                     fill="none"
-                    x1="4.972609476841367"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4.972609476841367"
                     y2="0.5226423163382673"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1038,13 +997,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-145"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1058,14 +1017,14 @@
                 transform="matrix(1,0,0,1,229.561752,158.362274)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4.972610,-0.522642)">
+                <g>
                   <line
                     id="g-svg-146"
                     fill="none"
-                    x1="4.972609476841367"
-                    y1="0.5226423163382673"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-4.972609476841367"
+                    y2="-0.5226423163382673"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1078,14 +1037,14 @@
                 transform="matrix(1,0,0,1,228.251801,166.632935)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4.890738,-1.039558)">
+                <g>
                   <line
                     id="g-svg-147"
                     fill="none"
-                    x1="4.8907380036690284"
-                    y1="1.0395584540887965"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-4.8907380036690284"
+                    y2="-1.0395584540887965"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1098,14 +1057,14 @@
                 transform="matrix(1,0,0,1,226.084518,174.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4.755282,-1.545085)">
+                <g>
                   <line
                     id="g-svg-148"
                     fill="none"
-                    x1="4.755282581475767"
-                    y1="1.545084971874737"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-4.755282581475767"
+                    y2="-1.545084971874737"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1118,14 +1077,14 @@
                 transform="matrix(1,0,0,1,223.083633,182.538925)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4.567727,-2.033683)">
+                <g>
                   <line
                     id="g-svg-149"
                     fill="none"
-                    x1="4.567727288213004"
-                    y1="2.0336832153790008"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-4.567727288213004"
+                    y2="-2.0336832153790008"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1138,14 +1097,14 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-150"
                     fill="none"
-                    x1="8.660254037844387"
-                    y1="4.999999999999999"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844387"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1158,14 +1117,14 @@
                 transform="matrix(1,0,0,1,214.721359,197.022827)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4.045085,-2.938926)">
+                <g>
                   <line
                     id="g-svg-151"
                     fill="none"
-                    x1="4.045084971874738"
-                    y1="2.9389262614623646"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-4.045084971874738"
+                    y2="-2.9389262614623646"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1178,14 +1137,14 @@
                 transform="matrix(1,0,0,1,209.451584,203.530441)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-3.715724,-3.345653)">
+                <g>
                   <line
                     id="g-svg-152"
                     fill="none"
-                    x1="3.715724127386971"
-                    y1="3.345653031794291"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-3.715724127386971"
+                    y2="-3.345653031794291"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1198,14 +1157,14 @@
                 transform="matrix(1,0,0,1,203.530441,209.451584)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-3.345653,-3.715724)">
+                <g>
                   <line
                     id="g-svg-153"
                     fill="none"
-                    x1="3.345653031794291"
-                    y1="3.715724127386971"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-3.345653031794291"
+                    y2="-3.715724127386971"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1218,14 +1177,14 @@
                 transform="matrix(1,0,0,1,197.022827,214.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-2.938926,-4.045085)">
+                <g>
                   <line
                     id="g-svg-154"
                     fill="none"
-                    x1="2.938926261462366"
-                    y1="4.045084971874737"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-2.938926261462366"
+                    y2="-4.045084971874737"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1238,14 +1197,14 @@
                 transform="matrix(1,0,0,1,190,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-155"
                     fill="none"
-                    x1="5.000000000000001"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000001"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1258,14 +1217,14 @@
                 transform="matrix(1,0,0,1,182.538925,223.083633)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-2.033683,-4.567727)">
+                <g>
                   <line
                     id="g-svg-156"
                     fill="none"
-                    x1="2.033683215379001"
-                    y1="4.567727288213004"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-2.033683215379001"
+                    y2="-4.567727288213004"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1278,14 +1237,14 @@
                 transform="matrix(1,0,0,1,174.721359,226.084518)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-1.545085,-4.755282)">
+                <g>
                   <line
                     id="g-svg-157"
                     fill="none"
-                    x1="1.5450849718747373"
-                    y1="4.755282581475767"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-1.5450849718747373"
+                    y2="-4.755282581475767"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1298,14 +1257,14 @@
                 transform="matrix(1,0,0,1,166.632935,228.251801)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-1.039558,-4.890738)">
+                <g>
                   <line
                     id="g-svg-158"
                     fill="none"
-                    x1="1.0395584540887972"
-                    y1="4.890738003669028"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-1.0395584540887972"
+                    y2="-4.890738003669028"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1318,14 +1277,14 @@
                 transform="matrix(1,0,0,1,158.362274,229.561752)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0.522642,-4.972610)">
+                <g>
                   <line
                     id="g-svg-159"
                     fill="none"
-                    x1="0.5226423163382673"
-                    y1="4.972609476841367"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-0.5226423163382673"
+                    y2="-4.972609476841367"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1338,14 +1297,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-160"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1358,14 +1317,14 @@
                 transform="matrix(1,0,0,1,141.637726,229.561752)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-4.972610)">
+                <g>
                   <line
                     id="g-svg-161"
                     fill="none"
                     x1="0"
-                    y1="4.972609476841367"
+                    y1="0"
                     x2="0.5226423163382633"
-                    y2="0"
+                    y2="-4.972609476841367"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1378,14 +1337,14 @@
                 transform="matrix(1,0,0,1,133.367065,228.251801)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-4.890738)">
+                <g>
                   <line
                     id="g-svg-162"
                     fill="none"
                     x1="0"
-                    y1="4.8907380036690284"
+                    y1="0"
                     x2="1.0395584540887957"
-                    y2="0"
+                    y2="-4.8907380036690284"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1398,14 +1357,14 @@
                 transform="matrix(1,0,0,1,125.278641,226.084518)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-4.755282)">
+                <g>
                   <line
                     id="g-svg-163"
                     fill="none"
                     x1="0"
-                    y1="4.755282581475767"
+                    y1="0"
                     x2="1.545084971874739"
-                    y2="0"
+                    y2="-4.755282581475767"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1418,14 +1377,14 @@
                 transform="matrix(1,0,0,1,117.461067,223.083633)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-4.567727)">
+                <g>
                   <line
                     id="g-svg-164"
                     fill="none"
                     x1="0"
-                    y1="4.567727288213005"
+                    y1="0"
                     x2="2.0336832153790003"
-                    y2="0"
+                    y2="-4.567727288213005"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1438,14 +1397,14 @@
                 transform="matrix(1,0,0,1,110,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-165"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844387"
+                    y1="0"
                     x2="4.999999999999998"
-                    y2="0"
+                    y2="-8.660254037844387"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1458,14 +1417,14 @@
                 transform="matrix(1,0,0,1,102.977180,214.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-4.045085)">
+                <g>
                   <line
                     id="g-svg-166"
                     fill="none"
                     x1="0"
-                    y1="4.045084971874737"
+                    y1="0"
                     x2="2.938926261462365"
-                    y2="0"
+                    y2="-4.045084971874737"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1478,14 +1437,14 @@
                 transform="matrix(1,0,0,1,96.469551,209.451584)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-3.715724)">
+                <g>
                   <line
                     id="g-svg-167"
                     fill="none"
                     x1="0"
-                    y1="3.715724127386971"
+                    y1="0"
                     x2="3.345653031794291"
-                    y2="0"
+                    y2="-3.715724127386971"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1498,14 +1457,14 @@
                 transform="matrix(1,0,0,1,90.548416,203.530441)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-3.345653)">
+                <g>
                   <line
                     id="g-svg-168"
                     fill="none"
                     x1="0"
-                    y1="3.3456530317942916"
+                    y1="0"
                     x2="3.7157241273869706"
-                    y2="0"
+                    y2="-3.3456530317942916"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1518,14 +1477,14 @@
                 transform="matrix(1,0,0,1,85.278641,197.022827)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-2.938926)">
+                <g>
                   <line
                     id="g-svg-169"
                     fill="none"
                     x1="0"
-                    y1="2.9389262614623664"
+                    y1="0"
                     x2="4.045084971874736"
-                    y2="0"
+                    y2="-2.9389262614623664"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1538,14 +1497,14 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-170"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1558,14 +1517,14 @@
                 transform="matrix(1,0,0,1,76.916367,182.538925)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-2.033683)">
+                <g>
                   <line
                     id="g-svg-171"
                     fill="none"
                     x1="0"
-                    y1="2.033683215379002"
+                    y1="0"
                     x2="4.567727288213003"
-                    y2="0"
+                    y2="-2.033683215379002"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1578,14 +1537,14 @@
                 transform="matrix(1,0,0,1,73.915482,174.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-1.545085)">
+                <g>
                   <line
                     id="g-svg-172"
                     fill="none"
                     x1="0"
-                    y1="1.5450849718747397"
+                    y1="0"
                     x2="4.755282581475767"
-                    y2="0"
+                    y2="-1.5450849718747397"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1598,14 +1557,14 @@
                 transform="matrix(1,0,0,1,71.748192,166.632935)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-1.039558)">
+                <g>
                   <line
                     id="g-svg-173"
                     fill="none"
                     x1="0"
-                    y1="1.0395584540887965"
+                    y1="0"
                     x2="4.8907380036690284"
-                    y2="0"
+                    y2="-1.0395584540887965"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1618,14 +1577,14 @@
                 transform="matrix(1,0,0,1,70.438248,158.362274)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-0.522642)">
+                <g>
                   <line
                     id="g-svg-174"
                     fill="none"
                     x1="0"
-                    y1="0.5226423163382686"
+                    y1="0"
                     x2="4.972609476841367"
-                    y2="0"
+                    y2="-0.5226423163382686"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1638,14 +1597,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-175"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -1658,7 +1617,7 @@
                 transform="matrix(1,0,0,1,70.438248,141.637726)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-176"
                     fill="none"
@@ -1678,7 +1637,7 @@
                 transform="matrix(1,0,0,1,71.748192,133.367065)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-177"
                     fill="none"
@@ -1698,7 +1657,7 @@
                 transform="matrix(1,0,0,1,73.915482,125.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-178"
                     fill="none"
@@ -1718,7 +1677,7 @@
                 transform="matrix(1,0,0,1,76.916367,117.461067)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-179"
                     fill="none"
@@ -1738,7 +1697,7 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-180"
                     fill="none"
@@ -1758,7 +1717,7 @@
                 transform="matrix(1,0,0,1,85.278641,102.977180)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-181"
                     fill="none"
@@ -1778,7 +1737,7 @@
                 transform="matrix(1,0,0,1,90.548416,96.469551)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-182"
                     fill="none"
@@ -1798,7 +1757,7 @@
                 transform="matrix(1,0,0,1,96.469551,90.548416)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-183"
                     fill="none"
@@ -1818,7 +1777,7 @@
                 transform="matrix(1,0,0,1,102.977180,85.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-184"
                     fill="none"
@@ -1838,7 +1797,7 @@
                 transform="matrix(1,0,0,1,110,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-185"
                     fill="none"
@@ -1858,7 +1817,7 @@
                 transform="matrix(1,0,0,1,117.461067,76.916367)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-186"
                     fill="none"
@@ -1878,7 +1837,7 @@
                 transform="matrix(1,0,0,1,125.278641,73.915482)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-187"
                     fill="none"
@@ -1898,7 +1857,7 @@
                 transform="matrix(1,0,0,1,133.367065,71.748192)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-188"
                     fill="none"
@@ -1918,7 +1877,7 @@
                 transform="matrix(1,0,0,1,141.637726,70.438248)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-189"
                     fill="none"
@@ -1933,19 +1892,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-190"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-190" fill="none" class="axis-label-group">
               <g
                 id="g-svg-191"
                 fill="none"
                 transform="matrix(1,0,0,1,150,90)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-251"
                     fill="rgba(0,0,0,1)"
@@ -1969,10 +1923,10 @@
               <g
                 id="g-svg-192"
                 fill="none"
-                transform="matrix(0.994522,0.104528,-0.104528,0.994522,156.794357,85.356079)"
+                transform="matrix(1,0,0,1,156.794357,85.356079)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.994522,0.104528,-0.104528,0.994522,0,0)">
                   <text
                     id="g-svg-252"
                     fill="rgba(0,0,0,1)"
@@ -1992,10 +1946,10 @@
               <g
                 id="g-svg-193"
                 fill="none"
-                transform="matrix(0.978148,0.207912,-0.207912,0.978148,163.514267,86.420403)"
+                transform="matrix(1,0,0,1,163.514267,86.420403)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.978148,0.207912,-0.207912,0.978148,0,0)">
                   <text
                     id="g-svg-253"
                     fill="rgba(0,0,0,1)"
@@ -2015,10 +1969,10 @@
               <g
                 id="g-svg-194"
                 fill="none"
-                transform="matrix(0.951057,0.309017,-0.309017,0.951057,170.086105,88.181328)"
+                transform="matrix(1,0,0,1,170.086105,88.181328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.951057,0.309017,-0.309017,0.951057,0,0)">
                   <text
                     id="g-svg-254"
                     fill="rgba(0,0,0,1)"
@@ -2038,10 +1992,10 @@
               <g
                 id="g-svg-195"
                 fill="none"
-                transform="matrix(0.913545,0.406737,-0.406737,0.913545,176.437881,90.619545)"
+                transform="matrix(1,0,0,1,176.437881,90.619545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.913545,0.406737,-0.406737,0.913545,0,0)">
                   <text
                     id="g-svg-255"
                     fill="rgba(0,0,0,1)"
@@ -2061,10 +2015,10 @@
               <g
                 id="g-svg-196"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,180,98.038475)"
+                transform="matrix(1,0,0,1,180,98.038475)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-256"
                     fill="rgba(0,0,0,1)"
@@ -2088,10 +2042,10 @@
               <g
                 id="g-svg-197"
                 fill="none"
-                transform="matrix(0.809017,0.587785,-0.587785,0.809017,188.206039,97.413895)"
+                transform="matrix(1,0,0,1,188.206039,97.413895)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.809017,0.587785,-0.587785,0.809017,0,0)">
                   <text
                     id="g-svg-257"
                     fill="rgba(0,0,0,1)"
@@ -2111,10 +2065,10 @@
               <g
                 id="g-svg-198"
                 fill="none"
-                transform="matrix(0.743145,0.669131,-0.669131,0.743145,193.493484,101.695587)"
+                transform="matrix(1,0,0,1,193.493484,101.695587)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.743145,0.669131,-0.669131,0.743145,0,0)">
                   <text
                     id="g-svg-258"
                     fill="rgba(0,0,0,1)"
@@ -2134,10 +2088,10 @@
               <g
                 id="g-svg-199"
                 fill="none"
-                transform="matrix(0.669131,0.743145,-0.743145,0.669131,198.304413,106.506508)"
+                transform="matrix(1,0,0,1,198.304413,106.506508)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.669131,0.743145,-0.743145,0.669131,0,0)">
                   <text
                     id="g-svg-259"
                     fill="rgba(0,0,0,1)"
@@ -2157,10 +2111,10 @@
               <g
                 id="g-svg-200"
                 fill="none"
-                transform="matrix(0.587785,0.809017,-0.809017,0.587785,202.586105,111.793961)"
+                transform="matrix(1,0,0,1,202.586105,111.793961)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.587785,0.809017,-0.809017,0.587785,0,0)">
                   <text
                     id="g-svg-260"
                     fill="rgba(0,0,0,1)"
@@ -2180,10 +2134,10 @@
               <g
                 id="g-svg-201"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,201.961517,120)"
+                transform="matrix(1,0,0,1,201.961517,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-261"
                     fill="rgba(0,0,0,1)"
@@ -2207,10 +2161,10 @@
               <g
                 id="g-svg-202"
                 fill="none"
-                transform="matrix(0.406737,0.913545,-0.913545,0.406737,209.380447,123.562119)"
+                transform="matrix(1,0,0,1,209.380447,123.562119)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.406737,0.913545,-0.913545,0.406737,0,0)">
                   <text
                     id="g-svg-262"
                     fill="rgba(0,0,0,1)"
@@ -2230,10 +2184,10 @@
               <g
                 id="g-svg-203"
                 fill="none"
-                transform="matrix(0.309017,0.951057,-0.951057,0.309017,211.818680,129.913895)"
+                transform="matrix(1,0,0,1,211.818680,129.913895)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.309017,0.951057,-0.951057,0.309017,0,0)">
                   <text
                     id="g-svg-263"
                     fill="rgba(0,0,0,1)"
@@ -2253,10 +2207,10 @@
               <g
                 id="g-svg-204"
                 fill="none"
-                transform="matrix(0.207912,0.978148,-0.978148,0.207912,213.579590,136.485733)"
+                transform="matrix(1,0,0,1,213.579590,136.485733)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.207912,0.978148,-0.978148,0.207912,0,0)">
                   <text
                     id="g-svg-264"
                     fill="rgba(0,0,0,1)"
@@ -2276,10 +2230,10 @@
               <g
                 id="g-svg-205"
                 fill="none"
-                transform="matrix(0.104528,0.994522,-0.994522,0.104528,214.643921,143.205643)"
+                transform="matrix(1,0,0,1,214.643921,143.205643)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.104528,0.994522,-0.994522,0.104528,0,0)">
                   <text
                     id="g-svg-265"
                     fill="rgba(0,0,0,1)"
@@ -2299,10 +2253,10 @@
               <g
                 id="g-svg-206"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,210,150)"
+                transform="matrix(1,0,0,1,210,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-266"
                     fill="rgba(0,0,0,1)"
@@ -2326,10 +2280,10 @@
               <g
                 id="g-svg-207"
                 fill="none"
-                transform="matrix(0.104528,-0.994522,0.994522,0.104528,214.643921,156.794357)"
+                transform="matrix(1,0,0,1,214.643921,156.794357)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.104528,-0.994522,0.994522,0.104528,0,0)">
                   <text
                     id="g-svg-267"
                     fill="rgba(0,0,0,1)"
@@ -2349,10 +2303,10 @@
               <g
                 id="g-svg-208"
                 fill="none"
-                transform="matrix(0.207912,-0.978148,0.978148,0.207912,213.579590,163.514267)"
+                transform="matrix(1,0,0,1,213.579590,163.514267)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.207912,-0.978148,0.978148,0.207912,0,0)">
                   <text
                     id="g-svg-268"
                     fill="rgba(0,0,0,1)"
@@ -2372,10 +2326,10 @@
               <g
                 id="g-svg-209"
                 fill="none"
-                transform="matrix(0.309017,-0.951057,0.951057,0.309017,211.818680,170.086105)"
+                transform="matrix(1,0,0,1,211.818680,170.086105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.309017,-0.951057,0.951057,0.309017,0,0)">
                   <text
                     id="g-svg-269"
                     fill="rgba(0,0,0,1)"
@@ -2395,10 +2349,10 @@
               <g
                 id="g-svg-210"
                 fill="none"
-                transform="matrix(0.406737,-0.913545,0.913545,0.406737,209.380447,176.437881)"
+                transform="matrix(1,0,0,1,209.380447,176.437881)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.406737,-0.913545,0.913545,0.406737,0,0)">
                   <text
                     id="g-svg-270"
                     fill="rgba(0,0,0,1)"
@@ -2418,10 +2372,10 @@
               <g
                 id="g-svg-211"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,201.961517,180)"
+                transform="matrix(1,0,0,1,201.961517,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-271"
                     fill="rgba(0,0,0,1)"
@@ -2445,10 +2399,10 @@
               <g
                 id="g-svg-212"
                 fill="none"
-                transform="matrix(0.587785,-0.809017,0.809017,0.587785,202.586105,188.206039)"
+                transform="matrix(1,0,0,1,202.586105,188.206039)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.587785,-0.809017,0.809017,0.587785,0,0)">
                   <text
                     id="g-svg-272"
                     fill="rgba(0,0,0,1)"
@@ -2468,10 +2422,10 @@
               <g
                 id="g-svg-213"
                 fill="none"
-                transform="matrix(0.669131,-0.743145,0.743145,0.669131,198.304413,193.493484)"
+                transform="matrix(1,0,0,1,198.304413,193.493484)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.669131,-0.743145,0.743145,0.669131,0,0)">
                   <text
                     id="g-svg-273"
                     fill="rgba(0,0,0,1)"
@@ -2491,10 +2445,10 @@
               <g
                 id="g-svg-214"
                 fill="none"
-                transform="matrix(0.743145,-0.669131,0.669131,0.743145,193.493484,198.304413)"
+                transform="matrix(1,0,0,1,193.493484,198.304413)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.743145,-0.669131,0.669131,0.743145,0,0)">
                   <text
                     id="g-svg-274"
                     fill="rgba(0,0,0,1)"
@@ -2514,10 +2468,10 @@
               <g
                 id="g-svg-215"
                 fill="none"
-                transform="matrix(0.809017,-0.587785,0.587785,0.809017,188.206039,202.586105)"
+                transform="matrix(1,0,0,1,188.206039,202.586105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.809017,-0.587785,0.587785,0.809017,0,0)">
                   <text
                     id="g-svg-275"
                     fill="rgba(0,0,0,1)"
@@ -2537,10 +2491,10 @@
               <g
                 id="g-svg-216"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,180,201.961517)"
+                transform="matrix(1,0,0,1,180,201.961517)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-276"
                     fill="rgba(0,0,0,1)"
@@ -2564,10 +2518,10 @@
               <g
                 id="g-svg-217"
                 fill="none"
-                transform="matrix(0.913545,-0.406737,0.406737,0.913545,176.437881,209.380447)"
+                transform="matrix(1,0,0,1,176.437881,209.380447)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.913545,-0.406737,0.406737,0.913545,0,0)">
                   <text
                     id="g-svg-277"
                     fill="rgba(0,0,0,1)"
@@ -2587,10 +2541,10 @@
               <g
                 id="g-svg-218"
                 fill="none"
-                transform="matrix(0.951057,-0.309017,0.309017,0.951057,170.086105,211.818680)"
+                transform="matrix(1,0,0,1,170.086105,211.818680)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.951057,-0.309017,0.309017,0.951057,0,0)">
                   <text
                     id="g-svg-278"
                     fill="rgba(0,0,0,1)"
@@ -2610,10 +2564,10 @@
               <g
                 id="g-svg-219"
                 fill="none"
-                transform="matrix(0.978148,-0.207912,0.207912,0.978148,163.514267,213.579590)"
+                transform="matrix(1,0,0,1,163.514267,213.579590)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.978148,-0.207912,0.207912,0.978148,0,0)">
                   <text
                     id="g-svg-279"
                     fill="rgba(0,0,0,1)"
@@ -2633,10 +2587,10 @@
               <g
                 id="g-svg-220"
                 fill="none"
-                transform="matrix(0.994522,-0.104528,0.104528,0.994522,156.794357,214.643921)"
+                transform="matrix(1,0,0,1,156.794357,214.643921)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.994522,-0.104528,0.104528,0.994522,0,0)">
                   <text
                     id="g-svg-280"
                     fill="rgba(0,0,0,1)"
@@ -2659,7 +2613,7 @@
                 transform="matrix(1,0,0,1,150,210)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-281"
                     fill="rgba(0,0,0,1)"
@@ -2683,10 +2637,10 @@
               <g
                 id="g-svg-222"
                 fill="none"
-                transform="matrix(0.994522,0.104528,-0.104528,0.994522,143.205643,214.643921)"
+                transform="matrix(1,0,0,1,143.205643,214.643921)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.994522,0.104528,-0.104528,0.994522,0,0)">
                   <text
                     id="g-svg-282"
                     fill="rgba(0,0,0,1)"
@@ -2706,10 +2660,10 @@
               <g
                 id="g-svg-223"
                 fill="none"
-                transform="matrix(0.978148,0.207912,-0.207912,0.978148,136.485733,213.579590)"
+                transform="matrix(1,0,0,1,136.485733,213.579590)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.978148,0.207912,-0.207912,0.978148,0,0)">
                   <text
                     id="g-svg-283"
                     fill="rgba(0,0,0,1)"
@@ -2729,10 +2683,10 @@
               <g
                 id="g-svg-224"
                 fill="none"
-                transform="matrix(0.951057,0.309017,-0.309017,0.951057,129.913895,211.818680)"
+                transform="matrix(1,0,0,1,129.913895,211.818680)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.951057,0.309017,-0.309017,0.951057,0,0)">
                   <text
                     id="g-svg-284"
                     fill="rgba(0,0,0,1)"
@@ -2752,10 +2706,10 @@
               <g
                 id="g-svg-225"
                 fill="none"
-                transform="matrix(0.913545,0.406737,-0.406737,0.913545,123.562119,209.380447)"
+                transform="matrix(1,0,0,1,123.562119,209.380447)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.913545,0.406737,-0.406737,0.913545,0,0)">
                   <text
                     id="g-svg-285"
                     fill="rgba(0,0,0,1)"
@@ -2775,10 +2729,10 @@
               <g
                 id="g-svg-226"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,120,201.961517)"
+                transform="matrix(1,0,0,1,120,201.961517)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-286"
                     fill="rgba(0,0,0,1)"
@@ -2802,10 +2756,10 @@
               <g
                 id="g-svg-227"
                 fill="none"
-                transform="matrix(0.809017,0.587785,-0.587785,0.809017,111.793961,202.586105)"
+                transform="matrix(1,0,0,1,111.793961,202.586105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.809017,0.587785,-0.587785,0.809017,0,0)">
                   <text
                     id="g-svg-287"
                     fill="rgba(0,0,0,1)"
@@ -2825,10 +2779,10 @@
               <g
                 id="g-svg-228"
                 fill="none"
-                transform="matrix(0.743145,0.669131,-0.669131,0.743145,106.506508,198.304413)"
+                transform="matrix(1,0,0,1,106.506508,198.304413)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.743145,0.669131,-0.669131,0.743145,0,0)">
                   <text
                     id="g-svg-288"
                     fill="rgba(0,0,0,1)"
@@ -2848,10 +2802,10 @@
               <g
                 id="g-svg-229"
                 fill="none"
-                transform="matrix(0.669131,0.743145,-0.743145,0.669131,101.695587,193.493484)"
+                transform="matrix(1,0,0,1,101.695587,193.493484)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.669131,0.743145,-0.743145,0.669131,0,0)">
                   <text
                     id="g-svg-289"
                     fill="rgba(0,0,0,1)"
@@ -2871,10 +2825,10 @@
               <g
                 id="g-svg-230"
                 fill="none"
-                transform="matrix(0.587785,0.809017,-0.809017,0.587785,97.413895,188.206039)"
+                transform="matrix(1,0,0,1,97.413895,188.206039)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.587785,0.809017,-0.809017,0.587785,0,0)">
                   <text
                     id="g-svg-290"
                     fill="rgba(0,0,0,1)"
@@ -2894,10 +2848,10 @@
               <g
                 id="g-svg-231"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,98.038475,180)"
+                transform="matrix(1,0,0,1,98.038475,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-291"
                     fill="rgba(0,0,0,1)"
@@ -2921,10 +2875,10 @@
               <g
                 id="g-svg-232"
                 fill="none"
-                transform="matrix(0.406737,0.913545,-0.913545,0.406737,90.619545,176.437881)"
+                transform="matrix(1,0,0,1,90.619545,176.437881)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.406737,0.913545,-0.913545,0.406737,0,0)">
                   <text
                     id="g-svg-292"
                     fill="rgba(0,0,0,1)"
@@ -2944,10 +2898,10 @@
               <g
                 id="g-svg-233"
                 fill="none"
-                transform="matrix(0.309017,0.951057,-0.951057,0.309017,88.181328,170.086105)"
+                transform="matrix(1,0,0,1,88.181328,170.086105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.309017,0.951057,-0.951057,0.309017,0,0)">
                   <text
                     id="g-svg-293"
                     fill="rgba(0,0,0,1)"
@@ -2967,10 +2921,10 @@
               <g
                 id="g-svg-234"
                 fill="none"
-                transform="matrix(0.207912,0.978148,-0.978148,0.207912,86.420403,163.514267)"
+                transform="matrix(1,0,0,1,86.420403,163.514267)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.207912,0.978148,-0.978148,0.207912,0,0)">
                   <text
                     id="g-svg-294"
                     fill="rgba(0,0,0,1)"
@@ -2990,10 +2944,10 @@
               <g
                 id="g-svg-235"
                 fill="none"
-                transform="matrix(0.104528,0.994522,-0.994522,0.104528,85.356079,156.794357)"
+                transform="matrix(1,0,0,1,85.356079,156.794357)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.104528,0.994522,-0.994522,0.104528,0,0)">
                   <text
                     id="g-svg-295"
                     fill="rgba(0,0,0,1)"
@@ -3013,10 +2967,10 @@
               <g
                 id="g-svg-236"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,90,150)"
+                transform="matrix(1,0,0,1,90,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-296"
                     fill="rgba(0,0,0,1)"
@@ -3040,10 +2994,10 @@
               <g
                 id="g-svg-237"
                 fill="none"
-                transform="matrix(0.104528,-0.994522,0.994522,0.104528,85.356079,143.205643)"
+                transform="matrix(1,0,0,1,85.356079,143.205643)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.104528,-0.994522,0.994522,0.104528,0,0)">
                   <text
                     id="g-svg-297"
                     fill="rgba(0,0,0,1)"
@@ -3063,10 +3017,10 @@
               <g
                 id="g-svg-238"
                 fill="none"
-                transform="matrix(0.207912,-0.978148,0.978148,0.207912,86.420403,136.485733)"
+                transform="matrix(1,0,0,1,86.420403,136.485733)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.207912,-0.978148,0.978148,0.207912,0,0)">
                   <text
                     id="g-svg-298"
                     fill="rgba(0,0,0,1)"
@@ -3086,10 +3040,10 @@
               <g
                 id="g-svg-239"
                 fill="none"
-                transform="matrix(0.309017,-0.951057,0.951057,0.309017,88.181328,129.913895)"
+                transform="matrix(1,0,0,1,88.181328,129.913895)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.309017,-0.951057,0.951057,0.309017,0,0)">
                   <text
                     id="g-svg-299"
                     fill="rgba(0,0,0,1)"
@@ -3109,10 +3063,10 @@
               <g
                 id="g-svg-240"
                 fill="none"
-                transform="matrix(0.406737,-0.913545,0.913545,0.406737,90.619545,123.562119)"
+                transform="matrix(1,0,0,1,90.619545,123.562119)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.406737,-0.913545,0.913545,0.406737,0,0)">
                   <text
                     id="g-svg-300"
                     fill="rgba(0,0,0,1)"
@@ -3132,10 +3086,10 @@
               <g
                 id="g-svg-241"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,98.038475,120)"
+                transform="matrix(1,0,0,1,98.038475,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-301"
                     fill="rgba(0,0,0,1)"
@@ -3159,10 +3113,10 @@
               <g
                 id="g-svg-242"
                 fill="none"
-                transform="matrix(0.587785,-0.809017,0.809017,0.587785,97.413895,111.793961)"
+                transform="matrix(1,0,0,1,97.413895,111.793961)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.587785,-0.809017,0.809017,0.587785,0,0)">
                   <text
                     id="g-svg-302"
                     fill="rgba(0,0,0,1)"
@@ -3182,10 +3136,10 @@
               <g
                 id="g-svg-243"
                 fill="none"
-                transform="matrix(0.669131,-0.743145,0.743145,0.669131,101.695587,106.506508)"
+                transform="matrix(1,0,0,1,101.695587,106.506508)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.669131,-0.743145,0.743145,0.669131,0,0)">
                   <text
                     id="g-svg-303"
                     fill="rgba(0,0,0,1)"
@@ -3205,10 +3159,10 @@
               <g
                 id="g-svg-244"
                 fill="none"
-                transform="matrix(0.743145,-0.669131,0.669131,0.743145,106.506508,101.695587)"
+                transform="matrix(1,0,0,1,106.506508,101.695587)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.743145,-0.669131,0.669131,0.743145,0,0)">
                   <text
                     id="g-svg-304"
                     fill="rgba(0,0,0,1)"
@@ -3228,10 +3182,10 @@
               <g
                 id="g-svg-245"
                 fill="none"
-                transform="matrix(0.809017,-0.587785,0.587785,0.809017,111.793961,97.413895)"
+                transform="matrix(1,0,0,1,111.793961,97.413895)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.809017,-0.587785,0.587785,0.809017,0,0)">
                   <text
                     id="g-svg-305"
                     fill="rgba(0,0,0,1)"
@@ -3251,10 +3205,10 @@
               <g
                 id="g-svg-246"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,120,98.038475)"
+                transform="matrix(1,0,0,1,120,98.038475)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-306"
                     fill="rgba(0,0,0,1)"
@@ -3278,10 +3232,10 @@
               <g
                 id="g-svg-247"
                 fill="none"
-                transform="matrix(0.913545,-0.406737,0.406737,0.913545,123.562119,90.619545)"
+                transform="matrix(1,0,0,1,123.562119,90.619545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.913545,-0.406737,0.406737,0.913545,0,0)">
                   <text
                     id="g-svg-307"
                     fill="rgba(0,0,0,1)"
@@ -3301,10 +3255,10 @@
               <g
                 id="g-svg-248"
                 fill="none"
-                transform="matrix(0.951057,-0.309017,0.309017,0.951057,129.913895,88.181328)"
+                transform="matrix(1,0,0,1,129.913895,88.181328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.951057,-0.309017,0.309017,0.951057,0,0)">
                   <text
                     id="g-svg-308"
                     fill="rgba(0,0,0,1)"
@@ -3324,10 +3278,10 @@
               <g
                 id="g-svg-249"
                 fill="none"
-                transform="matrix(0.978148,-0.207912,0.207912,0.978148,136.485733,86.420403)"
+                transform="matrix(1,0,0,1,136.485733,86.420403)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.978148,-0.207912,0.207912,0.978148,0,0)">
                   <text
                     id="g-svg-309"
                     fill="rgba(0,0,0,1)"
@@ -3347,10 +3301,10 @@
               <g
                 id="g-svg-250"
                 fill="none"
-                transform="matrix(0.994522,-0.104528,0.104528,0.994522,143.205643,85.356079)"
+                transform="matrix(1,0,0,1,143.205643,85.356079)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.994522,-0.104528,0.104528,0.994522,0,0)">
                   <text
                     id="g-svg-310"
                     fill="rgba(0,0,0,1)"
@@ -3372,10 +3326,10 @@
           <g
             id="g-svg-311"
             fill="none"
-            transform="matrix(1,0,0,1,11,263)"
+            transform="matrix(1,0,0,1,35.500000,251.500000)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-312"
                 fill="rgba(0,0,0,1)"
diff --git a/__tests__/integration/snapshots/AxisArcBasis1.svg b/__tests__/integration/snapshots/AxisArcBasis1.svg
index 860a1e723..6a7acf280 100644
--- a/__tests__/integration/snapshots/AxisArcBasis1.svg
+++ b/__tests__/integration/snapshots/AxisArcBasis1.svg
@@ -6,40 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-314"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-315"
-          fill="none"
-          class="axis-class"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-313" fill="none" width="400" height="300">
+        <g id="g-svg-314" fill="none" class="axis-class">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -47,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,93.4314575050762 L 93.4314575050762,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,119.385323,76.089638)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -58,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 119.38532541079283,76.08963739909706 L 119.38532541079283,76.08963739909706"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,70)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -69,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180.614670,76.089638)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -80,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 180.6146745892072,76.08963739909706 L 180.6146745892072,76.08963739909706"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -91,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,223.910370,119.385323)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -102,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 223.91036260090294,119.3853254107928 L 223.91036260090294,119.3853254107928"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -113,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,223.910370,180.614670)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -124,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 223.91036260090294,180.61467458920714 L 223.91036260090294,180.61467458920714"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -135,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180.614670,223.910370)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -146,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 180.6146745892072,223.91036260090294 L 180.6146745892072,223.91036260090294"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -157,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150.00000000000006,230 L 150.00000000000006,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,119.385323,223.910370)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -168,54 +142,34 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 119.38532541079283,223.91036260090294 L 119.38532541079283,223.91036260090294"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,93.431458,70)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-class"
-                  d="M 0,23.431457505076196 A 80 80 0 1 1 0 136.5685424949238"
+                  d="M 93.4314575050762,93.4314575050762 A 80 80 0 1 1 93.4314575050762 206.5685424949238"
                   stroke-width="5"
                   stroke="rgba(255,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
@@ -235,7 +189,7 @@
                 transform="matrix(1,0,0,1,119.385323,76.089638)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
@@ -255,13 +209,13 @@
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -275,13 +229,13 @@
                 transform="matrix(1,0,0,1,180.614670,76.089638)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-3.826834,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
-                    x1="3.8268343236508984"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-3.8268343236508984"
                     y2="9.238795325112868"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -295,13 +249,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -315,13 +269,13 @@
                 transform="matrix(1,0,0,1,223.910370,119.385323)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.238795,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
-                    x1="9.238795325112866"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-9.238795325112866"
                     y2="3.8268343236508997"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -335,13 +289,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -355,14 +309,14 @@
                 transform="matrix(1,0,0,1,223.910370,180.614670)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.238795,-3.826834)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
-                    x1="9.23879532511287"
-                    y1="3.8268343236508935"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-9.23879532511287"
+                    y2="-3.8268343236508935"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(255,0,0,1)"
@@ -375,14 +329,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(255,0,0,1)"
@@ -395,14 +349,14 @@
                 transform="matrix(1,0,0,1,180.614670,223.910370)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-3.826834,-9.238795)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
-                    x1="3.8268343236508984"
-                    y1="9.238795325112868"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-3.8268343236508984"
+                    y2="-9.238795325112868"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(255,0,0,1)"
@@ -415,14 +369,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
-                    x1="7.273661547324617e-15"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.273661547324617e-15"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(255,0,0,1)"
@@ -435,14 +389,14 @@
                 transform="matrix(1,0,0,1,119.385323,223.910370)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-9.238795)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
                     x1="0"
-                    y1="9.238795325112868"
+                    y1="0"
                     x2="3.826834323650897"
-                    y2="0"
+                    y2="-9.238795325112868"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(255,0,0,1)"
@@ -450,19 +404,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-46"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-46" fill="none" class="axis-label-group">
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,107.573593,107.573593)"
+                transform="matrix(1,0,0,1,107.573593,107.573593)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -486,10 +435,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.923880,-0.382683,0.382683,0.923880,127.038994,94.567230)"
+                transform="matrix(1,0,0,1,127.038994,94.567230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.923880,-0.382683,0.382683,0.923880,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -516,7 +465,7 @@
                 transform="matrix(1,0,0,1,150,90)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -540,10 +489,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(0.923880,0.382683,-0.382683,0.923880,172.960999,94.567230)"
+                transform="matrix(1,0,0,1,172.960999,94.567230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.923880,0.382683,-0.382683,0.923880,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -567,10 +516,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,192.426407,107.573593)"
+                transform="matrix(1,0,0,1,192.426407,107.573593)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -594,10 +543,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.382683,0.923880,-0.923880,0.382683,205.432770,127.038994)"
+                transform="matrix(1,0,0,1,205.432770,127.038994)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.382683,0.923880,-0.923880,0.382683,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -621,10 +570,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,210,150)"
+                transform="matrix(1,0,0,1,210,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -648,10 +597,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.382683,-0.923880,0.923880,0.382683,205.432770,172.960999)"
+                transform="matrix(1,0,0,1,205.432770,172.960999)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.382683,-0.923880,0.923880,0.382683,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -675,10 +624,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,192.426407,192.426407)"
+                transform="matrix(1,0,0,1,192.426407,192.426407)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -702,10 +651,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(0.923880,-0.382683,0.382683,0.923880,172.960999,205.432770)"
+                transform="matrix(1,0,0,1,172.960999,205.432770)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.923880,-0.382683,0.382683,0.923880,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -729,10 +678,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(1,-0,0,1,150,210)"
+                transform="matrix(1,0,0,1,150,210)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -756,10 +705,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.923880,0.382683,-0.382683,0.923880,127.038994,205.432770)"
+                transform="matrix(1,0,0,1,127.038994,205.432770)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.923880,0.382683,-0.382683,0.923880,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -782,12 +731,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-71" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcBasis2.svg b/__tests__/integration/snapshots/AxisArcBasis2.svg
index 9c1bbfb36..6642d9bc9 100644
--- a/__tests__/integration/snapshots/AxisArcBasis2.svg
+++ b/__tests__/integration/snapshots/AxisArcBasis2.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-72"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-72" fill="none" width="400" height="300">
+        <g id="g-svg-73" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,93.4314575050762 L 93.4314575050762,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,119.385323,76.089638)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 119.38532541079283,76.08963739909706 L 119.38532541079283,76.08963739909706"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,70)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180.614670,76.089638)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 180.6146745892072,76.08963739909706 L 180.6146745892072,76.08963739909706"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,223.910370,119.385323)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 223.91036260090294,119.3853254107928 L 223.91036260090294,119.3853254107928"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,223.910370,180.614670)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 223.91036260090294,180.61467458920714 L 223.91036260090294,180.61467458920714"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180.614670,223.910370)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 180.6146745892072,223.91036260090294 L 180.6146745892072,223.91036260090294"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150.00000000000006,230 L 150.00000000000006,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,119.385323,223.910370)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,71 +142,50 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 119.38532541079283,223.91036260090294 L 119.38532541079283,223.91036260090294"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,93.431458,70)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-line"
-                  d="M 0,23.431457505076196 A 80 80 0 1 1 0 136.5685424949238 L -10.7308188664138,126.0876300128821"
+                  d="M 93.4314575050762,93.4314575050762 A 80 80 0 1 1 93.4314575050762 206.5685424949238 L 82.7006386386624,196.0876300128821"
                   stroke-width="5"
                   stroke="rgba(255,165,0,1)"
                 />
-                <g transform="matrix(0.357694,0.349364,-0.349364,0.357694,-10.730819,126.087631)">
+                <g transform="matrix(0.357694,0.349364,-0.349364,0.357694,82.700638,196.087631)">
                   <path
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(255,165,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-23"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-23" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-24"
                 fill="none"
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
-                    x1="7.071067811865475"
-                    y1="7.0710678118654755"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.071067811865475"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -240,14 +198,14 @@
                 transform="matrix(1,0,0,1,119.385323,76.089638)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-3.826834,-9.238795)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
-                    x1="3.826834323650897"
-                    y1="9.238795325112868"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-3.826834323650897"
+                    y2="-9.238795325112868"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -260,14 +218,14 @@
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -280,14 +238,14 @@
                 transform="matrix(1,0,0,1,180.614670,76.089638)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-9.238795)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
                     x1="0"
-                    y1="9.238795325112868"
+                    y1="0"
                     x2="3.8268343236508984"
-                    y2="0"
+                    y2="-9.238795325112868"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -300,14 +258,14 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.0710678118654755"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -320,14 +278,14 @@
                 transform="matrix(1,0,0,1,223.910370,119.385323)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-3.826834)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
                     x1="0"
-                    y1="3.8268343236508997"
+                    y1="0"
                     x2="9.238795325112866"
-                    y2="0"
+                    y2="-3.8268343236508997"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -340,7 +298,7 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
@@ -360,7 +318,7 @@
                 transform="matrix(1,0,0,1,223.910370,180.614670)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
@@ -380,7 +338,7 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -400,7 +358,7 @@
                 transform="matrix(1,0,0,1,180.614670,223.910370)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -420,7 +378,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
@@ -440,13 +398,13 @@
                 transform="matrix(1,0,0,1,119.385323,223.910370)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-3.826834,0)">
+                <g>
                   <line
                     id="g-svg-47"
                     fill="none"
-                    x1="3.826834323650897"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-3.826834323650897"
                     y2="9.238795325112868"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -455,19 +413,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-48"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-48" fill="none" class="axis-label-group">
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,100.502525,100.502525)"
+                transform="matrix(1,0,0,1,100.502525,100.502525)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -491,10 +444,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(0.923880,-0.382683,0.382683,0.923880,123.212158,85.328430)"
+                transform="matrix(1,0,0,1,123.212158,85.328430)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.923880,-0.382683,0.382683,0.923880,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -521,7 +474,7 @@
                 transform="matrix(1,0,0,1,150,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -545,10 +498,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.923880,0.382683,-0.382683,0.923880,176.787842,85.328430)"
+                transform="matrix(1,0,0,1,176.787842,85.328430)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.923880,0.382683,-0.382683,0.923880,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -572,10 +525,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,199.497482,100.502525)"
+                transform="matrix(1,0,0,1,199.497482,100.502525)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -599,10 +552,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.382683,0.923880,-0.923880,0.382683,214.671570,123.212158)"
+                transform="matrix(1,0,0,1,214.671570,123.212158)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.382683,0.923880,-0.923880,0.382683,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -626,10 +579,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,220,150)"
+                transform="matrix(1,0,0,1,220,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -653,10 +606,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(0.382683,-0.923880,0.923880,0.382683,214.671570,176.787842)"
+                transform="matrix(1,0,0,1,214.671570,176.787842)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.382683,-0.923880,0.923880,0.382683,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -680,10 +633,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,199.497482,199.497482)"
+                transform="matrix(1,0,0,1,199.497482,199.497482)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -707,10 +660,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.923880,-0.382683,0.382683,0.923880,176.787842,214.671570)"
+                transform="matrix(1,0,0,1,176.787842,214.671570)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.923880,-0.382683,0.382683,0.923880,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -734,10 +687,10 @@
               <g
                 id="g-svg-59"
                 fill="none"
-                transform="matrix(1,-0,0,1,150,220)"
+                transform="matrix(1,0,0,1,150,220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -761,10 +714,10 @@
               <g
                 id="g-svg-60"
                 fill="none"
-                transform="matrix(0.923880,0.382683,-0.382683,0.923880,123.212158,214.671570)"
+                transform="matrix(1,0,0,1,123.212158,214.671570)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.923880,0.382683,-0.382683,0.923880,0,0)">
                   <text
                     id="g-svg-72"
                     fill="rgba(0,0,0,1)"
@@ -787,12 +740,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-73"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-73" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcBasis3.svg b/__tests__/integration/snapshots/AxisArcBasis3.svg
index 043fd5c1a..165267f3d 100644
--- a/__tests__/integration/snapshots/AxisArcBasis3.svg
+++ b/__tests__/integration/snapshots/AxisArcBasis3.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-74"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-75" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-74" fill="none" width="400" height="300">
+        <g id="g-svg-75" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,93.4314575050762 L 93.4314575050762,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,119.385323,76.089638)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 119.38532541079283,76.08963739909706 L 119.38532541079283,76.08963739909706"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,70)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180.614670,76.089638)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 180.6146745892072,76.08963739909706 L 180.6146745892072,76.08963739909706"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,223.910370,119.385323)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 223.91036260090294,119.3853254107928 L 223.91036260090294,119.3853254107928"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,223.910370,180.614670)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 223.91036260090294,180.61467458920714 L 223.91036260090294,180.61467458920714"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180.614670,223.910370)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 180.6146745892072,223.91036260090294 L 180.6146745892072,223.91036260090294"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150.00000000000006,230 L 150.00000000000006,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,119.385323,223.910370)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,71 +142,50 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 119.38532541079283,223.91036260090294 L 119.38532541079283,223.91036260090294"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,93.431458,70)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-line"
-                  d="M 0,23.431457505076196 A 80 80 0 1 1 0 136.5685424949238 L -10.7308188664138,126.0876300128821"
+                  d="M 93.4314575050762,93.4314575050762 A 80 80 0 1 1 93.4314575050762 206.5685424949238 L 82.7006386386624,196.0876300128821"
                   stroke-width="5"
                   stroke="rgba(0,128,0,1)"
                 />
-                <g transform="matrix(0.357694,0.349364,-0.349364,0.357694,-10.730819,126.087631)">
+                <g transform="matrix(0.357694,0.349364,-0.349364,0.357694,82.700638,196.087631)">
                   <path
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,128,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-23"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-23" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-24"
                 fill="none"
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
-                    x1="7.071067811865475"
-                    y1="7.0710678118654755"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.071067811865475"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -240,14 +198,14 @@
                 transform="matrix(1,0,0,1,119.385323,76.089638)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-3.826834,-9.238795)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
-                    x1="3.826834323650897"
-                    y1="9.238795325112868"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-3.826834323650897"
+                    y2="-9.238795325112868"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -260,14 +218,14 @@
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -280,14 +238,14 @@
                 transform="matrix(1,0,0,1,180.614670,76.089638)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-9.238795)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
                     x1="0"
-                    y1="9.238795325112868"
+                    y1="0"
                     x2="3.8268343236508984"
-                    y2="0"
+                    y2="-9.238795325112868"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -300,14 +258,14 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.0710678118654755"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -320,14 +278,14 @@
                 transform="matrix(1,0,0,1,223.910370,119.385323)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-3.826834)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
                     x1="0"
-                    y1="3.8268343236508997"
+                    y1="0"
                     x2="9.238795325112866"
-                    y2="0"
+                    y2="-3.8268343236508997"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -340,7 +298,7 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
@@ -360,7 +318,7 @@
                 transform="matrix(1,0,0,1,223.910370,180.614670)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
@@ -380,7 +338,7 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -400,7 +358,7 @@
                 transform="matrix(1,0,0,1,180.614670,223.910370)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -420,7 +378,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
@@ -440,13 +398,13 @@
                 transform="matrix(1,0,0,1,119.385323,223.910370)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-3.826834,0)">
+                <g>
                   <line
                     id="g-svg-47"
                     fill="none"
-                    x1="3.826834323650897"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-3.826834323650897"
                     y2="9.238795325112868"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -455,19 +413,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-48"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-48" fill="none" class="axis-label-group">
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,79.289322,79.289322)"
+                transform="matrix(1,0,0,1,79.289322,79.289322)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -491,10 +444,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(0.923880,-0.382683,0.382683,0.923880,111.731659,57.612045)"
+                transform="matrix(1,0,0,1,111.731659,57.612045)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.923880,-0.382683,0.382683,0.923880,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -521,7 +474,7 @@
                 transform="matrix(1,0,0,1,150,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -545,10 +498,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.923880,0.382683,-0.382683,0.923880,188.268341,57.612045)"
+                transform="matrix(1,0,0,1,188.268341,57.612045)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.923880,0.382683,-0.382683,0.923880,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -572,10 +525,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,220.710678,79.289322)"
+                transform="matrix(1,0,0,1,220.710678,79.289322)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -599,10 +552,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.382683,0.923880,-0.923880,0.382683,242.387955,111.731659)"
+                transform="matrix(1,0,0,1,242.387955,111.731659)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.382683,0.923880,-0.923880,0.382683,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -626,10 +579,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,250,150)"
+                transform="matrix(1,0,0,1,250,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -653,10 +606,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(0.382683,-0.923880,0.923880,0.382683,242.387955,188.268341)"
+                transform="matrix(1,0,0,1,242.387955,188.268341)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.382683,-0.923880,0.923880,0.382683,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -680,10 +633,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,220.710678,220.710678)"
+                transform="matrix(1,0,0,1,220.710678,220.710678)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -707,10 +660,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.923880,-0.382683,0.382683,0.923880,188.268341,242.387955)"
+                transform="matrix(1,0,0,1,188.268341,242.387955)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.923880,-0.382683,0.382683,0.923880,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -734,10 +687,10 @@
               <g
                 id="g-svg-59"
                 fill="none"
-                transform="matrix(1,-0,0,1,150,250)"
+                transform="matrix(1,0,0,1,150,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -761,10 +714,10 @@
               <g
                 id="g-svg-60"
                 fill="none"
-                transform="matrix(0.923880,0.382683,-0.382683,0.923880,111.731659,242.387955)"
+                transform="matrix(1,0,0,1,111.731659,242.387955)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.923880,0.382683,-0.382683,0.923880,0,0)">
                   <text
                     id="g-svg-72"
                     fill="rgba(0,0,0,1)"
@@ -787,12 +740,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-73"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-73" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcBasis4.svg b/__tests__/integration/snapshots/AxisArcBasis4.svg
index 5d6dd71fd..4aaf6fa0f 100644
--- a/__tests__/integration/snapshots/AxisArcBasis4.svg
+++ b/__tests__/integration/snapshots/AxisArcBasis4.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-74"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-75" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-74" fill="none" width="400" height="300">
+        <g id="g-svg-75" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,80.717964)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,80.71796769724492 L 190,80.71796769724492"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000004,219.2820323027551 L 110.00000000000004,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,80.717964)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,60 +142,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 109.99999999999997,80.71796769724492 L 109.99999999999997,80.71796769724492"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,255,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -230,13 +189,13 @@
                 transform="matrix(1,0,0,1,190,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="5.000000000000001"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5.000000000000001"
                     y2="8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -250,13 +209,13 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -270,13 +229,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -290,14 +249,14 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
-                    x1="8.660254037844387"
-                    y1="4.999999999999999"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844387"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -310,14 +269,14 @@
                 transform="matrix(1,0,0,1,190,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
-                    x1="5.000000000000001"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000001"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -330,14 +289,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -350,14 +309,14 @@
                 transform="matrix(1,0,0,1,110,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
                     x1="0"
-                    y1="8.66025403784439"
+                    y1="0"
                     x2="4.999999999999995"
-                    y2="0"
+                    y2="-8.66025403784439"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -370,14 +329,14 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -390,14 +349,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -410,7 +369,7 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -430,7 +389,7 @@
                 transform="matrix(1,0,0,1,110,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -445,19 +404,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-46"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-46" fill="none" class="axis-label-group">
               <g
                 id="g-svg-47"
                 fill="none"
                 transform="matrix(1,0,0,1,150,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -481,10 +435,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,195,72.057716)"
+                transform="matrix(1,0,0,1,195,72.057716)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -508,10 +462,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,227.942291,105)"
+                transform="matrix(1,0,0,1,227.942291,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -535,10 +489,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,240,150)"
+                transform="matrix(1,0,0,1,240,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -562,10 +516,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,227.942291,195)"
+                transform="matrix(1,0,0,1,227.942291,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -589,10 +543,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,195,227.942291)"
+                transform="matrix(1,0,0,1,195,227.942291)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -619,7 +573,7 @@
                 transform="matrix(1,0,0,1,150,240)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -643,10 +597,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,105,227.942291)"
+                transform="matrix(1,0,0,1,105,227.942291)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -670,10 +624,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,72.057716,195)"
+                transform="matrix(1,0,0,1,72.057716,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -697,10 +651,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,60,150)"
+                transform="matrix(1,0,0,1,60,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -724,10 +678,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,72.057716,105)"
+                transform="matrix(1,0,0,1,72.057716,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -751,10 +705,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,105,72.057716)"
+                transform="matrix(1,0,0,1,105,72.057716)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -777,12 +731,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-71" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection1.svg b/__tests__/integration/snapshots/AxisArcDirection1.svg
index da1de46bc..7a050d772 100644
--- a/__tests__/integration/snapshots/AxisArcDirection1.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection1.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-52"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-52" fill="none" width="400" height="300">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,60 +98,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -186,13 +145,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -206,13 +165,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -226,14 +185,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -246,14 +205,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -266,14 +225,14 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -286,14 +245,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -306,7 +265,7 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
                 transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -357,10 +311,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,188.890869,111.109123)"
+                transform="matrix(1,0,0,1,188.890869,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -384,10 +338,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,205,150)"
+                transform="matrix(1,0,0,1,205,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +365,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,188.890869,188.890869)"
+                transform="matrix(1,0,0,1,188.890869,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -441,7 +395,7 @@
                 transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -465,10 +419,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,111.109123,188.890869)"
+                transform="matrix(1,0,0,1,111.109123,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -492,10 +446,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,95,150)"
+                transform="matrix(1,0,0,1,95,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +473,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,111.109123,111.109123)"
+                transform="matrix(1,0,0,1,111.109123,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -545,12 +499,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-51"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-51" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection10.svg b/__tests__/integration/snapshots/AxisArcDirection10.svg
index 1e1f39b66..12c22af3e 100644
--- a/__tests__/integration/snapshots/AxisArcDirection10.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection10.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-42"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-43" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-42" fill="none" width="400" height="300">
+        <g id="g-svg-43" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,60 +76,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-11" fill="none" class="axis-main-group">
+            <g id="g-svg-12" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-15"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-15" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-16"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-22"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -164,13 +123,13 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-23"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -184,14 +143,14 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
-                    x1="8.660254037844387"
-                    y1="4.999999999999999"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844387"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -204,14 +163,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -224,14 +183,14 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -244,7 +203,7 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
@@ -259,19 +218,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-label-group">
               <g
                 id="g-svg-29"
                 fill="none"
                 transform="matrix(1,0,0,1,150,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-35"
                     fill="rgba(0,0,0,1)"
@@ -297,7 +251,7 @@
                 transform="matrix(1,0,0,1,227.942291,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-36"
                     fill="rgba(0,0,0,1)"
@@ -323,7 +277,7 @@
                 transform="matrix(1,0,0,1,227.942291,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -349,7 +303,7 @@
                 transform="matrix(1,0,0,1,150,240)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -375,7 +329,7 @@
                 transform="matrix(1,0,0,1,72.057716,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -401,7 +355,7 @@
                 transform="matrix(1,0,0,1,72.057716,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-40"
                     fill="rgba(0,0,0,1)"
@@ -423,12 +377,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-41" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection11.svg b/__tests__/integration/snapshots/AxisArcDirection11.svg
index 5e3e58cc8..290d5f175 100644
--- a/__tests__/integration/snapshots/AxisArcDirection11.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection11.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-42"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-43" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-42" fill="none" width="400" height="300">
+        <g id="g-svg-43" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,61 +76,41 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-11" fill="none" class="axis-main-group">
+            <g id="g-svg-12" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-15"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-15" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-16"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-22"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -164,14 +123,14 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-23"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -184,7 +143,7 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
@@ -204,7 +163,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
@@ -224,13 +183,13 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -244,14 +203,14 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="8.660254037844386"
-                    y1="5.000000000000001"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844386"
+                    y2="-5.000000000000001"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -259,19 +218,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-label-group">
               <g
                 id="g-svg-29"
                 fill="none"
                 transform="matrix(1,0,0,1,150,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-35"
                     fill="rgba(0,0,0,1)"
@@ -297,7 +251,7 @@
                 transform="matrix(1,0,0,1,210.621780,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-36"
                     fill="rgba(0,0,0,1)"
@@ -323,7 +277,7 @@
                 transform="matrix(1,0,0,1,210.621780,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -349,7 +303,7 @@
                 transform="matrix(1,0,0,1,150,220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -375,7 +329,7 @@
                 transform="matrix(1,0,0,1,89.378220,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -401,7 +355,7 @@
                 transform="matrix(1,0,0,1,89.378220,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-40"
                     fill="rgba(0,0,0,1)"
@@ -423,12 +377,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-41" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection12.svg b/__tests__/integration/snapshots/AxisArcDirection12.svg
index 6e84d1b39..fb69bc9dd 100644
--- a/__tests__/integration/snapshots/AxisArcDirection12.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection12.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-42"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-43" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-42" fill="none" width="400" height="300">
+        <g id="g-svg-43" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,61 +76,41 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-11" fill="none" class="axis-main-group">
+            <g id="g-svg-12" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-15"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-15" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-16"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-22"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -164,14 +123,14 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-23"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -184,7 +143,7 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
@@ -204,7 +163,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
@@ -224,13 +183,13 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -244,14 +203,14 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="8.660254037844386"
-                    y1="5.000000000000001"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844386"
+                    y2="-5.000000000000001"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -259,19 +218,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-label-group">
               <g
                 id="g-svg-29"
                 fill="none"
                 transform="matrix(1,0,0,1,150,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-35"
                     fill="rgba(0,0,0,1)"
@@ -297,7 +251,7 @@
                 transform="matrix(1,0,0,1,236.602539,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-36"
                     fill="rgba(0,0,0,1)"
@@ -323,7 +277,7 @@
                 transform="matrix(1,0,0,1,236.602539,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -349,7 +303,7 @@
                 transform="matrix(1,0,0,1,150,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -375,7 +329,7 @@
                 transform="matrix(1,0,0,1,63.397461,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -401,7 +355,7 @@
                 transform="matrix(1,0,0,1,63.397461,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-40"
                     fill="rgba(0,0,0,1)"
@@ -423,12 +377,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-41" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection13.svg b/__tests__/integration/snapshots/AxisArcDirection13.svg
index 985b2a253..779722e4a 100644
--- a/__tests__/integration/snapshots/AxisArcDirection13.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection13.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-42"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-43" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-42" fill="none" width="400" height="300">
+        <g id="g-svg-43" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,60 +76,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-11" fill="none" class="axis-main-group">
+            <g id="g-svg-12" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-15"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-15" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-16"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-22"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -164,13 +123,13 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-23"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -184,14 +143,14 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
-                    x1="8.660254037844387"
-                    y1="4.999999999999999"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844387"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -204,14 +163,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -224,14 +183,14 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -244,7 +203,7 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
@@ -259,19 +218,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-label-group">
               <g
                 id="g-svg-29"
                 fill="none"
                 transform="matrix(1,0,0,1,150,90)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-35"
                     fill="rgba(0,0,0,1)"
@@ -295,10 +249,10 @@
               <g
                 id="g-svg-30"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,201.961517,120)"
+                transform="matrix(1,0,0,1,201.961517,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-36"
                     fill="rgba(0,0,0,1)"
@@ -322,10 +276,10 @@
               <g
                 id="g-svg-31"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,201.961517,180)"
+                transform="matrix(1,0,0,1,201.961517,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -352,7 +306,7 @@
                 transform="matrix(1,0,0,1,150,210)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -376,10 +330,10 @@
               <g
                 id="g-svg-33"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,98.038475,180)"
+                transform="matrix(1,0,0,1,98.038475,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -403,10 +357,10 @@
               <g
                 id="g-svg-34"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,98.038475,120)"
+                transform="matrix(1,0,0,1,98.038475,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-40"
                     fill="rgba(0,0,0,1)"
@@ -429,12 +383,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-41" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection14.svg b/__tests__/integration/snapshots/AxisArcDirection14.svg
index 423614b61..0962f6a89 100644
--- a/__tests__/integration/snapshots/AxisArcDirection14.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection14.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-42"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-43" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-42" fill="none" width="400" height="300">
+        <g id="g-svg-43" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,60 +76,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-11" fill="none" class="axis-main-group">
+            <g id="g-svg-12" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-15"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-15" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-16"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-22"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -164,13 +123,13 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-23"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -184,14 +143,14 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
-                    x1="8.660254037844387"
-                    y1="4.999999999999999"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844387"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -204,14 +163,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -224,14 +183,14 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -244,7 +203,7 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
@@ -259,19 +218,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-label-group">
               <g
                 id="g-svg-29"
                 fill="none"
                 transform="matrix(1,0,0,1,150,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-35"
                     fill="rgba(0,0,0,1)"
@@ -295,10 +249,10 @@
               <g
                 id="g-svg-30"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,227.942291,105)"
+                transform="matrix(1,0,0,1,227.942291,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-36"
                     fill="rgba(0,0,0,1)"
@@ -322,10 +276,10 @@
               <g
                 id="g-svg-31"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,227.942291,195)"
+                transform="matrix(1,0,0,1,227.942291,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -352,7 +306,7 @@
                 transform="matrix(1,0,0,1,150,240)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -376,10 +330,10 @@
               <g
                 id="g-svg-33"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,72.057716,195)"
+                transform="matrix(1,0,0,1,72.057716,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -403,10 +357,10 @@
               <g
                 id="g-svg-34"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,72.057716,105)"
+                transform="matrix(1,0,0,1,72.057716,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-40"
                     fill="rgba(0,0,0,1)"
@@ -429,12 +383,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-41" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection15.svg b/__tests__/integration/snapshots/AxisArcDirection15.svg
index 81219c5c0..cc34fc540 100644
--- a/__tests__/integration/snapshots/AxisArcDirection15.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection15.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-42"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-43" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-42" fill="none" width="400" height="300">
+        <g id="g-svg-43" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,61 +76,41 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-11" fill="none" class="axis-main-group">
+            <g id="g-svg-12" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-15"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-15" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-16"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-22"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -164,14 +123,14 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-23"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -184,7 +143,7 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
@@ -204,7 +163,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
@@ -224,13 +183,13 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -244,14 +203,14 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="8.660254037844386"
-                    y1="5.000000000000001"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844386"
+                    y2="-5.000000000000001"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -259,19 +218,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-label-group">
               <g
                 id="g-svg-29"
                 fill="none"
                 transform="matrix(1,0,0,1,150,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-35"
                     fill="rgba(0,0,0,1)"
@@ -295,10 +249,10 @@
               <g
                 id="g-svg-30"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,210.621780,115)"
+                transform="matrix(1,0,0,1,210.621780,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-36"
                     fill="rgba(0,0,0,1)"
@@ -322,10 +276,10 @@
               <g
                 id="g-svg-31"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,210.621780,185)"
+                transform="matrix(1,0,0,1,210.621780,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -352,7 +306,7 @@
                 transform="matrix(1,0,0,1,150,220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -376,10 +330,10 @@
               <g
                 id="g-svg-33"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,89.378220,185)"
+                transform="matrix(1,0,0,1,89.378220,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -403,10 +357,10 @@
               <g
                 id="g-svg-34"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,89.378220,115)"
+                transform="matrix(1,0,0,1,89.378220,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-40"
                     fill="rgba(0,0,0,1)"
@@ -429,12 +383,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-41" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection16.svg b/__tests__/integration/snapshots/AxisArcDirection16.svg
index 96b6ec263..72b9c1acd 100644
--- a/__tests__/integration/snapshots/AxisArcDirection16.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection16.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-42"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-43" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-42" fill="none" width="400" height="300">
+        <g id="g-svg-43" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,61 +76,41 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-11" fill="none" class="axis-main-group">
+            <g id="g-svg-12" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-15"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-15" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-16"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-22"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -164,14 +123,14 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-23"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -184,7 +143,7 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
@@ -204,7 +163,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
@@ -224,13 +183,13 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -244,14 +203,14 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="8.660254037844386"
-                    y1="5.000000000000001"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844386"
+                    y2="-5.000000000000001"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -259,19 +218,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-label-group">
               <g
                 id="g-svg-29"
                 fill="none"
                 transform="matrix(1,0,0,1,150,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-35"
                     fill="rgba(0,0,0,1)"
@@ -295,10 +249,10 @@
               <g
                 id="g-svg-30"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,236.602539,100)"
+                transform="matrix(1,0,0,1,236.602539,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-36"
                     fill="rgba(0,0,0,1)"
@@ -322,10 +276,10 @@
               <g
                 id="g-svg-31"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,236.602539,200)"
+                transform="matrix(1,0,0,1,236.602539,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -352,7 +306,7 @@
                 transform="matrix(1,0,0,1,150,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -376,10 +330,10 @@
               <g
                 id="g-svg-33"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,63.397461,200)"
+                transform="matrix(1,0,0,1,63.397461,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -403,10 +357,10 @@
               <g
                 id="g-svg-34"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,63.397461,100)"
+                transform="matrix(1,0,0,1,63.397461,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-40"
                     fill="rgba(0,0,0,1)"
@@ -429,12 +383,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-41" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection17.svg b/__tests__/integration/snapshots/AxisArcDirection17.svg
index 666618eeb..324e03e01 100644
--- a/__tests__/integration/snapshots/AxisArcDirection17.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection17.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-42"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-43" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-42" fill="none" width="400" height="300">
+        <g id="g-svg-43" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,80.717964)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,80.71796769724492 L 190,80.71796769724492"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000004,219.2820323027551 L 110.00000000000004,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,80.717964)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,60 +142,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 109.99999999999997,80.71796769724492 L 109.99999999999997,80.71796769724492"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -230,13 +189,13 @@
                 transform="matrix(1,0,0,1,190,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="5.000000000000001"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5.000000000000001"
                     y2="8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -250,13 +209,13 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -270,13 +229,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -290,14 +249,14 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
-                    x1="8.660254037844387"
-                    y1="4.999999999999999"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844387"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -310,14 +269,14 @@
                 transform="matrix(1,0,0,1,190,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
-                    x1="5.000000000000001"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000001"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -330,14 +289,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -350,14 +309,14 @@
                 transform="matrix(1,0,0,1,110,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
                     x1="0"
-                    y1="8.66025403784439"
+                    y1="0"
                     x2="4.999999999999995"
-                    y2="0"
+                    y2="-8.66025403784439"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -370,14 +329,14 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -390,14 +349,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -410,7 +369,7 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -430,7 +389,7 @@
                 transform="matrix(1,0,0,1,110,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -445,19 +404,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-46"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-46" fill="none" class="axis-label-group">
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,80)"
+                transform="matrix(1,0,0,1,150,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -480,10 +434,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,185,89.378220)"
+                transform="matrix(1,0,0,1,185,89.378220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -506,10 +460,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,210.621780,115)"
+                transform="matrix(1,0,0,1,210.621780,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -535,7 +489,7 @@
                 transform="matrix(1,0,0,1,220,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -558,10 +512,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,210.621780,185)"
+                transform="matrix(1,0,0,1,210.621780,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -584,10 +538,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,185,210.621780)"
+                transform="matrix(1,0,0,1,185,210.621780)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -610,10 +564,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,220)"
+                transform="matrix(1,0,0,1,150,220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -636,10 +590,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,115,210.621780)"
+                transform="matrix(1,0,0,1,115,210.621780)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -662,10 +616,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,89.378220,185)"
+                transform="matrix(1,0,0,1,89.378220,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -691,7 +645,7 @@
                 transform="matrix(1,0,0,1,80,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -714,10 +668,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,89.378220,115)"
+                transform="matrix(1,0,0,1,89.378220,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -740,10 +694,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,115,89.378220)"
+                transform="matrix(1,0,0,1,115,89.378220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -765,12 +719,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-71" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection18.svg b/__tests__/integration/snapshots/AxisArcDirection18.svg
index 6ce7ef434..87e2560c0 100644
--- a/__tests__/integration/snapshots/AxisArcDirection18.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection18.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-72"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-72" fill="none" width="400" height="300">
+        <g id="g-svg-73" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,80.717964)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,80.71796769724492 L 190,80.71796769724492"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000004,219.2820323027551 L 110.00000000000004,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,80.717964)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,60 +142,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 109.99999999999997,80.71796769724492 L 109.99999999999997,80.71796769724492"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -230,13 +189,13 @@
                 transform="matrix(1,0,0,1,190,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="5.000000000000001"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5.000000000000001"
                     y2="8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -250,13 +209,13 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -270,13 +229,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -290,14 +249,14 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
-                    x1="8.660254037844387"
-                    y1="4.999999999999999"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844387"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -310,14 +269,14 @@
                 transform="matrix(1,0,0,1,190,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
-                    x1="5.000000000000001"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000001"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -330,14 +289,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -350,14 +309,14 @@
                 transform="matrix(1,0,0,1,110,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
                     x1="0"
-                    y1="8.66025403784439"
+                    y1="0"
                     x2="4.999999999999995"
-                    y2="0"
+                    y2="-8.66025403784439"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -370,14 +329,14 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -390,14 +349,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -410,7 +369,7 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -430,7 +389,7 @@
                 transform="matrix(1,0,0,1,110,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -445,19 +404,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-46"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-46" fill="none" class="axis-label-group">
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,70)"
+                transform="matrix(1,0,0,1,150,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -480,10 +434,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,190,80.717964)"
+                transform="matrix(1,0,0,1,190,80.717964)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -506,10 +460,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,219.282028,110)"
+                transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -535,7 +489,7 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -558,10 +512,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,219.282028,190)"
+                transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -584,10 +538,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,190,219.282028)"
+                transform="matrix(1,0,0,1,190,219.282028)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -610,10 +564,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,230)"
+                transform="matrix(1,0,0,1,150,230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -636,10 +590,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,110,219.282028)"
+                transform="matrix(1,0,0,1,110,219.282028)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -662,10 +616,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,80.717964,190)"
+                transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -691,7 +645,7 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -714,10 +668,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,80.717964,110)"
+                transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -740,10 +694,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,110,80.717964)"
+                transform="matrix(1,0,0,1,110,80.717964)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -765,12 +719,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-71" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection19.svg b/__tests__/integration/snapshots/AxisArcDirection19.svg
index e7a60e298..3970166a3 100644
--- a/__tests__/integration/snapshots/AxisArcDirection19.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection19.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-72"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-72" fill="none" width="400" height="300">
+        <g id="g-svg-73" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,80.717964)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,80.71796769724492 L 190,80.71796769724492"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000004,219.2820323027551 L 110.00000000000004,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,80.717964)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,61 +142,41 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 109.99999999999997,80.71796769724492 L 109.99999999999997,80.71796769724492"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -230,14 +189,14 @@
                 transform="matrix(1,0,0,1,190,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844386"
+                    y1="0"
                     x2="5.000000000000001"
-                    y2="0"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -250,14 +209,14 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -270,7 +229,7 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -290,7 +249,7 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -310,7 +269,7 @@
                 transform="matrix(1,0,0,1,190,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -330,7 +289,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -350,13 +309,13 @@
                 transform="matrix(1,0,0,1,110,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
-                    x1="4.999999999999995"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4.999999999999995"
                     y2="8.66025403784439"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -370,13 +329,13 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -390,13 +349,13 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -410,14 +369,14 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
-                    x1="8.660254037844386"
-                    y1="5.000000000000001"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844386"
+                    y2="-5.000000000000001"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -430,14 +389,14 @@
                 transform="matrix(1,0,0,1,110,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
-                    x1="5.000000000000004"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000004"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -445,19 +404,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-46"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-46" fill="none" class="axis-label-group">
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,70)"
+                transform="matrix(1,0,0,1,150,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -480,10 +434,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,190,80.717964)"
+                transform="matrix(1,0,0,1,190,80.717964)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -506,10 +460,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,219.282028,110)"
+                transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -535,7 +489,7 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -558,10 +512,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,219.282028,190)"
+                transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -584,10 +538,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,190,219.282028)"
+                transform="matrix(1,0,0,1,190,219.282028)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -610,10 +564,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,230)"
+                transform="matrix(1,0,0,1,150,230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -636,10 +590,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,110,219.282028)"
+                transform="matrix(1,0,0,1,110,219.282028)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -662,10 +616,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,80.717964,190)"
+                transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -691,7 +645,7 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -714,10 +668,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,80.717964,110)"
+                transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -740,10 +694,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,110,80.717964)"
+                transform="matrix(1,0,0,1,110,80.717964)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -765,12 +719,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-71" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection2.svg b/__tests__/integration/snapshots/AxisArcDirection2.svg
index e4026218e..9cb9e6206 100644
--- a/__tests__/integration/snapshots/AxisArcDirection2.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection2.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-52"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-52" fill="none" width="400" height="300">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,60 +98,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -186,13 +145,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -206,13 +165,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -226,14 +185,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -246,14 +205,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -266,14 +225,14 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -286,14 +245,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -306,7 +265,7 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,95)"
+                transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -356,10 +310,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,188.890869,111.109123)"
+                transform="matrix(1,0,0,1,188.890869,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -385,7 +339,7 @@
                 transform="matrix(1,0,0,1,205,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -408,10 +362,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,188.890869,188.890869)"
+                transform="matrix(1,0,0,1,188.890869,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -434,10 +388,10 @@
               <g
                 id="g-svg-39"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,205)"
+                transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -460,10 +414,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,111.109123,188.890869)"
+                transform="matrix(1,0,0,1,111.109123,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -489,7 +443,7 @@
                 transform="matrix(1,0,0,1,95,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -512,10 +466,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,111.109123,111.109123)"
+                transform="matrix(1,0,0,1,111.109123,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -537,12 +491,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-51"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-51" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection20.svg b/__tests__/integration/snapshots/AxisArcDirection20.svg
index 7c1257b44..690965584 100644
--- a/__tests__/integration/snapshots/AxisArcDirection20.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection20.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-72"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-72" fill="none" width="400" height="300">
+        <g id="g-svg-73" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,80.717964)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,80.71796769724492 L 190,80.71796769724492"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000004,219.2820323027551 L 110.00000000000004,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,80.717964)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,61 +142,41 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 109.99999999999997,80.71796769724492 L 109.99999999999997,80.71796769724492"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -230,14 +189,14 @@
                 transform="matrix(1,0,0,1,190,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844386"
+                    y1="0"
                     x2="5.000000000000001"
-                    y2="0"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -250,14 +209,14 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -270,7 +229,7 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -290,7 +249,7 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -310,7 +269,7 @@
                 transform="matrix(1,0,0,1,190,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -330,7 +289,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -350,13 +309,13 @@
                 transform="matrix(1,0,0,1,110,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
-                    x1="4.999999999999995"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4.999999999999995"
                     y2="8.66025403784439"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -370,13 +329,13 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -390,13 +349,13 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -410,14 +369,14 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
-                    x1="8.660254037844386"
-                    y1="5.000000000000001"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844386"
+                    y2="-5.000000000000001"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -430,14 +389,14 @@
                 transform="matrix(1,0,0,1,110,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
-                    x1="5.000000000000004"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000004"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -445,19 +404,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-46"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-46" fill="none" class="axis-label-group">
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,60)"
+                transform="matrix(1,0,0,1,150,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -480,10 +434,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,195,72.057716)"
+                transform="matrix(1,0,0,1,195,72.057716)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -506,10 +460,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,227.942291,105)"
+                transform="matrix(1,0,0,1,227.942291,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -535,7 +489,7 @@
                 transform="matrix(1,0,0,1,240,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -558,10 +512,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,227.942291,195)"
+                transform="matrix(1,0,0,1,227.942291,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -584,10 +538,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,195,227.942291)"
+                transform="matrix(1,0,0,1,195,227.942291)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -610,10 +564,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,240)"
+                transform="matrix(1,0,0,1,150,240)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -636,10 +590,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,105,227.942291)"
+                transform="matrix(1,0,0,1,105,227.942291)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -662,10 +616,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,72.057716,195)"
+                transform="matrix(1,0,0,1,72.057716,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -691,7 +645,7 @@
                 transform="matrix(1,0,0,1,60,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -714,10 +668,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,72.057716,105)"
+                transform="matrix(1,0,0,1,72.057716,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -740,10 +694,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,105,72.057716)"
+                transform="matrix(1,0,0,1,105,72.057716)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -765,12 +719,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-71" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection3.svg b/__tests__/integration/snapshots/AxisArcDirection3.svg
index 8665b7cb9..c030d347f 100644
--- a/__tests__/integration/snapshots/AxisArcDirection3.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection3.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-52"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-52" fill="none" width="400" height="300">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,60 +98,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -186,13 +145,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -206,13 +165,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -226,14 +185,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -246,14 +205,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -266,14 +225,14 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -286,14 +245,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -306,7 +265,7 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
                 transform="matrix(1,0,0,1,150,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -359,7 +313,7 @@
                 transform="matrix(1,0,0,1,217.175140,82.824852)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -385,7 +339,7 @@
                 transform="matrix(1,0,0,1,245,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -411,7 +365,7 @@
                 transform="matrix(1,0,0,1,217.175140,217.175140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -437,7 +391,7 @@
                 transform="matrix(1,0,0,1,150,245)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -463,7 +417,7 @@
                 transform="matrix(1,0,0,1,82.824852,217.175140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -489,7 +443,7 @@
                 transform="matrix(1,0,0,1,55,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -515,7 +469,7 @@
                 transform="matrix(1,0,0,1,82.824852,82.824852)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -537,12 +491,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-51"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-51" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection4.svg b/__tests__/integration/snapshots/AxisArcDirection4.svg
index a623bc795..ca54661ed 100644
--- a/__tests__/integration/snapshots/AxisArcDirection4.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection4.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-52"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-52" fill="none" width="400" height="300">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,61 +98,41 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -186,14 +145,14 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.0710678118654755"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -206,7 +165,7 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
@@ -226,7 +185,7 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
@@ -246,7 +205,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
@@ -266,13 +225,13 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -286,13 +245,13 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -306,14 +265,14 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
-                    x1="7.071067811865477"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.071067811865477"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,85)"
+                transform="matrix(1,0,0,1,150,85)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -356,10 +310,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,195.961945,104.038055)"
+                transform="matrix(1,0,0,1,195.961945,104.038055)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -385,7 +339,7 @@
                 transform="matrix(1,0,0,1,215,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -408,10 +362,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,195.961945,195.961945)"
+                transform="matrix(1,0,0,1,195.961945,195.961945)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -434,10 +388,10 @@
               <g
                 id="g-svg-39"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,215)"
+                transform="matrix(1,0,0,1,150,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -460,10 +414,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,104.038055,195.961945)"
+                transform="matrix(1,0,0,1,104.038055,195.961945)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -489,7 +443,7 @@
                 transform="matrix(1,0,0,1,85,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -512,10 +466,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,104.038055,104.038055)"
+                transform="matrix(1,0,0,1,104.038055,104.038055)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -537,12 +491,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-51"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-51" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection5.svg b/__tests__/integration/snapshots/AxisArcDirection5.svg
index 0a8fa93e2..aab9d4637 100644
--- a/__tests__/integration/snapshots/AxisArcDirection5.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection5.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-52"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-52" fill="none" width="400" height="300">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,80.717964)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,80.71796769724492 L 190,80.71796769724492"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000004,219.2820323027551 L 110.00000000000004,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,80.717964)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,61 +142,41 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 109.99999999999997,80.71796769724492 L 109.99999999999997,80.71796769724492"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -230,14 +189,14 @@
                 transform="matrix(1,0,0,1,190,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844386"
+                    y1="0"
                     x2="5.000000000000001"
-                    y2="0"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -250,14 +209,14 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -270,7 +229,7 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -290,7 +249,7 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -310,7 +269,7 @@
                 transform="matrix(1,0,0,1,190,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -330,7 +289,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -350,13 +309,13 @@
                 transform="matrix(1,0,0,1,110,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
-                    x1="4.999999999999995"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4.999999999999995"
                     y2="8.66025403784439"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -370,13 +329,13 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -390,13 +349,13 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -410,14 +369,14 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
-                    x1="8.660254037844386"
-                    y1="5.000000000000001"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844386"
+                    y2="-5.000000000000001"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -430,14 +389,14 @@
                 transform="matrix(1,0,0,1,110,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
-                    x1="5.000000000000004"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000004"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -445,19 +404,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-46"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-46" fill="none" class="axis-label-group">
               <g
                 id="g-svg-47"
                 fill="none"
                 transform="matrix(1,0,0,1,150,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -481,10 +435,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,200,63.397461)"
+                transform="matrix(1,0,0,1,200,63.397461)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -508,10 +462,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,236.602539,100)"
+                transform="matrix(1,0,0,1,236.602539,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -535,10 +489,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,250,150)"
+                transform="matrix(1,0,0,1,250,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -562,10 +516,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,236.602539,200)"
+                transform="matrix(1,0,0,1,236.602539,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -589,10 +543,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,200,236.602539)"
+                transform="matrix(1,0,0,1,200,236.602539)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -619,7 +573,7 @@
                 transform="matrix(1,0,0,1,150,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -643,10 +597,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,100,236.602539)"
+                transform="matrix(1,0,0,1,100,236.602539)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -670,10 +624,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,63.397461,200)"
+                transform="matrix(1,0,0,1,63.397461,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -697,10 +651,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,50,150)"
+                transform="matrix(1,0,0,1,50,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -724,10 +678,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,63.397461,100)"
+                transform="matrix(1,0,0,1,63.397461,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -751,10 +705,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,100,63.397461)"
+                transform="matrix(1,0,0,1,100,63.397461)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -777,12 +731,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-71" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection6.svg b/__tests__/integration/snapshots/AxisArcDirection6.svg
index 267a87522..fcdd26146 100644
--- a/__tests__/integration/snapshots/AxisArcDirection6.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection6.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-72"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-72" fill="none" width="400" height="300">
+        <g id="g-svg-73" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,80.717964)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,80.71796769724492 L 190,80.71796769724492"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000004,219.2820323027551 L 110.00000000000004,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,80.717964)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,61 +142,41 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 109.99999999999997,80.71796769724492 L 109.99999999999997,80.71796769724492"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -230,14 +189,14 @@
                 transform="matrix(1,0,0,1,190,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844386"
+                    y1="0"
                     x2="5.000000000000001"
-                    y2="0"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -250,14 +209,14 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -270,7 +229,7 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -290,7 +249,7 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -310,7 +269,7 @@
                 transform="matrix(1,0,0,1,190,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -330,7 +289,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -350,13 +309,13 @@
                 transform="matrix(1,0,0,1,110,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
-                    x1="4.999999999999995"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4.999999999999995"
                     y2="8.66025403784439"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -370,13 +329,13 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -390,13 +349,13 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -410,14 +369,14 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
-                    x1="8.660254037844386"
-                    y1="5.000000000000001"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844386"
+                    y2="-5.000000000000001"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -430,14 +389,14 @@
                 transform="matrix(1,0,0,1,110,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
-                    x1="5.000000000000004"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000004"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -445,19 +404,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-46"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-46" fill="none" class="axis-label-group">
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,50)"
+                transform="matrix(1,0,0,1,150,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -480,10 +434,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,200,63.397461)"
+                transform="matrix(1,0,0,1,200,63.397461)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -506,10 +460,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,236.602539,100)"
+                transform="matrix(1,0,0,1,236.602539,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -535,7 +489,7 @@
                 transform="matrix(1,0,0,1,250,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -558,10 +512,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,236.602539,200)"
+                transform="matrix(1,0,0,1,236.602539,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -584,10 +538,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,200,236.602539)"
+                transform="matrix(1,0,0,1,200,236.602539)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -610,10 +564,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,250)"
+                transform="matrix(1,0,0,1,150,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -636,10 +590,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,100,236.602539)"
+                transform="matrix(1,0,0,1,100,236.602539)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -662,10 +616,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,63.397461,200)"
+                transform="matrix(1,0,0,1,63.397461,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -691,7 +645,7 @@
                 transform="matrix(1,0,0,1,50,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -714,10 +668,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,63.397461,100)"
+                transform="matrix(1,0,0,1,63.397461,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -740,10 +694,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,100,63.397461)"
+                transform="matrix(1,0,0,1,100,63.397461)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -765,12 +719,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-71" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection7.svg b/__tests__/integration/snapshots/AxisArcDirection7.svg
index 599c5d491..f64937078 100644
--- a/__tests__/integration/snapshots/AxisArcDirection7.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection7.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-72"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-72" fill="none" width="400" height="300">
+        <g id="g-svg-73" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,80.717964)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,80.71796769724492 L 190,80.71796769724492"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000004,219.2820323027551 L 110.00000000000004,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,80.717964)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,61 +142,41 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 109.99999999999997,80.71796769724492 L 109.99999999999997,80.71796769724492"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -230,14 +189,14 @@
                 transform="matrix(1,0,0,1,190,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844386"
+                    y1="0"
                     x2="5.000000000000001"
-                    y2="0"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -250,14 +209,14 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -270,7 +229,7 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -290,7 +249,7 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -310,7 +269,7 @@
                 transform="matrix(1,0,0,1,190,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -330,7 +289,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -350,13 +309,13 @@
                 transform="matrix(1,0,0,1,110,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
-                    x1="4.999999999999995"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4.999999999999995"
                     y2="8.66025403784439"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -370,13 +329,13 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -390,13 +349,13 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -410,14 +369,14 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
-                    x1="8.660254037844386"
-                    y1="5.000000000000001"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844386"
+                    y2="-5.000000000000001"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -430,14 +389,14 @@
                 transform="matrix(1,0,0,1,110,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
-                    x1="5.000000000000004"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000004"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -445,19 +404,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-46"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-46" fill="none" class="axis-label-group">
               <g
                 id="g-svg-47"
                 fill="none"
                 transform="matrix(1,0,0,1,150,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -483,7 +437,7 @@
                 transform="matrix(1,0,0,1,200,63.397461)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -509,7 +463,7 @@
                 transform="matrix(1,0,0,1,236.602539,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -535,7 +489,7 @@
                 transform="matrix(1,0,0,1,250,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -561,7 +515,7 @@
                 transform="matrix(1,0,0,1,236.602539,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -587,7 +541,7 @@
                 transform="matrix(1,0,0,1,200,236.602539)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -613,7 +567,7 @@
                 transform="matrix(1,0,0,1,150,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -639,7 +593,7 @@
                 transform="matrix(1,0,0,1,100,236.602539)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -665,7 +619,7 @@
                 transform="matrix(1,0,0,1,63.397461,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -691,7 +645,7 @@
                 transform="matrix(1,0,0,1,50,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -717,7 +671,7 @@
                 transform="matrix(1,0,0,1,63.397461,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -743,7 +697,7 @@
                 transform="matrix(1,0,0,1,100,63.397461)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -765,12 +719,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-71" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection8.svg b/__tests__/integration/snapshots/AxisArcDirection8.svg
index 96e9d34c2..8998e9557 100644
--- a/__tests__/integration/snapshots/AxisArcDirection8.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection8.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-72"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-72" fill="none" width="400" height="300">
+        <g id="g-svg-73" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,80.717964)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,80.71796769724492 L 190,80.71796769724492"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,219.282028)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,219.28203230275508 L 190,219.28203230275508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,219.282028)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110.00000000000004,219.2820323027551 L 110.00000000000004,219.2820323027551"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,80.717964)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,61 +142,41 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 109.99999999999997,80.71796769724492 L 109.99999999999997,80.71796769724492"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="6.123233995736766e-16"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -230,14 +189,14 @@
                 transform="matrix(1,0,0,1,190,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844386"
+                    y1="0"
                     x2="5.000000000000001"
-                    y2="0"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -250,14 +209,14 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -270,7 +229,7 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -290,7 +249,7 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -310,7 +269,7 @@
                 transform="matrix(1,0,0,1,190,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -330,7 +289,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -350,13 +309,13 @@
                 transform="matrix(1,0,0,1,110,219.282028)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
-                    x1="4.999999999999995"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4.999999999999995"
                     y2="8.66025403784439"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -370,13 +329,13 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -390,13 +349,13 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -410,14 +369,14 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
-                    x1="8.660254037844386"
-                    y1="5.000000000000001"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844386"
+                    y2="-5.000000000000001"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -430,14 +389,14 @@
                 transform="matrix(1,0,0,1,110,80.717964)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
-                    x1="5.000000000000004"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000004"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -445,19 +404,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-46"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-46" fill="none" class="axis-label-group">
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,80)"
+                transform="matrix(1,0,0,1,150,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -480,10 +434,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,185,89.378220)"
+                transform="matrix(1,0,0,1,185,89.378220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -506,10 +460,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,210.621780,115)"
+                transform="matrix(1,0,0,1,210.621780,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -535,7 +489,7 @@
                 transform="matrix(1,0,0,1,220,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -558,10 +512,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,210.621780,185)"
+                transform="matrix(1,0,0,1,210.621780,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -584,10 +538,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,185,210.621780)"
+                transform="matrix(1,0,0,1,185,210.621780)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -610,10 +564,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,150,220)"
+                transform="matrix(1,0,0,1,150,220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -636,10 +590,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,115,210.621780)"
+                transform="matrix(1,0,0,1,115,210.621780)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -662,10 +616,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,89.378220,185)"
+                transform="matrix(1,0,0,1,89.378220,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -691,7 +645,7 @@
                 transform="matrix(1,0,0,1,80,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -714,10 +668,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,89.378220,115)"
+                transform="matrix(1,0,0,1,89.378220,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -740,10 +694,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,115,89.378220)"
+                transform="matrix(1,0,0,1,115,89.378220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -765,12 +719,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-71" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcDirection9.svg b/__tests__/integration/snapshots/AxisArcDirection9.svg
index 0f3687911..045f4d009 100644
--- a/__tests__/integration/snapshots/AxisArcDirection9.svg
+++ b/__tests__/integration/snapshots/AxisArcDirection9.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-72"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-72" fill="none" width="400" height="300">
+        <g id="g-svg-73" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,110)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,110 L 219.2820323027551,110"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,219.282028,190)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 219.2820323027551,190 L 219.2820323027551,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,190)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.7179676972449,190 L 80.7179676972449,190"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80.717964,110)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,60 +76,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 80.71796769724492,110 L 80.71796769724492,110"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-11" fill="none" class="axis-main-group">
+            <g id="g-svg-12" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-15"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-15" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-16"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-22"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -164,13 +123,13 @@
                 transform="matrix(1,0,0,1,219.282028,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,0)">
+                <g>
                   <line
                     id="g-svg-23"
                     fill="none"
-                    x1="8.660254037844387"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.660254037844387"
                     y2="4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -184,14 +143,14 @@
                 transform="matrix(1,0,0,1,219.282028,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.660254,-5)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
-                    x1="8.660254037844387"
-                    y1="4.999999999999999"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.660254037844387"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -204,14 +163,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -224,14 +183,14 @@
                 transform="matrix(1,0,0,1,80.717964,190)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-5)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
                     x1="0"
-                    y1="4.999999999999999"
+                    y1="0"
                     x2="8.660254037844387"
-                    y2="0"
+                    y2="-4.999999999999999"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -244,7 +203,7 @@
                 transform="matrix(1,0,0,1,80.717964,110)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
@@ -259,19 +218,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-label-group">
               <g
                 id="g-svg-29"
                 fill="none"
                 transform="matrix(1,0,0,1,150,90)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-35"
                     fill="rgba(0,0,0,1)"
@@ -297,7 +251,7 @@
                 transform="matrix(1,0,0,1,201.961517,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-36"
                     fill="rgba(0,0,0,1)"
@@ -323,7 +277,7 @@
                 transform="matrix(1,0,0,1,201.961517,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -349,7 +303,7 @@
                 transform="matrix(1,0,0,1,150,210)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -375,7 +329,7 @@
                 transform="matrix(1,0,0,1,98.038475,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -401,7 +355,7 @@
                 transform="matrix(1,0,0,1,98.038475,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-40"
                     fill="rgba(0,0,0,1)"
@@ -423,12 +377,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-41" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcLabelRotate1.svg b/__tests__/integration/snapshots/AxisArcLabelRotate1.svg
index 60362026e..07b3b527e 100644
--- a/__tests__/integration/snapshots/AxisArcLabelRotate1.svg
+++ b/__tests__/integration/snapshots/AxisArcLabelRotate1.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-72"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-72" fill="none" width="400" height="300">
+        <g id="g-svg-73" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,197.022827,85.278641)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 197.02282018339787,85.2786404500042 L 197.02282018339787,85.2786404500042"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,226.084518,125.278641)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 226.0845213036123,125.2786404500042 L 226.0845213036123,125.2786404500042"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,226.084518,174.721359)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 226.0845213036123,174.7213595499958 L 226.0845213036123,174.7213595499958"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,197.022827,214.721359)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 197.02282018339787,214.72135954999578 L 197.02282018339787,214.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,102.977180,214.721359)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 102.97717981660213,214.72135954999578 L 102.97717981660213,214.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,73.915482,174.721359)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 73.91547869638771,174.72135954999578 L 73.91547869638771,174.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,73.915482,125.278641)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 73.91547869638772,125.27864045000419 L 73.91547869638772,125.27864045000419"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,102.977180,85.278641)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,60 +120,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 102.97717981660213,85.27864045000422 L 102.97717981660213,85.27864045000422"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-15"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-16"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-15" fill="none" class="axis-main-group">
+            <g id="g-svg-16" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-17"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-19"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-19" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-20"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -208,13 +167,13 @@
                 transform="matrix(1,0,0,1,197.022827,85.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5.877852,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
-                    x1="5.877852522924732"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5.877852522924732"
                     y2="8.090169943749475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -228,13 +187,13 @@
                 transform="matrix(1,0,0,1,226.084518,125.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.510565,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
-                    x1="9.510565162951535"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-9.510565162951535"
                     y2="3.090169943749474"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -248,14 +207,14 @@
                 transform="matrix(1,0,0,1,226.084518,174.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.510565,-3.090170)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
-                    x1="9.510565162951535"
-                    y1="3.0901699437494763"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-9.510565162951535"
+                    y2="-3.0901699437494763"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -268,14 +227,14 @@
                 transform="matrix(1,0,0,1,197.022827,214.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5.877852,-8.090170)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
-                    x1="5.877852522924732"
-                    y1="8.090169943749475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.877852522924732"
+                    y2="-8.090169943749475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -288,14 +247,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -308,14 +267,14 @@
                 transform="matrix(1,0,0,1,102.977180,214.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.090170)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="8.090169943749473"
+                    y1="0"
                     x2="5.877852522924734"
-                    y2="0"
+                    y2="-8.090169943749473"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -328,14 +287,14 @@
                 transform="matrix(1,0,0,1,73.915482,174.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-3.090170)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
                     x1="0"
-                    y1="3.090169943749471"
+                    y1="0"
                     x2="9.510565162951536"
-                    y2="0"
+                    y2="-3.090169943749471"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -348,7 +307,7 @@
                 transform="matrix(1,0,0,1,73.915482,125.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -368,7 +327,7 @@
                 transform="matrix(1,0,0,1,102.977180,85.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -383,19 +342,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-40"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-40" fill="none" class="axis-label-group">
               <g
                 id="g-svg-41"
                 fill="none"
                 transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-51"
                     fill="rgba(0,0,0,1)"
@@ -419,10 +373,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.809017,0.587785,-0.587785,0.809017,182.328186,105.504066)"
+                transform="matrix(1,0,0,1,182.328186,105.504066)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.809017,0.587785,-0.587785,0.809017,0,0)">
                   <text
                     id="g-svg-52"
                     fill="rgba(0,0,0,1)"
@@ -446,10 +400,10 @@
               <g
                 id="g-svg-43"
                 fill="none"
-                transform="matrix(0.309017,0.951057,-0.951057,0.309017,202.308105,133.004059)"
+                transform="matrix(1,0,0,1,202.308105,133.004059)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.309017,0.951057,-0.951057,0.309017,0,0)">
                   <text
                     id="g-svg-53"
                     fill="rgba(0,0,0,1)"
@@ -473,10 +427,10 @@
               <g
                 id="g-svg-44"
                 fill="none"
-                transform="matrix(0.309017,-0.951057,0.951057,0.309017,202.308105,166.995941)"
+                transform="matrix(1,0,0,1,202.308105,166.995941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.309017,-0.951057,0.951057,0.309017,0,0)">
                   <text
                     id="g-svg-54"
                     fill="rgba(0,0,0,1)"
@@ -500,10 +454,10 @@
               <g
                 id="g-svg-45"
                 fill="none"
-                transform="matrix(0.809017,-0.587785,0.587785,0.809017,182.328186,194.495941)"
+                transform="matrix(1,0,0,1,182.328186,194.495941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.809017,-0.587785,0.587785,0.809017,0,0)">
                   <text
                     id="g-svg-55"
                     fill="rgba(0,0,0,1)"
@@ -530,7 +484,7 @@
                 transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-56"
                     fill="rgba(0,0,0,1)"
@@ -554,10 +508,10 @@
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(0.809017,0.587785,-0.587785,0.809017,117.671814,194.495941)"
+                transform="matrix(1,0,0,1,117.671814,194.495941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.809017,0.587785,-0.587785,0.809017,0,0)">
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -581,10 +535,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.309017,0.951057,-0.951057,0.309017,97.691895,166.995941)"
+                transform="matrix(1,0,0,1,97.691895,166.995941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.309017,0.951057,-0.951057,0.309017,0,0)">
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -608,10 +562,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.309017,-0.951057,0.951057,0.309017,97.691895,133.004059)"
+                transform="matrix(1,0,0,1,97.691895,133.004059)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.309017,-0.951057,0.951057,0.309017,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -635,10 +589,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(0.809017,-0.587785,0.587785,0.809017,117.671814,105.504066)"
+                transform="matrix(1,0,0,1,117.671814,105.504066)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.809017,-0.587785,0.587785,0.809017,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -661,12 +615,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-61"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-61" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcLabelRotate2.svg b/__tests__/integration/snapshots/AxisArcLabelRotate2.svg
index 98ec0962d..0f15649b9 100644
--- a/__tests__/integration/snapshots/AxisArcLabelRotate2.svg
+++ b/__tests__/integration/snapshots/AxisArcLabelRotate2.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-62"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-63" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-62" fill="none" width="400" height="300">
+        <g id="g-svg-63" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,197.022827,85.278641)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 197.02282018339787,85.2786404500042 L 197.02282018339787,85.2786404500042"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,226.084518,125.278641)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 226.0845213036123,125.2786404500042 L 226.0845213036123,125.2786404500042"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,226.084518,174.721359)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 226.0845213036123,174.7213595499958 L 226.0845213036123,174.7213595499958"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,197.022827,214.721359)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 197.02282018339787,214.72135954999578 L 197.02282018339787,214.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,102.977180,214.721359)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 102.97717981660213,214.72135954999578 L 102.97717981660213,214.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,73.915482,174.721359)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 73.91547869638771,174.72135954999578 L 73.91547869638771,174.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,73.915482,125.278641)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 73.91547869638772,125.27864045000419 L 73.91547869638772,125.27864045000419"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,102.977180,85.278641)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,60 +120,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 102.97717981660213,85.27864045000422 L 102.97717981660213,85.27864045000422"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-15"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-16"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-15" fill="none" class="axis-main-group">
+            <g id="g-svg-16" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-17"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-19"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-19" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-20"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -208,13 +167,13 @@
                 transform="matrix(1,0,0,1,197.022827,85.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5.877852,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
-                    x1="5.877852522924732"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5.877852522924732"
                     y2="8.090169943749475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -228,13 +187,13 @@
                 transform="matrix(1,0,0,1,226.084518,125.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.510565,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
-                    x1="9.510565162951535"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-9.510565162951535"
                     y2="3.090169943749474"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -248,14 +207,14 @@
                 transform="matrix(1,0,0,1,226.084518,174.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.510565,-3.090170)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
-                    x1="9.510565162951535"
-                    y1="3.0901699437494763"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-9.510565162951535"
+                    y2="-3.0901699437494763"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -268,14 +227,14 @@
                 transform="matrix(1,0,0,1,197.022827,214.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5.877852,-8.090170)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
-                    x1="5.877852522924732"
-                    y1="8.090169943749475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.877852522924732"
+                    y2="-8.090169943749475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -288,14 +247,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -308,14 +267,14 @@
                 transform="matrix(1,0,0,1,102.977180,214.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.090170)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="8.090169943749473"
+                    y1="0"
                     x2="5.877852522924734"
-                    y2="0"
+                    y2="-8.090169943749473"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -328,14 +287,14 @@
                 transform="matrix(1,0,0,1,73.915482,174.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-3.090170)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
                     x1="0"
-                    y1="3.090169943749471"
+                    y1="0"
                     x2="9.510565162951536"
-                    y2="0"
+                    y2="-3.090169943749471"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -348,7 +307,7 @@
                 transform="matrix(1,0,0,1,73.915482,125.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -368,7 +327,7 @@
                 transform="matrix(1,0,0,1,102.977180,85.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -383,19 +342,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-40"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-40" fill="none" class="axis-label-group">
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,150,95)"
+                transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-51"
                     fill="rgba(0,0,0,1)"
@@ -419,10 +373,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,182.328186,105.504066)"
+                transform="matrix(1,0,0,1,182.328186,105.504066)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-52"
                     fill="rgba(0,0,0,1)"
@@ -446,10 +400,10 @@
               <g
                 id="g-svg-43"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,202.308105,133.004059)"
+                transform="matrix(1,0,0,1,202.308105,133.004059)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-53"
                     fill="rgba(0,0,0,1)"
@@ -473,10 +427,10 @@
               <g
                 id="g-svg-44"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,202.308105,166.995941)"
+                transform="matrix(1,0,0,1,202.308105,166.995941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-54"
                     fill="rgba(0,0,0,1)"
@@ -500,10 +454,10 @@
               <g
                 id="g-svg-45"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,182.328186,194.495941)"
+                transform="matrix(1,0,0,1,182.328186,194.495941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-55"
                     fill="rgba(0,0,0,1)"
@@ -527,10 +481,10 @@
               <g
                 id="g-svg-46"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,150,205)"
+                transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-56"
                     fill="rgba(0,0,0,1)"
@@ -554,10 +508,10 @@
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,117.671814,194.495941)"
+                transform="matrix(1,0,0,1,117.671814,194.495941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -581,10 +535,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,97.691895,166.995941)"
+                transform="matrix(1,0,0,1,97.691895,166.995941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -608,10 +562,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,97.691895,133.004059)"
+                transform="matrix(1,0,0,1,97.691895,133.004059)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -635,10 +589,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,117.671814,105.504066)"
+                transform="matrix(1,0,0,1,117.671814,105.504066)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -661,12 +615,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-61"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-61" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcLabelRotate3.svg b/__tests__/integration/snapshots/AxisArcLabelRotate3.svg
index fee284e85..1a9d6d891 100644
--- a/__tests__/integration/snapshots/AxisArcLabelRotate3.svg
+++ b/__tests__/integration/snapshots/AxisArcLabelRotate3.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-62"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-63" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-62" fill="none" width="400" height="300">
+        <g id="g-svg-63" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,197.022827,85.278641)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 197.02282018339787,85.2786404500042 L 197.02282018339787,85.2786404500042"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,226.084518,125.278641)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 226.0845213036123,125.2786404500042 L 226.0845213036123,125.2786404500042"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,226.084518,174.721359)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 226.0845213036123,174.7213595499958 L 226.0845213036123,174.7213595499958"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,197.022827,214.721359)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 197.02282018339787,214.72135954999578 L 197.02282018339787,214.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,102.977180,214.721359)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 102.97717981660213,214.72135954999578 L 102.97717981660213,214.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,73.915482,174.721359)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 73.91547869638771,174.72135954999578 L 73.91547869638771,174.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,73.915482,125.278641)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 73.91547869638772,125.27864045000419 L 73.91547869638772,125.27864045000419"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,102.977180,85.278641)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,60 +120,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 102.97717981660213,85.27864045000422 L 102.97717981660213,85.27864045000422"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-15"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-16"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-15" fill="none" class="axis-main-group">
+            <g id="g-svg-16" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-17"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-19"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-19" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-20"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -208,13 +167,13 @@
                 transform="matrix(1,0,0,1,197.022827,85.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5.877852,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
-                    x1="5.877852522924732"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5.877852522924732"
                     y2="8.090169943749475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -228,13 +187,13 @@
                 transform="matrix(1,0,0,1,226.084518,125.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.510565,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
-                    x1="9.510565162951535"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-9.510565162951535"
                     y2="3.090169943749474"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -248,14 +207,14 @@
                 transform="matrix(1,0,0,1,226.084518,174.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.510565,-3.090170)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
-                    x1="9.510565162951535"
-                    y1="3.0901699437494763"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-9.510565162951535"
+                    y2="-3.0901699437494763"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -268,14 +227,14 @@
                 transform="matrix(1,0,0,1,197.022827,214.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5.877852,-8.090170)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
-                    x1="5.877852522924732"
-                    y1="8.090169943749475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.877852522924732"
+                    y2="-8.090169943749475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -288,14 +247,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -308,14 +267,14 @@
                 transform="matrix(1,0,0,1,102.977180,214.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.090170)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="8.090169943749473"
+                    y1="0"
                     x2="5.877852522924734"
-                    y2="0"
+                    y2="-8.090169943749473"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -328,14 +287,14 @@
                 transform="matrix(1,0,0,1,73.915482,174.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-3.090170)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
                     x1="0"
-                    y1="3.090169943749471"
+                    y1="0"
                     x2="9.510565162951536"
-                    y2="0"
+                    y2="-3.090169943749471"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -348,7 +307,7 @@
                 transform="matrix(1,0,0,1,73.915482,125.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -368,7 +327,7 @@
                 transform="matrix(1,0,0,1,102.977180,85.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -383,19 +342,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-40"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-40" fill="none" class="axis-label-group">
               <g
                 id="g-svg-41"
                 fill="none"
                 transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-51"
                     fill="rgba(0,0,0,1)"
@@ -422,7 +376,7 @@
                 transform="matrix(1,0,0,1,182.328186,105.504066)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-52"
                     fill="rgba(0,0,0,1)"
@@ -449,7 +403,7 @@
                 transform="matrix(1,0,0,1,202.308105,133.004059)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-53"
                     fill="rgba(0,0,0,1)"
@@ -476,7 +430,7 @@
                 transform="matrix(1,0,0,1,202.308105,166.995941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-54"
                     fill="rgba(0,0,0,1)"
@@ -503,7 +457,7 @@
                 transform="matrix(1,0,0,1,182.328186,194.495941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-55"
                     fill="rgba(0,0,0,1)"
@@ -530,7 +484,7 @@
                 transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-56"
                     fill="rgba(0,0,0,1)"
@@ -557,7 +511,7 @@
                 transform="matrix(1,0,0,1,117.671814,194.495941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -584,7 +538,7 @@
                 transform="matrix(1,0,0,1,97.691895,166.995941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -611,7 +565,7 @@
                 transform="matrix(1,0,0,1,97.691895,133.004059)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -638,7 +592,7 @@
                 transform="matrix(1,0,0,1,117.671814,105.504066)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -661,12 +615,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-61"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-61" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcLabelRotate4.svg b/__tests__/integration/snapshots/AxisArcLabelRotate4.svg
index 47cadb4ad..4d4c86d4e 100644
--- a/__tests__/integration/snapshots/AxisArcLabelRotate4.svg
+++ b/__tests__/integration/snapshots/AxisArcLabelRotate4.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-62"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-63" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-62" fill="none" width="400" height="300">
+        <g id="g-svg-63" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,197.022827,85.278641)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 197.02282018339787,85.2786404500042 L 197.02282018339787,85.2786404500042"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,226.084518,125.278641)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 226.0845213036123,125.2786404500042 L 226.0845213036123,125.2786404500042"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,226.084518,174.721359)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 226.0845213036123,174.7213595499958 L 226.0845213036123,174.7213595499958"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,197.022827,214.721359)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 197.02282018339787,214.72135954999578 L 197.02282018339787,214.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,102.977180,214.721359)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 102.97717981660213,214.72135954999578 L 102.97717981660213,214.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,73.915482,174.721359)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 73.91547869638771,174.72135954999578 L 73.91547869638771,174.72135954999578"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,73.915482,125.278641)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 73.91547869638772,125.27864045000419 L 73.91547869638772,125.27864045000419"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,102.977180,85.278641)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,60 +120,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 102.97717981660213,85.27864045000422 L 102.97717981660213,85.27864045000422"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-15"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-16"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-15" fill="none" class="axis-main-group">
+            <g id="g-svg-16" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-17"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-19"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-19" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-20"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -208,13 +167,13 @@
                 transform="matrix(1,0,0,1,197.022827,85.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5.877852,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
-                    x1="5.877852522924732"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5.877852522924732"
                     y2="8.090169943749475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -228,13 +187,13 @@
                 transform="matrix(1,0,0,1,226.084518,125.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.510565,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
-                    x1="9.510565162951535"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-9.510565162951535"
                     y2="3.090169943749474"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -248,14 +207,14 @@
                 transform="matrix(1,0,0,1,226.084518,174.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.510565,-3.090170)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
-                    x1="9.510565162951535"
-                    y1="3.0901699437494763"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-9.510565162951535"
+                    y2="-3.0901699437494763"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -268,14 +227,14 @@
                 transform="matrix(1,0,0,1,197.022827,214.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5.877852,-8.090170)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
-                    x1="5.877852522924732"
-                    y1="8.090169943749475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.877852522924732"
+                    y2="-8.090169943749475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -288,14 +247,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -308,14 +267,14 @@
                 transform="matrix(1,0,0,1,102.977180,214.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.090170)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="8.090169943749473"
+                    y1="0"
                     x2="5.877852522924734"
-                    y2="0"
+                    y2="-8.090169943749473"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -328,14 +287,14 @@
                 transform="matrix(1,0,0,1,73.915482,174.721359)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-3.090170)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
                     x1="0"
-                    y1="3.090169943749471"
+                    y1="0"
                     x2="9.510565162951536"
-                    y2="0"
+                    y2="-3.090169943749471"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -348,7 +307,7 @@
                 transform="matrix(1,0,0,1,73.915482,125.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -368,7 +327,7 @@
                 transform="matrix(1,0,0,1,102.977180,85.278641)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -383,19 +342,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-40"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-40" fill="none" class="axis-label-group">
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,150,95)"
+                transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-51"
                     fill="rgba(0,0,0,1)"
@@ -419,10 +373,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,182.328186,105.504066)"
+                transform="matrix(1,0,0,1,182.328186,105.504066)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-52"
                     fill="rgba(0,0,0,1)"
@@ -446,10 +400,10 @@
               <g
                 id="g-svg-43"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,202.308105,133.004059)"
+                transform="matrix(1,0,0,1,202.308105,133.004059)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-53"
                     fill="rgba(0,0,0,1)"
@@ -473,10 +427,10 @@
               <g
                 id="g-svg-44"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,202.308105,166.995941)"
+                transform="matrix(1,0,0,1,202.308105,166.995941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-54"
                     fill="rgba(0,0,0,1)"
@@ -500,10 +454,10 @@
               <g
                 id="g-svg-45"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,182.328186,194.495941)"
+                transform="matrix(1,0,0,1,182.328186,194.495941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-55"
                     fill="rgba(0,0,0,1)"
@@ -527,10 +481,10 @@
               <g
                 id="g-svg-46"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,150,205)"
+                transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-56"
                     fill="rgba(0,0,0,1)"
@@ -554,10 +508,10 @@
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,117.671814,194.495941)"
+                transform="matrix(1,0,0,1,117.671814,194.495941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -581,10 +535,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,97.691895,166.995941)"
+                transform="matrix(1,0,0,1,97.691895,166.995941)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -608,10 +562,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,97.691895,133.004059)"
+                transform="matrix(1,0,0,1,97.691895,133.004059)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -635,10 +589,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,117.671814,105.504066)"
+                transform="matrix(1,0,0,1,117.671814,105.504066)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -661,12 +615,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-61"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-61" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisArcTitle1.svg b/__tests__/integration/snapshots/AxisArcTitle1.svg
index 754671ee6..e87fd085f 100644
--- a/__tests__/integration/snapshots/AxisArcTitle1.svg
+++ b/__tests__/integration/snapshots/AxisArcTitle1.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-72"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-72" fill="none" width="400" height="300">
+        <g id="g-svg-73" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,60 +98,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -186,13 +145,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -206,13 +165,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -226,14 +185,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -246,14 +205,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -266,14 +225,14 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -286,14 +245,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -306,7 +265,7 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
                 transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -357,10 +311,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,188.890869,111.109123)"
+                transform="matrix(1,0,0,1,188.890869,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -384,10 +338,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,205,150)"
+                transform="matrix(1,0,0,1,205,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +365,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,188.890869,188.890869)"
+                transform="matrix(1,0,0,1,188.890869,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -441,7 +395,7 @@
                 transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -465,10 +419,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,111.109123,188.890869)"
+                transform="matrix(1,0,0,1,111.109123,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -492,10 +446,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,95,150)"
+                transform="matrix(1,0,0,1,95,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +473,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,111.109123,111.109123)"
+                transform="matrix(1,0,0,1,111.109123,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -548,7 +502,7 @@
           <g
             id="g-svg-51"
             fill="none"
-            transform="matrix(1,0,0,1,29.240000,271)"
+            transform="matrix(1,0,0,1,44.619999,255.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,30.760000,0)">
diff --git a/__tests__/integration/snapshots/AxisArcTitle2.svg b/__tests__/integration/snapshots/AxisArcTitle2.svg
index 6bcd01664..7297b95d9 100644
--- a/__tests__/integration/snapshots/AxisArcTitle2.svg
+++ b/__tests__/integration/snapshots/AxisArcTitle2.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-53"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-53" fill="none" width="400" height="300">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,60 +98,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -186,13 +145,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -206,13 +165,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -226,14 +185,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -246,14 +205,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -266,14 +225,14 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -286,14 +245,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -306,7 +265,7 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
                 transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -357,10 +311,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,188.890869,111.109123)"
+                transform="matrix(1,0,0,1,188.890869,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -384,10 +338,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,205,150)"
+                transform="matrix(1,0,0,1,205,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +365,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,188.890869,188.890869)"
+                transform="matrix(1,0,0,1,188.890869,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -441,7 +395,7 @@
                 transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -465,10 +419,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,111.109123,188.890869)"
+                transform="matrix(1,0,0,1,111.109123,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -492,10 +446,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,95,150)"
+                transform="matrix(1,0,0,1,95,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +473,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,111.109123,111.109123)"
+                transform="matrix(1,0,0,1,111.109123,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -548,10 +502,10 @@
           <g
             id="g-svg-51"
             fill="none"
-            transform="matrix(1,0,0,1,150,271)"
+            transform="matrix(1,0,0,1,150,255.500000)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-52"
                 fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/AxisArcTitle3.svg b/__tests__/integration/snapshots/AxisArcTitle3.svg
index cc3cd0a2d..909c6e8d4 100644
--- a/__tests__/integration/snapshots/AxisArcTitle3.svg
+++ b/__tests__/integration/snapshots/AxisArcTitle3.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-54"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-55" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-53" fill="none" width="400" height="300">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,60 +98,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -186,13 +145,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -206,13 +165,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -226,14 +185,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -246,14 +205,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -266,14 +225,14 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -286,14 +245,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -306,7 +265,7 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
                 transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -357,10 +311,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,188.890869,111.109123)"
+                transform="matrix(1,0,0,1,188.890869,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -384,10 +338,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,205,150)"
+                transform="matrix(1,0,0,1,205,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +365,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,188.890869,188.890869)"
+                transform="matrix(1,0,0,1,188.890869,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -441,7 +395,7 @@
                 transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -465,10 +419,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,111.109123,188.890869)"
+                transform="matrix(1,0,0,1,111.109123,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -492,10 +446,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,95,150)"
+                transform="matrix(1,0,0,1,95,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +473,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,111.109123,111.109123)"
+                transform="matrix(1,0,0,1,111.109123,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -548,7 +502,7 @@
           <g
             id="g-svg-51"
             fill="none"
-            transform="matrix(1,0,0,1,255.380005,271)"
+            transform="matrix(1,0,0,1,255.380005,255.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,-30.760000,0)">
diff --git a/__tests__/integration/snapshots/AxisArcTitle4.svg b/__tests__/integration/snapshots/AxisArcTitle4.svg
index 0b72109f9..bf73c6e47 100644
--- a/__tests__/integration/snapshots/AxisArcTitle4.svg
+++ b/__tests__/integration/snapshots/AxisArcTitle4.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-53"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-53" fill="none" width="400" height="300">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,60 +98,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -186,13 +145,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -206,13 +165,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -226,14 +185,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -246,14 +205,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -266,14 +225,14 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -286,14 +245,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -306,7 +265,7 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
                 transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -357,10 +311,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,188.890869,111.109123)"
+                transform="matrix(1,0,0,1,188.890869,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -384,10 +338,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,205,150)"
+                transform="matrix(1,0,0,1,205,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +365,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,188.890869,188.890869)"
+                transform="matrix(1,0,0,1,188.890869,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -441,7 +395,7 @@
                 transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -465,10 +419,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,111.109123,188.890869)"
+                transform="matrix(1,0,0,1,111.109123,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -492,10 +446,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,95,150)"
+                transform="matrix(1,0,0,1,95,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +473,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,111.109123,111.109123)"
+                transform="matrix(1,0,0,1,111.109123,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -551,7 +505,7 @@
             transform="matrix(1,0,0,1,150,150)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-52"
                 fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/AxisArcTitle5.svg b/__tests__/integration/snapshots/AxisArcTitle5.svg
index c140f6098..eed04a2af 100644
--- a/__tests__/integration/snapshots/AxisArcTitle5.svg
+++ b/__tests__/integration/snapshots/AxisArcTitle5.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-54"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-55" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-53" fill="none" width="400" height="300">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,60 +98,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -186,13 +145,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -206,13 +165,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -226,14 +185,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -246,14 +205,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -266,14 +225,14 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -286,14 +245,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -306,7 +265,7 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
                 transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -357,10 +311,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,188.890869,111.109123)"
+                transform="matrix(1,0,0,1,188.890869,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -384,10 +338,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,205,150)"
+                transform="matrix(1,0,0,1,205,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +365,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,188.890869,188.890869)"
+                transform="matrix(1,0,0,1,188.890869,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -441,7 +395,7 @@
                 transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -465,10 +419,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,111.109123,188.890869)"
+                transform="matrix(1,0,0,1,111.109123,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -492,10 +446,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,95,150)"
+                transform="matrix(1,0,0,1,95,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +473,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,111.109123,111.109123)"
+                transform="matrix(1,0,0,1,111.109123,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -548,7 +502,7 @@
           <g
             id="g-svg-51"
             fill="none"
-            transform="matrix(1,0,0,1,29.240000,44.500000)"
+            transform="matrix(1,0,0,1,44.619999,44.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,30.760000,0)">
diff --git a/__tests__/integration/snapshots/AxisArcTitle6.svg b/__tests__/integration/snapshots/AxisArcTitle6.svg
index a6b962762..5017b626f 100644
--- a/__tests__/integration/snapshots/AxisArcTitle6.svg
+++ b/__tests__/integration/snapshots/AxisArcTitle6.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-53"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-53" fill="none" width="400" height="300">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,60 +98,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -186,13 +145,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -206,13 +165,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -226,14 +185,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -246,14 +205,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -266,14 +225,14 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -286,14 +245,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -306,7 +265,7 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
                 transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -357,10 +311,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,188.890869,111.109123)"
+                transform="matrix(1,0,0,1,188.890869,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -384,10 +338,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,205,150)"
+                transform="matrix(1,0,0,1,205,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +365,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,188.890869,188.890869)"
+                transform="matrix(1,0,0,1,188.890869,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -441,7 +395,7 @@
                 transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -465,10 +419,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,111.109123,188.890869)"
+                transform="matrix(1,0,0,1,111.109123,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -492,10 +446,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,95,150)"
+                transform="matrix(1,0,0,1,95,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +473,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,111.109123,111.109123)"
+                transform="matrix(1,0,0,1,111.109123,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -548,10 +502,10 @@
           <g
             id="g-svg-51"
             fill="none"
-            transform="matrix(1,0,0,1,29.240000,150)"
+            transform="matrix(1,0,0,1,44.619999,150)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-52"
                 fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/AxisArcTitle7.svg b/__tests__/integration/snapshots/AxisArcTitle7.svg
index fe2f14624..50b2405d4 100644
--- a/__tests__/integration/snapshots/AxisArcTitle7.svg
+++ b/__tests__/integration/snapshots/AxisArcTitle7.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-54"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-55" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-53" fill="none" width="400" height="300">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,60 +98,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -186,13 +145,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -206,13 +165,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -226,14 +185,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -246,14 +205,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -266,14 +225,14 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -286,14 +245,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -306,7 +265,7 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
                 transform="matrix(1,0,0,1,150,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -357,10 +311,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,188.890869,111.109123)"
+                transform="matrix(1,0,0,1,188.890869,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -384,10 +338,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,205,150)"
+                transform="matrix(1,0,0,1,205,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +365,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,188.890869,188.890869)"
+                transform="matrix(1,0,0,1,188.890869,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -441,7 +395,7 @@
                 transform="matrix(1,0,0,1,150,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -465,10 +419,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,111.109123,188.890869)"
+                transform="matrix(1,0,0,1,111.109123,188.890869)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -492,10 +446,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,95,150)"
+                transform="matrix(1,0,0,1,95,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +473,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,111.109123,111.109123)"
+                transform="matrix(1,0,0,1,111.109123,111.109123)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -551,7 +505,7 @@
             transform="matrix(1,0,0,1,255.380005,150)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-52"
                 fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/AxisArcTitle8.svg b/__tests__/integration/snapshots/AxisArcTitle8.svg
index 9e4d53f7b..8b2c6d05e 100644
--- a/__tests__/integration/snapshots/AxisArcTitle8.svg
+++ b/__tests__/integration/snapshots/AxisArcTitle8.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-54"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-55" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-53" fill="none" width="400" height="300">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,60 +98,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -186,13 +145,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -206,13 +165,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -226,14 +185,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -246,14 +205,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -266,14 +225,14 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -286,14 +245,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -306,7 +265,7 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
                 transform="matrix(1,0,0,1,150,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -357,10 +311,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,217.175140,82.824852)"
+                transform="matrix(1,0,0,1,217.175140,82.824852)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -384,10 +338,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,245,150)"
+                transform="matrix(1,0,0,1,245,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +365,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,217.175140,217.175140)"
+                transform="matrix(1,0,0,1,217.175140,217.175140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -441,7 +395,7 @@
                 transform="matrix(1,0,0,1,150,245)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -465,10 +419,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,82.824852,217.175140)"
+                transform="matrix(1,0,0,1,82.824852,217.175140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -492,10 +446,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,150)"
+                transform="matrix(1,0,0,1,55,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +473,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,82.824852,82.824852)"
+                transform="matrix(1,0,0,1,82.824852,82.824852)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -551,7 +505,7 @@
             transform="matrix(1,0,0,1,150,6.500000)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-52"
                 fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/AxisArcTitle9.svg b/__tests__/integration/snapshots/AxisArcTitle9.svg
index 837a6b353..6c3ca2310 100644
--- a/__tests__/integration/snapshots/AxisArcTitle9.svg
+++ b/__tests__/integration/snapshots/AxisArcTitle9.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-54"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-55" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,70)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-53" fill="none" width="400" height="300">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,70 L 150,70"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,93.431458)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,93.4314575050762 L 206.5685424949238,93.4314575050762"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,150 L 230,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,206.568542,206.568542)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 206.5685424949238,206.5685424949238 L 206.5685424949238,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,230 L 150,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,206.568542)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.4314575050762,206.5685424949238 L 93.4314575050762,206.5685424949238"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,150 L 70,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.431458,93.431458)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,60 +98,40 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 93.43145750507618,93.4314575050762 L 93.43145750507618,93.4314575050762"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,70,70)">
+          <g id="g-svg-13" fill="none" class="axis-main-group">
+            <g id="g-svg-14" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
                   class="axis-line"
-                  d="M 80,0 A 80 80 0 1 0 80 160 A 80 80 0 1 0 79.99999999999997 0"
+                  d="M 150,70 A 80 80 0 1 0 150 230 A 80 80 0 1 0 149.99999999999997 70"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-18"
                 fill="none"
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="6.123233995736766e-16"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.123233995736766e-16"
                     y2="10"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -186,13 +145,13 @@
                 transform="matrix(1,0,0,1,206.568542,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="7.0710678118654755"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.0710678118654755"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -206,13 +165,13 @@
                 transform="matrix(1,0,0,1,230,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -226,14 +185,14 @@
                 transform="matrix(1,0,0,1,206.568542,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,-7.071068)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="7.0710678118654755"
-                    y1="7.071067811865475"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.0710678118654755"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -246,14 +205,14 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-0,-10)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="6.123233995736766e-16"
-                    y1="10"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.123233995736766e-16"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -266,14 +225,14 @@
                 transform="matrix(1,0,0,1,93.431458,206.568542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
                     x1="0"
-                    y1="7.0710678118654755"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.0710678118654755"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -286,14 +245,14 @@
                 transform="matrix(1,0,0,1,70,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -306,7 +265,7 @@
                 transform="matrix(1,0,0,1,93.431458,93.431458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -321,19 +280,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
                 transform="matrix(1,0,0,1,150,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -357,10 +311,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,217.175140,82.824852)"
+                transform="matrix(1,0,0,1,217.175140,82.824852)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -384,10 +338,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,245,150)"
+                transform="matrix(1,0,0,1,245,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +365,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,217.175140,217.175140)"
+                transform="matrix(1,0,0,1,217.175140,217.175140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -441,7 +395,7 @@
                 transform="matrix(1,0,0,1,150,245)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -465,10 +419,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,82.824852,217.175140)"
+                transform="matrix(1,0,0,1,82.824852,217.175140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -492,10 +446,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,150)"
+                transform="matrix(1,0,0,1,55,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +473,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,82.824852,82.824852)"
+                transform="matrix(1,0,0,1,82.824852,82.824852)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -545,12 +499,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-51"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-51" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisGrid1.svg b/__tests__/integration/snapshots/AxisGrid1.svg
index 86667ab7f..31478eaa2 100644
--- a/__tests__/integration/snapshots/AxisGrid1.svg
+++ b/__tests__/integration/snapshots/AxisGrid1.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-62"
-        fill="none"
-        width="550"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-63" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-62" fill="none" width="550" height="300">
+        <g id="g-svg-63" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 50,50 L 50,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 87.5,50 L 87.5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 125,50 L 125,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 162.5,50 L 162.5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 200,50 L 200,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 237.49999999999997,50 L 237.49999999999997,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 275,50 L 275,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 312.49999999999994,50 L 312.49999999999994,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 350,50 L 350,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 387.5,50 L 387.5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 424.99999999999994,50 L 424.99999999999994,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,163 +142,142 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 462.5,50 L 462.5,250"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+              <g id="g-svg-4" fill="none" class="grid-region-group">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="rgba(0,0,0,0.05)"
-                    d="M 0,0 L 0,200 L 37.5,200 L 37.5,0 L 0,0"
+                    d="M 50,50 L 50,250 L 87.5,250 L 87.5,50 L 50,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,50)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,200 L 37.5,200 L 37.5,0 L 0,0"
+                    d="M 87.5,50 L 87.5,250 L 125,250 L 125,50 L 87.5,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,50)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="rgba(0,0,0,0.05)"
-                    d="M 0,0 L 0,200 L 37.5,200 L 37.5,0 L 0,0"
+                    d="M 125,50 L 125,250 L 162.5,250 L 162.5,50 L 125,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,200 L 37.5,200 L 37.5,0 L 0,0"
+                    d="M 162.5,50 L 162.5,250 L 200,250 L 200,50 L 162.5,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,50)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,0.05)"
-                    d="M 0,0 L 0,200 L 37.49999999999997,200 L 37.49999999999997,0 L 0,0"
+                    d="M 200,50 L 200,250 L 237.49999999999997,250 L 237.49999999999997,50 L 200,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,50)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,200 L 37.50000000000003,200 L 37.50000000000003,0 L 0,0"
+                    d="M 237.49999999999997,50 L 237.49999999999997,250 L 275,250 L 275,50 L 237.49999999999997,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="rgba(0,0,0,0.05)"
-                    d="M 0,0 L 0,200 L 37.49999999999994,200 L 37.49999999999994,0 L 0,0"
+                    d="M 275,50 L 275,250 L 312.49999999999994,250 L 312.49999999999994,50 L 275,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,50)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,200 L 37.50000000000006,200 L 37.50000000000006,0 L 0,0"
+                    d="M 312.49999999999994,50 L 312.49999999999994,250 L 350,250 L 350,50 L 312.49999999999994,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-25"
                     fill="rgba(0,0,0,0.05)"
-                    d="M 0,0 L 0,200 L 37.5,200 L 37.5,0 L 0,0"
+                    d="M 350,50 L 350,250 L 387.5,250 L 387.5,50 L 350,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-26"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,0 L 0,200 L 37.49999999999994,200 L 37.49999999999994,0 L 0,0"
+                    d="M 387.5,50 L 387.5,250 L 424.99999999999994,250 L 424.99999999999994,50 L 387.5,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-27"
                     fill="rgba(0,0,0,0.05)"
-                    d="M 0,0 L 0,200 L 37.50000000000006,200 L 37.50000000000006,0 L 0,0"
+                    d="M 424.99999999999994,50 L 424.99999999999994,250 L 462.5,250 L 462.5,50 L 424.99999999999994,50"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-28"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-29"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-28" fill="none" class="axis-main-group">
+            <g id="g-svg-29" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-30"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-32"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-33"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-33" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-34"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -332,14 +290,14 @@
                 transform="matrix(1,0,0,1,87.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-47"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -352,14 +310,14 @@
                 transform="matrix(1,0,0,1,125,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-48"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -372,14 +330,14 @@
                 transform="matrix(1,0,0,1,162.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-49"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -392,14 +350,14 @@
                 transform="matrix(1,0,0,1,200,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-50"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -412,14 +370,14 @@
                 transform="matrix(1,0,0,1,237.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -432,14 +390,14 @@
                 transform="matrix(1,0,0,1,275,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -452,14 +410,14 @@
                 transform="matrix(1,0,0,1,312.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -472,14 +430,14 @@
                 transform="matrix(1,0,0,1,350,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -492,14 +450,14 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -512,14 +470,14 @@
                 transform="matrix(1,0,0,1,425,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -532,14 +490,14 @@
                 transform="matrix(1,0,0,1,462.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -547,19 +505,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-58"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            />
+            <g id="g-svg-58" fill="none" class="axis-label-group" />
           </g>
-          <g
-            id="g-svg-59"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-59" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisGrid10.svg b/__tests__/integration/snapshots/AxisGrid10.svg
index 8f60d0e39..a7bc41151 100644
--- a/__tests__/integration/snapshots/AxisGrid10.svg
+++ b/__tests__/integration/snapshots/AxisGrid10.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="350"
-        height="400"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-49" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="350" height="400">
+        <g id="g-svg-49" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 150,0 A 150 150 0 0 1 150.00000000000003 300 A 150 150 0 0 1 0 150.00000000000003"
+                    d="M 150,50 A 150 150 0 0 1 150.00000000000003 350 A 150 150 0 0 1 0 200.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,30,80)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 120,0 A 120 120 0 0 1 120.00000000000003 240 A 120 120 0 0 1 0 120.00000000000003"
+                    d="M 150,80 A 120 120 0 0 1 150.00000000000003 320 A 120 120 0 0 1 30 200.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,110)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 90,0 A 90 90 0 0 1 90 180 A 90 90 0 0 1 0 90.00000000000003"
+                    d="M 150,110 A 90 90 0 0 1 150 290 A 90 90 0 0 1 60 200.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,90,140)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 60,0 A 60 60 0 0 1 60 120 A 60 60 0 0 1 0 60"
+                    d="M 150,140 A 60 60 0 0 1 150 260 A 60 60 0 0 1 90 200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,120,170)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,49 +65,19 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 30,0 A 30 30 0 0 1 30 60 A 30 30 0 0 1 0 30"
+                    d="M 150,170 A 30 30 0 0 1 150 230 A 30 30 0 0 1 120 200"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            />
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            />
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group" />
+            <g id="g-svg-12" fill="none" class="axis-tick-group" />
+            <g id="g-svg-13" fill="none" class="axis-label-group" />
           </g>
-          <g
-            id="g-svg-14"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-14" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisGrid11.svg b/__tests__/integration/snapshots/AxisGrid11.svg
index 6f52532f2..be853ba65 100644
--- a/__tests__/integration/snapshots/AxisGrid11.svg
+++ b/__tests__/integration/snapshots/AxisGrid11.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-15"
-        fill="none"
-        width="350"
-        height="400"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-16" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-15" fill="none" width="350" height="400">
+        <g id="g-svg-16" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 150,0 L 225,20.0961894323342 L 279.9038105676658,74.99999999999999 L 300,150 L 279.9038105676658,225 L 225,279.9038105676658 L 150.00000000000003,300 L 74.99999999999999,279.9038105676658 L 20.096189432334228,225.00000000000006 L 0,150.00000000000003 L 20.0961894323342,74.99999999999999 L 74.99999999999993,20.096189432334256 L 149.99999999999997,0 L 150,0"
+                    d="M 150,50 L 225,70.0961894323342 L 279.9038105676658,124.99999999999999 L 300,200 L 279.9038105676658,275 L 225,329.9038105676658 L 150.00000000000003,350 L 74.99999999999999,329.9038105676658 L 20.096189432334228,275.00000000000006 L 0,200.00000000000003 L 20.0961894323342,124.99999999999999 L 74.99999999999993,70.09618943233426 L 149.99999999999997,50 L 150,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,25,75)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 125,0 L 187.5,16.74682452694516 L 233.25317547305485,62.5 L 250,125 L 233.25317547305485,187.5 L 187.5,233.25317547305485 L 125.00000000000003,250 L 62.499999999999986,233.25317547305485 L 16.74682452694519,187.50000000000006 L 0,125.00000000000003 L 16.746824526945176,62.5 L 62.49999999999994,16.746824526945204 L 124.99999999999997,0 L 125,0"
+                    d="M 150,75 L 212.5,91.74682452694516 L 258.25317547305485,137.5 L 275,200 L 258.25317547305485,262.5 L 212.5,308.25317547305485 L 150.00000000000003,325 L 87.49999999999999,308.25317547305485 L 41.74682452694519,262.50000000000006 L 25,200.00000000000003 L 41.746824526945176,137.5 L 87.49999999999994,91.7468245269452 L 149.99999999999997,75 L 150,75"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,100)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 100,0 L 150,13.397459621556123 L 186.60254037844385,50 L 200,100 L 186.60254037844388,149.99999999999997 L 150,186.6025403784439 L 100,200 L 49.999999999999986,186.60254037844385 L 13.397459621556152,150.00000000000006 L 0,100.00000000000003 L 13.397459621556138,50 L 49.99999999999996,13.397459621556166 L 99.99999999999997,0 L 100,0"
+                    d="M 150,100 L 200,113.39745962155612 L 236.60254037844385,150 L 250,200 L 236.60254037844388,249.99999999999997 L 200,286.6025403784439 L 150,300 L 99.99999999999999,286.60254037844385 L 63.39745962155615,250.00000000000006 L 50,200.00000000000003 L 63.39745962155614,150 L 99.99999999999996,113.39745962155617 L 149.99999999999997,100 L 150,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,75,125)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 75,0 L 112.5,10.0480947161671 L 139.9519052838329,37.5 L 150,75 L 139.9519052838329,112.5 L 112.5,139.9519052838329 L 75,150 L 37.5,139.9519052838329 L 10.048094716167114,112.50000000000003 L 0,75 L 10.0480947161671,37.5 L 37.49999999999997,10.048094716167128 L 74.99999999999997,0 L 75,0"
+                    d="M 150,125 L 187.5,135.0480947161671 L 214.9519052838329,162.5 L 225,200 L 214.9519052838329,237.5 L 187.5,264.9519052838329 L 150,275 L 112.5,264.9519052838329 L 85.04809471616711,237.50000000000003 L 75,200 L 85.0480947161671,162.5 L 112.49999999999997,135.04809471616713 L 149.99999999999997,125 L 150,125"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,150)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 50,0 L 75,6.6987298107780475 L 93.30127018922192,25 L 100,50 L 93.30127018922195,75 L 75,93.30127018922195 L 50,100 L 25,93.30127018922192 L 6.698729810778076,75.00000000000003 L 0,50 L 6.698729810778076,25 L 24.99999999999997,6.698729810778076 L 50,0 L 50,0"
+                    d="M 150,150 L 175,156.69872981077805 L 193.30127018922192,175 L 200,200 L 193.30127018922195,225 L 175,243.30127018922195 L 150,250 L 125,243.30127018922192 L 106.69872981077808,225.00000000000003 L 100,200 L 106.69872981077808,175 L 124.99999999999997,156.69872981077808 L 150,150 L 150,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,175)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,49 +76,19 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 25,0 L 37.5,3.3493649053890238 L 46.650635094610976,12.5 L 50,25 L 46.650635094610976,37.5 L 37.5,46.650635094610976 L 25,50 L 12.5,46.650635094610976 L 3.349364905389052,37.5 L 0,25 L 3.3493649053890238,12.5 L 12.5,3.349364905389052 L 25,0 L 25,0"
+                    d="M 150,175 L 162.5,178.34936490538902 L 171.65063509461098,187.5 L 175,200 L 171.65063509461098,212.5 L 162.5,221.65063509461098 L 150,225 L 137.5,221.65063509461098 L 128.34936490538905,212.5 L 125,200 L 128.34936490538902,187.5 L 137.5,178.34936490538905 L 150,175 L 150,175"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            />
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            />
+          <g id="g-svg-11" fill="none" class="axis-main-group">
+            <g id="g-svg-12" fill="none" class="axis-line-group" />
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group" />
           </g>
-          <g
-            id="g-svg-15"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-15" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisGrid12.svg b/__tests__/integration/snapshots/AxisGrid12.svg
index 7c2c9a825..15704d86f 100644
--- a/__tests__/integration/snapshots/AxisGrid12.svg
+++ b/__tests__/integration/snapshots/AxisGrid12.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-16"
-        fill="none"
-        width="350"
-        height="400"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-17" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-16" fill="none" width="350" height="400">
+        <g id="g-svg-17" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 150,0 A 150 150 0 0 1 150.00000000000003 300 A 150 150 0 0 1 0 150.00000000000003"
+                    d="M 150,50 A 150 150 0 0 1 150.00000000000003 350 A 150 150 0 0 1 0 200.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,30,80)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 120,0 A 120 120 0 0 1 120.00000000000003 240 A 120 120 0 0 1 0 120.00000000000003"
+                    d="M 150,80 A 120 120 0 0 1 150.00000000000003 320 A 120 120 0 0 1 30 200.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,110)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 90,0 A 90 90 0 0 1 90 180 A 90 90 0 0 1 0 90.00000000000003"
+                    d="M 150,110 A 90 90 0 0 1 150 290 A 90 90 0 0 1 60 200.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,90,140)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 60,0 A 60 60 0 0 1 60 120 A 60 60 0 0 1 0 60"
+                    d="M 150,140 A 60 60 0 0 1 150 260 A 60 60 0 0 1 90 200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,120,170)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,49 +65,19 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 30,0 A 30 30 0 0 1 30 60 A 30 30 0 0 1 0 30"
+                    d="M 150,170 A 30 30 0 0 1 150 230 A 30 30 0 0 1 120 200"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            />
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            />
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group" />
+            <g id="g-svg-12" fill="none" class="axis-tick-group" />
+            <g id="g-svg-13" fill="none" class="axis-label-group" />
           </g>
-          <g
-            id="g-svg-14"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-14" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisGrid2.svg b/__tests__/integration/snapshots/AxisGrid2.svg
index c5b47bc71..67d0833cc 100644
--- a/__tests__/integration/snapshots/AxisGrid2.svg
+++ b/__tests__/integration/snapshots/AxisGrid2.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-60"
-        fill="none"
-        width="550"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-61" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-60" fill="none" width="550" height="300">
+        <g id="g-svg-61" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 50,50 L 50,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 87.5,50 L 87.5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 125,50 L 125,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 162.5,50 L 162.5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 200,50 L 200,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 237.49999999999997,50 L 237.49999999999997,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 275,50 L 275,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 312.49999999999994,50 L 312.49999999999994,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 350,50 L 350,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 387.5,50 L 387.5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 424.99999999999994,50 L 424.99999999999994,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,73 +142,42 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 462.5,50 L 462.5,250"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-23"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            />
+            <g id="g-svg-22" fill="none" class="axis-tick-group" />
+            <g id="g-svg-23" fill="none" class="axis-label-group" />
           </g>
-          <g
-            id="g-svg-24"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-24" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisGrid3.svg b/__tests__/integration/snapshots/AxisGrid3.svg
index a1c98d445..83b9a105a 100644
--- a/__tests__/integration/snapshots/AxisGrid3.svg
+++ b/__tests__/integration/snapshots/AxisGrid3.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-25"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,150)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-25" fill="none" width="400" height="300">
+        <g id="g-svg-26" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 100,0 L 0,0"
+                    d="M 300,150 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,150)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 86.60254037844388,50 L 0,0"
+                    d="M 286.6025403784439,200 L 200.00000000000003,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 50,86.60254037844385 L 0,0"
+                    d="M 250,236.60254037844385 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,100 L 0,0"
+                    d="M 200,250 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,86.60254037844388 L 49.99999999999997,0"
+                    d="M 150.00000000000003,236.60254037844388 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,113.397461,150)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,50 L 86.60254037844388,0"
+                    d="M 113.39745962155612,200 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,150)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 100,150 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,113.397461,100)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 86.6025403784439,49.99999999999994"
+                    d="M 113.3974596215561,100.00000000000006 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,63.397461)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 50.00000000000006,86.60254037844385"
+                    d="M 149.99999999999994,63.39745962155615 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 2.842170943040401e-14,100"
+                    d="M 199.99999999999997,50 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,63.397461)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 50,0 L 0,86.60254037844386"
+                    d="M 250,63.39745962155614 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,100)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,60 +142,30 @@
                     stroke="rgba(0,0,0,0.5)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 86.60254037844385,0 L 0,50.00000000000004"
+                    d="M 286.60254037844385,99.99999999999996 L 200,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,100,50)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="none"
                   class="axis-line"
-                  d="M 200,100 A 100 100 0 1 0 0 100 A 100 100 0 1 0 200 99.99999999999997"
+                  d="M 300,150 A 100 100 0 1 0 100 150 A 100 100 0 1 0 300 149.99999999999997"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            />
+            <g id="g-svg-21" fill="none" class="axis-tick-group" />
+            <g id="g-svg-22" fill="none" class="axis-label-group" />
           </g>
-          <g
-            id="g-svg-23"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-23" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisGrid4.svg b/__tests__/integration/snapshots/AxisGrid4.svg
index b153da069..cfa65241d 100644
--- a/__tests__/integration/snapshots/AxisGrid4.svg
+++ b/__tests__/integration/snapshots/AxisGrid4.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-24"
-        fill="none"
-        width="300"
-        height="400"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-25" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-24" fill="none" width="300" height="400">
+        <g id="g-svg-25" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 50,50 L 250,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,100)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 50,100 L 250,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 50,150 L 250,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,200)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 50,200 L 250,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,250)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 50,250 L 250,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,300)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,114 +76,93 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 50,300 L 250,300"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+              <g id="g-svg-4" fill="none" class="grid-region-group">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="rgba(242,206,165,1)"
-                    d="M 0,0 L 200,0 L 200,50 L 0,50 L 0,0"
+                    d="M 50,50 L 250,50 L 250,100 L 50,100 L 50,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,100)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="rgba(248,222,163,1)"
-                    d="M 0,0 L 200,0 L 200,50 L 0,50 L 0,0"
+                    d="M 50,100 L 250,100 L 250,150 L 50,150 L 50,100"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,150)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="rgba(198,207,147,1)"
-                    d="M 0,0 L 200,0 L 200,50 L 0,50 L 0,0"
+                    d="M 50,150 L 250,150 L 250,200 L 50,200 L 50,150"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,200)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="rgba(149,181,192,1)"
-                    d="M 0,0 L 200,0 L 200,50 L 0,50 L 0,0"
+                    d="M 50,200 L 250,200 L 250,250 L 50,250 L 50,200"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,250)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="rgba(242,206,165,1)"
-                    d="M 0,0 L 200,0 L 200,50 L 0,50 L 0,0"
+                    d="M 50,250 L 250,250 L 250,300 L 50,300 L 50,250"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-16"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-16" fill="none" class="axis-main-group">
+            <g id="g-svg-17" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-18"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="315"
+                  x1="50"
+                  y1="50"
+                  x2="50"
+                  y2="365"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,315)">
+                <g transform="matrix(0,-0.500000,0.500000,0,50,365)">
                   <path
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -218,13 +176,13 @@
                 transform="matrix(1,0,0,1,50,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -238,13 +196,13 @@
                 transform="matrix(1,0,0,1,50,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -258,13 +216,13 @@
                 transform="matrix(1,0,0,1,50,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -278,13 +236,13 @@
                 transform="matrix(1,0,0,1,50,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -298,13 +256,13 @@
                 transform="matrix(1,0,0,1,50,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -313,19 +271,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,50)"
+                transform="matrix(1,0,0,1,30,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-41"
                     fill="rgba(0,0,0,1)"
@@ -348,10 +301,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,100)"
+                transform="matrix(1,0,0,1,30,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-42"
                     fill="rgba(0,0,0,1)"
@@ -374,10 +327,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,150)"
+                transform="matrix(1,0,0,1,30,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -400,10 +353,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,200)"
+                transform="matrix(1,0,0,1,30,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -426,10 +379,10 @@
               <g
                 id="g-svg-39"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,250)"
+                transform="matrix(1,0,0,1,30,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -452,10 +405,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,300)"
+                transform="matrix(1,0,0,1,30,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -477,12 +430,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-47"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-47" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisGrid5.svg b/__tests__/integration/snapshots/AxisGrid5.svg
index db0cef83e..fc37fecb0 100644
--- a/__tests__/integration/snapshots/AxisGrid5.svg
+++ b/__tests__/integration/snapshots/AxisGrid5.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-49" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,300,150)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="400" height="300">
+        <g id="g-svg-49" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 20,0"
+                    d="M 300,150 L 320,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,297.094177,173.931564)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 19.41883634852104,4.786313285751163"
+                    d="M 297.0941817426052,173.9315664287558 L 316.51301809112624,178.71787971450695"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,288.545593,196.472321)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 17.709120513064192,9.294463440875376"
+                    d="M 288.545602565321,196.47231720437685 L 306.2547230783852,205.76678064525223"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,274.851074,216.312271)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 14.970214963421995,13.262453164815895"
+                    d="M 274.8510748171101,216.31226582407953 L 289.8212897805321,229.57471898889543"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,256.806488,232.298386)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 11.361294934623118,16.459677317873115"
+                    d="M 256.8064746731156,232.29838658936563 L 268.1677696077387,248.75806390723875"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,235.460495,243.501617)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 7.092097740850704,18.70032485370831"
+                    d="M 235.46048870425355,243.5016242685415 L 242.55258644510425,262.2019491222498"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,212.053665,249.270889)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 2.410733605106458,19.854177481961102"
+                    d="M 212.05366802553232,249.2708874098054 L 214.46440163063878,269.1250648917665"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,185.535599,249.270889)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 2.410733605106458,0 L 0,19.854177481961102"
+                    d="M 187.94633197446768,249.2708874098054 L 185.53559836936122,269.1250648917665"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,157.447418,243.501617)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 7.092097740850704,0 L 0,18.70032485370831"
+                    d="M 164.53951129574642,243.5016242685415 L 157.44741355489572,262.2019491222498"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,131.832230,232.298386)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 11.361294934623118,0 L 0,16.459677317873115"
+                    d="M 143.1935253268844,232.29838658936563 L 131.8322303922613,248.75806390723875"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110.178711,216.312271)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 14.970214963422023,0 L 0,13.262453164815895"
+                    d="M 125.14892518288988,216.31226582407953 L 110.17871021946786,229.57471898889543"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.745277,196.472321)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 17.709120513064207,0 L 0,9.294463440875376"
+                    d="M 111.454397434679,196.47231720437682 L 93.74527692161479,205.7667806452522"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,83.486984,173.931564)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 19.41883634852104,0 L 0,4.786313285751163"
+                    d="M 102.90581825739481,173.93156642875581 L 83.48698190887377,178.71787971450698"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,150)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 20,0 L 0,0"
+                    d="M 100,150 L 80,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,83.486984,121.282120)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 19.41883634852104,4.786313285751163 L 0,0"
+                    d="M 102.9058182573948,126.06843357124421 L 83.48698190887376,121.28212028549305"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.745277,94.233223)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 17.709120513064192,9.294463440875376 L 0,0"
+                    d="M 111.45439743467904,103.52768279562312 L 93.74527692161485,94.23321935474775"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110.178711,70.425278)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 14.970214963422023,13.26245316481591 L 0,0"
+                    d="M 125.1489251828899,83.68773417592047 L 110.17871021946787,70.42528101110456"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,131.832230,51.241936)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 11.361294934623118,16.45967731787313 L 0,0"
+                    d="M 143.1935253268844,67.70161341063437 L 131.8322303922613,51.241936092761236"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,157.447418,37.798050)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 7.092097740850704,18.700324853708295 L 0,0"
+                    d="M 164.53951129574642,56.49837573145852 L 157.44741355489572,37.79805087775023"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,185.535599,30.874935)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,10 +230,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 2.410733605106458,19.85417748196108 L 0,0"
+                    d="M 187.94633197446774,50.72911259019459 L 185.53559836936128,30.874935108233508"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,212.053665,30.874935)">
+                <g>
                   <path
                     id="g-svg-25"
                     fill="none"
@@ -262,10 +241,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,19.85417748196108 L 2.410733605106458,0"
+                    d="M 212.05366802553232,50.7291125901946 L 214.46440163063878,30.874935108233522"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,235.460495,37.798050)">
+                <g>
                   <path
                     id="g-svg-26"
                     fill="none"
@@ -273,10 +252,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,18.700324853708295 L 7.092097740850704,0"
+                    d="M 235.46048870425355,56.49837573145852 L 242.55258644510425,37.79805087775023"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,256.806488,51.241936)">
+                <g>
                   <path
                     id="g-svg-27"
                     fill="none"
@@ -284,10 +263,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,16.459677317873115 L 11.361294934623118,0"
+                    d="M 256.80647467311564,67.7016134106344 L 268.16776960773876,51.24193609276128"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,274.851074,70.425278)">
+                <g>
                   <path
                     id="g-svg-28"
                     fill="none"
@@ -295,10 +274,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,13.262453164815895 L 14.970214963422052,0"
+                    d="M 274.85107481711015,83.68773417592051 L 289.8212897805322,70.42528101110462"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,288.545593,94.233223)">
+                <g>
                   <path
                     id="g-svg-29"
                     fill="none"
@@ -306,10 +285,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,9.294463440875376 L 17.709120513064192,0"
+                    d="M 288.54560256532096,103.5276827956231 L 306.25472307838515,94.23321935474772"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,297.094177,121.282120)">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -317,261 +296,241 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,4.786313285751135 L 19.41883634852104,0"
+                    d="M 297.0941817426052,126.0684335712443 L 316.51301809112624,121.28212028549316"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              >
-                <g transform="matrix(1,0,0,1,297.094177,150)">
+              <g id="g-svg-4" fill="none" class="grid-region-group">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="rgba(255,192,203,1)"
-                    d="M 2.905818257394799,0 L 22.9058182573948,0 L 19.41883634852104,28.71787971450695 L 0,23.931566428755787 L 2.905818257394799,0"
+                    d="M 300,150 L 320,150 L 316.51301809112624,178.71787971450695 L 297.0941817426052,173.9315664287558 L 300,150"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,288.545593,173.931564)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="rgba(0,0,0,0)"
-                    d="M 8.548579177284182,0 L 27.967415525805222,4.786313285751163 L 17.709120513064192,31.83521421649644 L 0,22.540750775621063 L 8.548579177284182,0"
+                    d="M 297.0941817426052,173.9315664287558 L 316.51301809112624,178.71787971450695 L 306.2547230783852,205.76678064525223 L 288.545602565321,196.47231720437685 L 297.0941817426052,173.9315664287558"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,274.851074,196.472321)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="rgba(255,192,203,1)"
-                    d="M 13.69452774821093,0 L 31.403648261275123,9.294463440875376 L 14.970214963421995,33.10240178451858 L 0,19.83994861970268 L 13.69452774821093,0"
+                    d="M 288.545602565321,196.47231720437685 L 306.2547230783852,205.76678064525223 L 289.8212897805321,229.57471898889543 L 274.8510748171101,216.31226582407953 L 288.545602565321,196.47231720437685"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,256.806488,216.312271)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="rgba(0,0,0,0)"
-                    d="M 18.0446001439945,0 L 33.014815107416496,13.262453164815895 L 11.361294934623118,32.44579808315922 L 0,15.986120765286103 L 18.0446001439945,0"
+                    d="M 274.8510748171101,216.31226582407953 L 289.8212897805321,229.57471898889543 L 268.1677696077387,248.75806390723875 L 256.8064746731156,232.29838658936563 L 274.8510748171101,216.31226582407953"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,235.460495,232.298386)">
+                <g>
                   <path
                     id="g-svg-35"
                     fill="rgba(255,192,203,1)"
-                    d="M 21.34598596886204,0 L 32.707280903485156,16.459677317873115 L 7.092097740850704,29.903562532884166 L 0,11.203237679175857 L 21.34598596886204,0"
+                    d="M 256.8064746731156,232.29838658936563 L 268.1677696077387,248.75806390723875 L 242.55258644510425,262.2019491222498 L 235.46048870425355,243.5016242685415 L 256.8064746731156,232.29838658936563"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,212.053665,243.501617)">
+                <g>
                   <path
                     id="g-svg-36"
                     fill="rgba(0,0,0,0)"
-                    d="M 23.406820678721232,0 L 30.498918419571936,18.70032485370831 L 2.410733605106458,25.623440623225008 L 0,5.769263141263906 L 23.406820678721232,0"
+                    d="M 235.46048870425355,243.5016242685415 L 242.55258644510425,262.2019491222498 L 214.46440163063878,269.1250648917665 L 212.05366802553232,249.2708874098054 L 235.46048870425355,243.5016242685415"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,185.535599,249.270889)">
+                <g>
                   <path
                     id="g-svg-37"
                     fill="rgba(255,192,203,1)"
-                    d="M 26.518069656171093,0 L 28.92880326127755,19.854177481961102 L 0,19.854177481961102 L 2.410733605106458,0 L 26.518069656171093,0"
+                    d="M 212.05366802553232,249.2708874098054 L 214.46440163063878,269.1250648917665 L 185.53559836936122,269.1250648917665 L 187.94633197446768,249.2708874098054 L 212.05366802553232,249.2708874098054"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,157.447418,243.501617)">
+                <g>
                   <path
                     id="g-svg-38"
                     fill="rgba(0,0,0,0)"
-                    d="M 30.498918419571964,5.769263141263906 L 28.088184814465507,25.623440623225008 L 0,18.70032485370831 L 7.092097740850704,0 L 30.498918419571964,5.769263141263906"
+                    d="M 187.94633197446768,249.2708874098054 L 185.53559836936122,269.1250648917665 L 157.44741355489572,262.2019491222498 L 164.53951129574642,243.5016242685415 L 187.94633197446768,249.2708874098054"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,131.832230,232.298386)">
+                <g>
                   <path
                     id="g-svg-39"
                     fill="rgba(255,192,203,1)"
-                    d="M 32.70728090348513,11.203237679175857 L 25.615183162634423,29.903562532884166 L 0,16.459677317873115 L 11.361294934623118,0 L 32.70728090348513,11.203237679175857"
+                    d="M 164.53951129574642,243.5016242685415 L 157.44741355489572,262.2019491222498 L 131.8322303922613,248.75806390723875 L 143.1935253268844,232.29838658936563 L 164.53951129574642,243.5016242685415"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110.178711,216.312271)">
+                <g>
                   <path
                     id="g-svg-40"
                     fill="rgba(0,0,0,0)"
-                    d="M 33.01481510741655,15.986120765286103 L 21.653520172793435,32.44579808315922 L 0,13.262453164815895 L 14.970214963422023,0 L 33.01481510741655,15.986120765286103"
+                    d="M 143.1935253268844,232.29838658936563 L 131.8322303922613,248.75806390723875 L 110.17871021946786,229.57471898889543 L 125.14892518288988,216.31226582407953 L 143.1935253268844,232.29838658936563"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.745277,196.472321)">
+                <g>
                   <path
                     id="g-svg-41"
                     fill="rgba(255,192,203,1)"
-                    d="M 31.403648261275094,19.83994861970271 L 16.43343329785307,33.102401784518605 L 0,9.294463440875376 L 17.709120513064207,0 L 31.403648261275094,19.83994861970271"
+                    d="M 125.14892518288988,216.31226582407953 L 110.17871021946786,229.57471898889543 L 93.74527692161479,205.7667806452522 L 111.454397434679,196.47231720437682 L 125.14892518288988,216.31226582407953"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,83.486984,173.931564)">
+                <g>
                   <path
                     id="g-svg-42"
                     fill="rgba(0,0,0,0)"
-                    d="M 27.967415525805222,22.540750775621007 L 10.258295012741016,31.835214216496382 L 0,4.786313285751163 L 19.41883634852104,0 L 27.967415525805222,22.540750775621007"
+                    d="M 111.454397434679,196.47231720437682 L 93.74527692161479,205.7667806452522 L 83.48698190887377,178.71787971450698 L 102.90581825739481,173.93156642875581 L 111.454397434679,196.47231720437682"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,150)">
+                <g>
                   <path
                     id="g-svg-43"
                     fill="rgba(255,192,203,1)"
-                    d="M 22.905818257394813,23.931566428755815 L 3.486981908873773,28.717879714506978 L 0,0 L 20,0 L 22.905818257394813,23.931566428755815"
+                    d="M 102.90581825739481,173.93156642875581 L 83.48698190887377,178.71787971450698 L 80,150 L 100,150 L 102.90581825739481,173.93156642875581"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,121.282120)">
+                <g>
                   <path
                     id="g-svg-44"
                     fill="rgba(0,0,0,0)"
-                    d="M 20,28.71787971450695 L 0,28.71787971450695 L 3.4869819088737586,0 L 22.9058182573948,4.786313285751163 L 20,28.71787971450695"
+                    d="M 100,150 L 80,150 L 83.48698190887376,121.28212028549305 L 102.9058182573948,126.06843357124421 L 100,150"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,83.486984,94.233223)">
+                <g>
                   <path
                     id="g-svg-45"
                     fill="rgba(255,192,203,1)"
-                    d="M 19.41883634852104,31.835214216496468 L 0,27.048900930745305 L 10.258295012741087,0 L 27.96741552580528,9.294463440875376 L 19.41883634852104,31.835214216496468"
+                    d="M 102.9058182573948,126.06843357124421 L 83.48698190887376,121.28212028549305 L 93.74527692161485,94.23321935474775 L 111.45439743467904,103.52768279562312 L 102.9058182573948,126.06843357124421"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.745277,70.425278)">
+                <g>
                   <path
                     id="g-svg-46"
                     fill="rgba(0,0,0,0)"
-                    d="M 17.709120513064192,33.10240178451856 L 0,23.807938343643187 L 16.43343329785303,0 L 31.403648261275052,13.26245316481591 L 17.709120513064192,33.10240178451856"
+                    d="M 111.45439743467904,103.52768279562312 L 93.74527692161485,94.23321935474775 L 110.17871021946787,70.42528101110456 L 125.1489251828899,83.68773417592047 L 111.45439743467904,103.52768279562312"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110.178711,51.241936)">
+                <g>
                   <path
                     id="g-svg-47"
                     fill="rgba(255,192,203,1)"
-                    d="M 14.970214963422023,32.44579808315923 L 0,19.183344918343323 L 21.65352017279342,0 L 33.01481510741654,16.45967731787313 L 14.970214963422023,32.44579808315923"
+                    d="M 125.1489251828899,83.68773417592047 L 110.17871021946787,70.42528101110456 L 131.8322303922613,51.241936092761236 L 143.1935253268844,67.70161341063437 L 125.1489251828899,83.68773417592047"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,131.832230,37.798050)">
+                <g>
                   <path
                     id="g-svg-48"
                     fill="rgba(0,0,0,0)"
-                    d="M 11.361294934623118,29.903562532884138 L 0,13.443885215011008 L 25.615183162634423,0 L 32.70728090348513,18.700324853708295 L 11.361294934623118,29.903562532884138"
+                    d="M 143.1935253268844,67.70161341063437 L 131.8322303922613,51.241936092761236 L 157.44741355489572,37.79805087775023 L 164.53951129574642,56.49837573145852 L 143.1935253268844,67.70161341063437"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,157.447418,30.874935)">
+                <g>
                   <path
                     id="g-svg-49"
                     fill="rgba(255,192,203,1)"
-                    d="M 7.092097740850704,25.623440623225015 L 0,6.92311576951672 L 28.088184814465563,0 L 30.49891841957202,19.85417748196108 L 7.092097740850704,25.623440623225015"
+                    d="M 164.53951129574642,56.49837573145852 L 157.44741355489572,37.79805087775023 L 185.53559836936128,30.874935108233508 L 187.94633197446774,50.72911259019459 L 164.53951129574642,56.49837573145852"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,185.535599,30.874935)">
+                <g>
                   <path
                     id="g-svg-50"
                     fill="rgba(0,0,0,0)"
-                    d="M 2.410733605106458,19.85417748196108 L 0,0 L 28.928803261277494,1.4210854715202004e-14 L 26.518069656171036,19.854177481961095 L 2.410733605106458,19.85417748196108"
+                    d="M 187.94633197446774,50.72911259019459 L 185.53559836936128,30.874935108233508 L 214.46440163063878,30.874935108233522 L 212.05366802553232,50.7291125901946 L 187.94633197446774,50.72911259019459"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,212.053665,30.874935)">
+                <g>
                   <path
                     id="g-svg-51"
                     fill="rgba(255,192,203,1)"
-                    d="M 0,19.85417748196108 L 2.410733605106458,0 L 30.498918419571936,6.923115769516706 L 23.406820678721232,25.623440623225 L 0,19.85417748196108"
+                    d="M 212.05366802553232,50.7291125901946 L 214.46440163063878,30.874935108233522 L 242.55258644510425,37.79805087775023 L 235.46048870425355,56.49837573145852 L 212.05366802553232,50.7291125901946"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,235.460495,37.798050)">
+                <g>
                   <path
                     id="g-svg-52"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,18.700324853708295 L 7.092097740850704,0 L 32.70728090348521,13.44388521501105 L 21.345985968862095,29.903562532884166 L 0,18.700324853708295"
+                    d="M 235.46048870425355,56.49837573145852 L 242.55258644510425,37.79805087775023 L 268.16776960773876,51.24193609276128 L 256.80647467311564,67.7016134106344 L 235.46048870425355,56.49837573145852"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,256.806488,51.241936)">
+                <g>
                   <path
                     id="g-svg-53"
                     fill="rgba(255,192,203,1)"
-                    d="M 0,16.459677317873115 L 11.361294934623118,0 L 33.01481510741655,19.183344918343337 L 18.0446001439945,32.44579808315923 L 0,16.459677317873115"
+                    d="M 256.80647467311564,67.7016134106344 L 268.16776960773876,51.24193609276128 L 289.8212897805322,70.42528101110462 L 274.85107481711015,83.68773417592051 L 256.80647467311564,67.7016134106344"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,274.851074,70.425278)">
+                <g>
                   <path
                     id="g-svg-54"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,13.262453164815895 L 14.970214963422052,0 L 31.40364826127501,23.8079383436431 L 13.694527748210817,33.10240178451848 L 0,13.262453164815895"
+                    d="M 274.85107481711015,83.68773417592051 L 289.8212897805322,70.42528101110462 L 306.25472307838515,94.23321935474772 L 288.54560256532096,103.5276827956231 L 274.85107481711015,83.68773417592051"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,288.545593,94.233223)">
+                <g>
                   <path
                     id="g-svg-55"
                     fill="rgba(255,192,203,1)"
-                    d="M 0,9.294463440875376 L 17.709120513064192,0 L 27.96741552580528,27.048900930745447 L 8.548579177284239,31.83521421649658 L 0,9.294463440875376"
+                    d="M 288.54560256532096,103.5276827956231 L 306.25472307838515,94.23321935474772 L 316.51301809112624,121.28212028549316 L 297.0941817426052,126.0684335712443 L 288.54560256532096,103.5276827956231"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-56"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-57"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,100,50)">
+          <g id="g-svg-56" fill="none" class="axis-main-group">
+            <g id="g-svg-57" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-58"
                   fill="none"
                   class="axis-line"
-                  d="M 200,100 A 100 100 0 1 0 0 100 A 100 100 0 1 0 200 99.99999999999997"
+                  d="M 300,150 A 100 100 0 1 0 100 150 A 100 100 0 1 0 300 149.99999999999997"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-60"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-60" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-61"
                 fill="none"
                 transform="matrix(1,0,0,1,300,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-87"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -585,14 +544,14 @@
                 transform="matrix(1,0,0,1,297.094177,173.931564)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.709418,-2.393157)">
+                <g>
                   <line
                     id="g-svg-88"
                     fill="none"
-                    x1="9.70941817426052"
-                    y1="2.3931566428755775"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-9.70941817426052"
+                    y2="-2.3931566428755775"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -605,14 +564,14 @@
                 transform="matrix(1,0,0,1,288.545593,196.472321)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.854560,-4.647232)">
+                <g>
                   <line
                     id="g-svg-89"
                     fill="none"
-                    x1="8.8545602565321"
-                    y1="4.647231720437686"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-8.8545602565321"
+                    y2="-4.647231720437686"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -625,14 +584,14 @@
                 transform="matrix(1,0,0,1,274.851074,216.312271)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.485107,-6.631227)">
+                <g>
                   <line
                     id="g-svg-90"
                     fill="none"
-                    x1="7.485107481711012"
-                    y1="6.631226582407952"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-7.485107481711012"
+                    y2="-6.631226582407952"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -645,14 +604,14 @@
                 transform="matrix(1,0,0,1,256.806488,232.298386)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5.680647,-8.229838)">
+                <g>
                   <line
                     id="g-svg-91"
                     fill="none"
-                    x1="5.680647467311558"
-                    y1="8.229838658936565"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.680647467311558"
+                    y2="-8.229838658936565"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -665,14 +624,14 @@
                 transform="matrix(1,0,0,1,235.460495,243.501617)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-3.546049,-9.350163)">
+                <g>
                   <line
                     id="g-svg-92"
                     fill="none"
-                    x1="3.5460488704253557"
-                    y1="9.350162426854148"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-3.5460488704253557"
+                    y2="-9.350162426854148"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -685,14 +644,14 @@
                 transform="matrix(1,0,0,1,212.053665,249.270889)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-1.205367,-9.927089)">
+                <g>
                   <line
                     id="g-svg-93"
                     fill="none"
-                    x1="1.2053668025532323"
-                    y1="9.92708874098054"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-1.2053668025532323"
+                    y2="-9.92708874098054"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -705,14 +664,14 @@
                 transform="matrix(1,0,0,1,187.946335,249.270889)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-9.927089)">
+                <g>
                   <line
                     id="g-svg-94"
                     fill="none"
                     x1="0"
-                    y1="9.92708874098054"
+                    y1="0"
                     x2="1.2053668025532311"
-                    y2="0"
+                    y2="-9.92708874098054"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -725,14 +684,14 @@
                 transform="matrix(1,0,0,1,164.539505,243.501617)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-9.350163)">
+                <g>
                   <line
                     id="g-svg-95"
                     fill="none"
                     x1="0"
-                    y1="9.350162426854148"
+                    y1="0"
                     x2="3.5460488704253565"
-                    y2="0"
+                    y2="-9.350162426854148"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -745,14 +704,14 @@
                 transform="matrix(1,0,0,1,143.193527,232.298386)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.229838)">
+                <g>
                   <line
                     id="g-svg-96"
                     fill="none"
                     x1="0"
-                    y1="8.229838658936565"
+                    y1="0"
                     x2="5.680647467311557"
-                    y2="0"
+                    y2="-8.229838658936565"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -765,14 +724,14 @@
                 transform="matrix(1,0,0,1,125.148926,216.312271)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-6.631227)">
+                <g>
                   <line
                     id="g-svg-97"
                     fill="none"
                     x1="0"
-                    y1="6.631226582407952"
+                    y1="0"
                     x2="7.485107481711012"
-                    y2="0"
+                    y2="-6.631226582407952"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -785,14 +744,14 @@
                 transform="matrix(1,0,0,1,111.454399,196.472321)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-4.647232)">
+                <g>
                   <line
                     id="g-svg-98"
                     fill="none"
                     x1="0"
-                    y1="4.6472317204376825"
+                    y1="0"
                     x2="8.8545602565321"
-                    y2="0"
+                    y2="-4.6472317204376825"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -805,14 +764,14 @@
                 transform="matrix(1,0,0,1,102.905815,173.931564)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-2.393157)">
+                <g>
                   <line
                     id="g-svg-99"
                     fill="none"
                     x1="0"
-                    y1="2.393156642875581"
+                    y1="0"
                     x2="9.709418174260518"
-                    y2="0"
+                    y2="-2.393156642875581"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -825,14 +784,14 @@
                 transform="matrix(1,0,0,1,100,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-100"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -845,7 +804,7 @@
                 transform="matrix(1,0,0,1,102.905815,126.068436)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-101"
                     fill="none"
@@ -865,7 +824,7 @@
                 transform="matrix(1,0,0,1,111.454399,103.527679)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-102"
                     fill="none"
@@ -885,7 +844,7 @@
                 transform="matrix(1,0,0,1,125.148926,83.687737)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-103"
                     fill="none"
@@ -905,7 +864,7 @@
                 transform="matrix(1,0,0,1,143.193527,67.701614)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-104"
                     fill="none"
@@ -925,7 +884,7 @@
                 transform="matrix(1,0,0,1,164.539505,56.498375)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-105"
                     fill="none"
@@ -945,7 +904,7 @@
                 transform="matrix(1,0,0,1,187.946335,50.729111)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-106"
                     fill="none"
@@ -965,13 +924,13 @@
                 transform="matrix(1,0,0,1,212.053665,50.729111)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-1.205367,0)">
+                <g>
                   <line
                     id="g-svg-107"
                     fill="none"
-                    x1="1.205366802553232"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-1.205366802553232"
                     y2="9.92708874098054"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -985,13 +944,13 @@
                 transform="matrix(1,0,0,1,235.460495,56.498375)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-3.546049,0)">
+                <g>
                   <line
                     id="g-svg-108"
                     fill="none"
-                    x1="3.5460488704253557"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-3.5460488704253557"
                     y2="9.350162426854148"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -1005,13 +964,13 @@
                 transform="matrix(1,0,0,1,256.806488,67.701614)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5.680647,0)">
+                <g>
                   <line
                     id="g-svg-109"
                     fill="none"
-                    x1="5.680647467311562"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5.680647467311562"
                     y2="8.22983865893656"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -1025,13 +984,13 @@
                 transform="matrix(1,0,0,1,274.851074,83.687737)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.485107,0)">
+                <g>
                   <line
                     id="g-svg-110"
                     fill="none"
-                    x1="7.4851074817110135"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.4851074817110135"
                     y2="6.631226582407948"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -1045,13 +1004,13 @@
                 transform="matrix(1,0,0,1,288.545593,103.527679)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-8.854560,0)">
+                <g>
                   <line
                     id="g-svg-111"
                     fill="none"
-                    x1="8.854560256532096"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-8.854560256532096"
                     y2="4.647231720437691"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -1065,13 +1024,13 @@
                 transform="matrix(1,0,0,1,297.094177,126.068436)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.709418,0)">
+                <g>
                   <line
                     id="g-svg-112"
                     fill="none"
-                    x1="9.709418174260522"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-9.709418174260522"
                     y2="2.3931566428755695"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -1080,19 +1039,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-113"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            />
+            <g id="g-svg-113" fill="none" class="axis-label-group" />
           </g>
-          <g
-            id="g-svg-114"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-114" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisGrid6.svg b/__tests__/integration/snapshots/AxisGrid6.svg
index e858d7943..b77fb4584 100644
--- a/__tests__/integration/snapshots/AxisGrid6.svg
+++ b/__tests__/integration/snapshots/AxisGrid6.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-115"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-116" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,280,150)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-115" fill="none" width="400" height="300">
+        <g id="g-svg-116" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 20,0 L 0,0"
+                    d="M 300,150 L 280,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,272.077515,184.710693)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 18.01937735804836,8.677674782351176 L 0,0"
+                    d="M 290.0968867902419,193.38837391175582 L 272.07750943219355,184.71069912940465"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,249.879181,212.546524)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 12.46979603717466,15.6366296493606 L 0,0"
+                    d="M 262.34898018587336,228.18314824680297 L 249.8791841486987,212.54651859744237"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,217.801682,227.994232)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 4.450418679126301,19.498558243636467 L 0,0"
+                    d="M 222.25209339563145,247.49279121818236 L 217.80167471650515,227.9942329745459"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,177.747910,227.994232)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,19.498558243636467 L 4.4504186791262725,0"
+                    d="M 177.74790660436858,247.49279121818236 L 182.19832528349485,227.9942329745459"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,137.651016,212.546524)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,15.6366296493606 L 12.46979603717466,0"
+                    d="M 137.6510198141267,228.183148246803 L 150.12081585130136,212.5465185974424"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,109.903114,184.710693)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,8.677674782351176 L 18.019377358048388,0"
+                    d="M 109.90311320975809,193.38837391175582 L 127.92249056780648,184.71069912940465"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,150)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 20,0"
+                    d="M 100,150 L 120,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,109.903114,106.611626)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 18.019377358048388,8.677674782351147"
+                    d="M 109.90311320975806,106.61162608824424 L 127.92249056780645,115.28930087059538"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,137.651016,71.816849)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 12.46979603717466,15.6366296493606"
+                    d="M 137.65101981412664,71.81685175319703 L 150.1208158513013,87.45348140255763"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,177.747910,52.507210)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 4.450418679126301,19.498558243636467"
+                    d="M 177.74790660436847,52.50720878181767 L 182.19832528349477,72.00576702545413"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,217.801682,52.507210)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 4.4504186791262725,0 L 0,19.498558243636467"
+                    d="M 222.25209339563142,52.50720878181764 L 217.80167471650515,72.0057670254541"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,249.879181,71.816849)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 12.46979603717466,0 L 0,15.6366296493606"
+                    d="M 262.34898018587336,71.81685175319701 L 249.8791841486987,87.45348140255761"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,272.077515,106.611626)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,165 +164,145 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 18.01937735804836,0 L 0,8.677674782351161"
+                    d="M 290.0968867902419,106.61162608824417 L 272.07750943219355,115.28930087059533"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              >
-                <g transform="matrix(1,0,0,1,272.077515,150)">
+              <g id="g-svg-4" fill="none" class="grid-region-group">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="rgba(255,192,203,1)"
-                    d="M 27.92249056780645,0 L 7.922490567806449,0 A 80.00000000000001 80.00000000000001 0 0 1 0 34.710699129404645 L 0,34.710699129404645 L 18.01937735804836,43.38837391175582 A 100 100 0 0 0 27.92249056780645 0 L 27.92249056780645,0"
+                    d="M 300,150 L 280,150 A 80.00000000000001 80.00000000000001 0 0 1 272.07750943219355 184.71069912940465 L 272.07750943219355,184.71069912940465 L 290.0968867902419,193.38837391175582 A 100 100 0 0 0 300 150 L 300,150"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,249.879181,184.710693)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="rgba(0,0,0,0)"
-                    d="M 40.21770264154321,8.677674782351232 L 22.198325283494853,5.684341886080802e-14 A 80 80 0 0 1 0 27.835819468037784 L 0,27.835819468037784 L 12.46979603717466,43.472449117398384 A 100 100 0 0 0 40.21770264154321 8.677674782351232 L 40.21770264154321,8.677674782351232"
+                    d="M 290.0968867902419,193.38837391175582 L 272.07750943219355,184.71069912940465 A 80 80 0 0 1 249.8791841486987 212.54651859744237 L 249.8791841486987,212.54651859744237 L 262.34898018587336,228.18314824680297 A 100 100 0 0 0 290.0968867902419 193.38837391175582 L 290.0968867902419,193.38837391175582"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,217.801682,212.546524)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="rgba(255,192,203,1)"
-                    d="M 44.54730546936821,15.636629649360628 L 32.07750943219355,2.842170943040401e-14 A 80 80 0 0 1 0 15.447714377103551 L 0,15.447714377103551 L 4.450418679126301,34.94627262074002 A 100 100 0 0 0 44.54730546936821 15.636629649360628 L 44.54730546936821,15.636629649360628"
+                    d="M 262.34898018587336,228.18314824680297 L 249.8791841486987,212.54651859744237 A 80 80 0 0 1 217.80167471650515 227.9942329745459 L 217.80167471650515,227.9942329745459 L 222.25209339563145,247.49279121818236 A 100 100 0 0 0 262.34898018587336 228.18314824680297 L 262.34898018587336,228.18314824680297"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,177.747910,227.994232)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="rgba(0,0,0,0)"
-                    d="M 44.504186791262896,19.498558243636467 L 40.053768112136595,0 A 80 80 0 0 1 4.450418679126301 0 L 4.450418679126301,0 L 2.842170943040401e-14,19.498558243636467 A 100 100 0 0 0 44.504186791262896 19.498558243636467 L 44.504186791262896,19.498558243636467"
+                    d="M 222.25209339563145,247.49279121818236 L 217.80167471650515,227.9942329745459 A 80 80 0 0 1 182.19832528349485 227.9942329745459 L 182.19832528349485,227.9942329745459 L 177.74790660436858,247.49279121818236 A 100 100 0 0 0 222.25209339563145 247.49279121818236 L 222.25209339563145,247.49279121818236"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,137.651016,212.546524)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="rgba(255,192,203,1)"
-                    d="M 40.09688679024188,34.94627262073999 L 44.547305469368155,15.447714377103523 A 79.99999999999999 79.99999999999999 0 0 1 12.46979603717466 2.842170943040401e-14 L 12.46979603717466,2.842170943040401e-14 L 0,15.636629649360628 A 100 100 0 0 0 40.09688679024188 34.94627262073999 L 40.09688679024188,34.94627262073999"
+                    d="M 177.74790660436858,247.49279121818236 L 182.19832528349485,227.9942329745459 A 79.99999999999999 79.99999999999999 0 0 1 150.12081585130136 212.5465185974424 L 150.12081585130136,212.5465185974424 L 137.6510198141267,228.183148246803 A 100 100 0 0 0 177.74790660436858 247.49279121818236 L 177.74790660436858,247.49279121818236"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,109.903114,184.710693)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="rgba(0,0,0,0)"
-                    d="M 27.747906604368637,43.472449117398355 L 40.2177026415433,27.835819468037755 A 80 80 0 0 1 18.019377358048416 0 L 18.019377358048416,0 L 2.842170943040401e-14,8.677674782351176 A 99.99999999999999 99.99999999999999 0 0 0 27.747906604368637 43.472449117398355 L 27.747906604368637,43.472449117398355"
+                    d="M 137.6510198141267,228.183148246803 L 150.12081585130136,212.5465185974424 A 80 80 0 0 1 127.92249056780648 184.71069912940465 L 127.92249056780648,184.71069912940465 L 109.90311320975809,193.38837391175582 A 99.99999999999999 99.99999999999999 0 0 0 137.6510198141267 228.183148246803 L 137.6510198141267,228.183148246803"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,150)">
+                <g>
                   <path
                     id="g-svg-25"
                     fill="rgba(255,192,203,1)"
-                    d="M 9.90311320975809,43.38837391175585 L 27.922490567806477,34.710699129404674 A 80 80 0 0 1 20 2.842170943040401e-14 L 20,2.842170943040401e-14 L 0,2.842170943040401e-14 A 100 100 0 0 0 9.90311320975809 43.38837391175585 L 9.90311320975809,43.38837391175585"
+                    d="M 109.90311320975809,193.38837391175582 L 127.92249056780648,184.71069912940465 A 80 80 0 0 1 120 150 L 120,150 L 100,150 A 100 100 0 0 0 109.90311320975809 193.38837391175582 L 109.90311320975809,193.38837391175582"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,106.611626)">
+                <g>
                   <path
                     id="g-svg-26"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,43.388373911755764 L 20,43.388373911755764 A 80 80 0 0 1 27.92249056780645 8.677674782351147 L 27.92249056780645,8.677674782351147 L 9.903113209758061,0 A 100 100 0 0 0 0 43.388373911755764 L 0,43.388373911755764"
+                    d="M 100,150 L 120,150 A 80 80 0 0 1 127.92249056780645 115.28930087059538 L 127.92249056780645,115.28930087059538 L 109.90311320975806,106.61162608824424 A 100 100 0 0 0 100 150 L 100,150"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,109.903114,71.816849)">
+                <g>
                   <path
                     id="g-svg-27"
                     fill="rgba(255,192,203,1)"
-                    d="M 0,34.79477433504722 L 18.019377358048388,43.47244911739837 A 80 80 0 0 1 40.21770264154324 15.636629649360614 L 40.21770264154324,15.636629649360614 L 27.74790660436858,1.4210854715202004e-14 A 100 100 0 0 0 0 34.79477433504722 L 0,34.79477433504722"
+                    d="M 109.90311320975806,106.61162608824424 L 127.92249056780645,115.28930087059538 A 80 80 0 0 1 150.1208158513013 87.45348140255763 L 150.1208158513013,87.45348140255763 L 137.65101981412664,71.81685175319703 A 100 100 0 0 0 109.90311320975806 106.61162608824424 L 109.90311320975806,106.61162608824424"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,137.651016,52.507210)">
+                <g>
                   <path
                     id="g-svg-28"
                     fill="rgba(0,0,0,0)"
-                    d="M 2.842170943040401e-14,19.30964297137936 L 12.469796037174689,34.94627262073996 A 80 80 0 0 1 44.547305469368155 19.498558243636467 L 44.547305469368155,19.498558243636467 L 40.096886790241854,0 A 100 100 0 0 0 2.842170943040401e-14 19.30964297137936 L 2.842170943040401e-14,19.30964297137936"
+                    d="M 137.65101981412664,71.81685175319703 L 150.1208158513013,87.45348140255763 A 80 80 0 0 1 182.19832528349477 72.00576702545413 L 182.19832528349477,72.00576702545413 L 177.74790660436847,52.50720878181767 A 100 100 0 0 0 137.65101981412664 71.81685175319703 L 137.65101981412664,71.81685175319703"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,177.747910,50)">
+                <g>
                   <path
                     id="g-svg-29"
                     fill="rgba(255,192,203,1)"
-                    d="M 0,2.5072087818176527 L 4.450418679126301,22.00576702545412 A 80 80 0 0 1 40.05376811213668 22.00576702545409 L 40.05376811213668,22.00576702545409 L 44.50418679126295,2.5072087818176243 A 99.99999999999999 99.99999999999999 0 0 0 0 2.5072087818176527 L 0,2.5072087818176527"
+                    d="M 177.74790660436847,52.50720878181767 L 182.19832528349477,72.00576702545413 A 80 80 0 0 1 217.80167471650515 72.0057670254541 L 217.80167471650515,72.0057670254541 L 222.25209339563142,52.50720878181764 A 99.99999999999999 99.99999999999999 0 0 0 177.74790660436847 52.50720878181767 L 177.74790660436847,52.50720878181767"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,217.801682,52.507210)">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="rgba(0,0,0,0)"
-                    d="M 4.450418679126301,0 L 2.842170943040401e-14,19.498558243636467 A 80.00000000000001 80.00000000000001 0 0 1 32.07750943219358 34.946272620739975 L 32.07750943219358,34.946272620739975 L 44.54730546936824,19.309642971379375 A 100 100 0 0 0 4.450418679126301 0 L 4.450418679126301,0"
+                    d="M 222.25209339563142,52.50720878181764 L 217.80167471650515,72.0057670254541 A 80.00000000000001 80.00000000000001 0 0 1 249.8791841486987 87.45348140255761 L 249.8791841486987,87.45348140255761 L 262.34898018587336,71.81685175319701 A 100 100 0 0 0 222.25209339563142 52.50720878181764 L 222.25209339563142,52.50720878181764"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,249.879181,71.816849)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="rgba(255,192,203,1)"
-                    d="M 12.46979603717466,0 L 0,15.6366296493606 A 80.00000000000003 80.00000000000003 0 0 1 22.198325283494853 43.47244911739831 L 22.198325283494853,43.47244911739831 L 40.21770264154321,34.79477433504715 A 100.00000000000001 100.00000000000001 0 0 0 12.46979603717466 0 L 12.46979603717466,0"
+                    d="M 262.34898018587336,71.81685175319701 L 249.8791841486987,87.45348140255761 A 80.00000000000003 80.00000000000003 0 0 1 272.07750943219355 115.28930087059533 L 272.07750943219355,115.28930087059533 L 290.0968867902419,106.61162608824417 A 100.00000000000001 100.00000000000001 0 0 0 262.34898018587336 71.81685175319701 L 262.34898018587336,71.81685175319701"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-32"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-33"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,100,50)">
+          <g id="g-svg-32" fill="none" class="axis-main-group">
+            <g id="g-svg-33" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-34"
                   fill="none"
                   class="axis-line"
-                  d="M 200,100 A 100 100 0 1 0 0 100 A 100 100 0 1 0 200 99.99999999999997"
+                  d="M 300,150 A 100 100 0 1 0 100 150 A 100 100 0 1 0 300 149.99999999999997"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-36" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-37"
                 fill="none"
                 transform="matrix(1,0,0,1,300,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -357,14 +316,14 @@
                 transform="matrix(1,0,0,1,290.096893,193.388367)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.009688,-4.338838)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
-                    x1="9.009688679024192"
-                    y1="4.338837391175581"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-9.009688679024192"
+                    y2="-4.338837391175581"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -377,14 +336,14 @@
                 transform="matrix(1,0,0,1,262.348969,228.183151)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-6.234898,-7.818315)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
-                    x1="6.2348980185873355"
-                    y1="7.8183148246802965"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-6.2348980185873355"
+                    y2="-7.8183148246802965"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -397,14 +356,14 @@
                 transform="matrix(1,0,0,1,222.252090,247.492798)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-2.225209,-9.749279)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
-                    x1="2.2252093395631443"
-                    y1="9.749279121818237"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-2.2252093395631443"
+                    y2="-9.749279121818237"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -417,14 +376,14 @@
                 transform="matrix(1,0,0,1,177.747910,247.492798)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-9.749279)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
                     x1="0"
-                    y1="9.749279121818237"
+                    y1="0"
                     x2="2.225209339563141"
-                    y2="0"
+                    y2="-9.749279121818237"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -437,14 +396,14 @@
                 transform="matrix(1,0,0,1,137.651016,228.183151)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.818315)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
                     x1="0"
-                    y1="7.818314824680302"
+                    y1="0"
                     x2="6.234898018587332"
-                    y2="0"
+                    y2="-7.818314824680302"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -457,14 +416,14 @@
                 transform="matrix(1,0,0,1,109.903114,193.388367)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-4.338838)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
                     x1="0"
-                    y1="4.338837391175582"
+                    y1="0"
                     x2="9.00968867902419"
-                    y2="0"
+                    y2="-4.338837391175582"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -477,14 +436,14 @@
                 transform="matrix(1,0,0,1,100,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -497,7 +456,7 @@
                 transform="matrix(1,0,0,1,109.903114,106.611626)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -517,7 +476,7 @@
                 transform="matrix(1,0,0,1,137.651016,71.816849)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -537,7 +496,7 @@
                 transform="matrix(1,0,0,1,177.747910,52.507210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -557,13 +516,13 @@
                 transform="matrix(1,0,0,1,222.252090,52.507210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-2.225209,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
-                    x1="2.2252093395631425"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-2.2252093395631425"
                     y2="9.749279121818237"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -577,13 +536,13 @@
                 transform="matrix(1,0,0,1,262.348969,71.816849)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-6.234898,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
-                    x1="6.234898018587334"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-6.234898018587334"
                     y2="7.818314824680299"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -597,13 +556,13 @@
                 transform="matrix(1,0,0,1,290.096893,106.611626)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-9.009688,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
-                    x1="9.00968867902419"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-9.00968867902419"
                     y2="4.338837391175583"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -612,19 +571,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-65"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            />
+            <g id="g-svg-65" fill="none" class="axis-label-group" />
           </g>
-          <g
-            id="g-svg-66"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-66" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisGrid7.svg b/__tests__/integration/snapshots/AxisGrid7.svg
index 8c6323e1d..bd22cbbfc 100644
--- a/__tests__/integration/snapshots/AxisGrid7.svg
+++ b/__tests__/integration/snapshots/AxisGrid7.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-67"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-68" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,150)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-67" fill="none" width="400" height="300">
+        <g id="g-svg-68" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 100,0 L 0,0"
+                    d="M 300,150 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,150)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 50,86.60254037844385 L 0,0"
+                    d="M 250,236.60254037844385 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,86.60254037844388 L 49.99999999999997,0"
+                    d="M 150.00000000000003,236.60254037844388 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 100,150 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,63.397461)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 50.00000000000006,86.60254037844385"
+                    d="M 149.99999999999994,63.39745962155615 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,63.397461)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,101 +76,81 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 50,0 L 0,86.60254037844386"
+                    d="M 250,63.39745962155614 L 200,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              >
-                <g transform="matrix(1,0,0,1,200,150)">
+              <g id="g-svg-4" fill="none" class="grid-region-group">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="rgba(255,192,203,1)"
-                    d="M 100,0 L 0,0 A 0 0 0 0 1 0 0 L 0,0 L 50,86.60254037844385 A 100 100 0 0 0 100 0 L 100,0"
+                    d="M 300,150 L 200,150 A 0 0 0 0 1 200 150 L 200,150 L 250,236.60254037844385 A 100 100 0 0 0 300 150 L 300,150"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="rgba(0,0,0,0)"
-                    d="M 100,86.60254037844385 L 50,0 A 0 0 0 0 1 50 0 L 50,0 L 2.842170943040401e-14,86.60254037844388 A 99.99999999999999 99.99999999999999 0 0 0 100 86.60254037844385 L 100,86.60254037844385"
+                    d="M 250,236.60254037844385 L 200,150 A 0 0 0 0 1 200 150 L 200,150 L 150.00000000000003,236.60254037844388 A 99.99999999999999 99.99999999999999 0 0 0 250 236.60254037844385 L 250,236.60254037844385"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,150)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="rgba(255,192,203,1)"
-                    d="M 50.00000000000003,86.60254037844388 L 100,0 A 0 0 0 0 1 100 0 L 100,0 L 0,0 A 100 100 0 0 0 50.00000000000003 86.60254037844388 L 50.00000000000003,86.60254037844388"
+                    d="M 150.00000000000003,236.60254037844388 L 200,150 A 0 0 0 0 1 200 150 L 200,150 L 100,150 A 100 100 0 0 0 150.00000000000003 236.60254037844388 L 150.00000000000003,236.60254037844388"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,63.397461)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="rgba(0,0,0,0)"
-                    d="M 0,86.60254037844385 L 100,86.60254037844385 A 0 0 0 0 1 100 86.60254037844385 L 100,86.60254037844385 L 49.99999999999994,0 A 100 100 0 0 0 0 86.60254037844385 L 0,86.60254037844385"
+                    d="M 100,150 L 200,150 A 0 0 0 0 1 200 150 L 200,150 L 149.99999999999994,63.39745962155615 A 100 100 0 0 0 100 150 L 100,150"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="rgba(255,192,203,1)"
-                    d="M 0,13.397459621556138 L 50.00000000000006,99.99999999999999 A 0 0 0 0 1 50.00000000000006 99.99999999999999 L 50.00000000000006,99.99999999999999 L 100.00000000000006,13.397459621556123 A 100.00000000000001 100.00000000000001 0 0 0 0 13.397459621556138 L 0,13.397459621556138"
+                    d="M 149.99999999999994,63.39745962155615 L 200,150 A 0 0 0 0 1 200 150 L 200,150 L 250,63.39745962155614 A 100.00000000000001 100.00000000000001 0 0 0 149.99999999999994 63.39745962155615 L 149.99999999999994,63.39745962155615"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-16"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,100,50)">
+          <g id="g-svg-16" fill="none" class="axis-main-group">
+            <g id="g-svg-17" fill="none" class="axis-line-group">
+              <g>
                 <path
                   id="g-svg-18"
                   fill="none"
                   class="axis-line"
-                  d="M 200,100 A 100 100 0 1 0 0 100 A 100 100 0 1 0 200 99.99999999999997"
+                  d="M 300,150 A 100 100 0 1 0 100 150 A 100 100 0 1 0 300 149.99999999999997"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-20"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-20" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-21"
                 fill="none"
                 transform="matrix(1,0,0,1,300,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -205,14 +164,14 @@
                 transform="matrix(1,0,0,1,250,236.602539)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,-8.660254)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="5.000000000000001"
-                    y1="8.660254037844386"
-                    x2="0"
-                    y2="0"
+                    x1="0"
+                    y1="0"
+                    x2="-5.000000000000001"
+                    y2="-8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -225,14 +184,14 @@
                 transform="matrix(1,0,0,1,150,236.602539)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-8.660254)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
                     x1="0"
-                    y1="8.660254037844387"
+                    y1="0"
                     x2="4.999999999999998"
-                    y2="0"
+                    y2="-8.660254037844387"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -245,14 +204,14 @@
                 transform="matrix(1,0,0,1,100,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
                     x1="0"
-                    y1="1.2246467991473533e-15"
+                    y1="0"
                     x2="10"
-                    y2="0"
+                    y2="-1.2246467991473533e-15"
                     class="axis-tick-item"
                     stroke-width="0"
                     stroke="rgba(0,0,0,1)"
@@ -265,7 +224,7 @@
                 transform="matrix(1,0,0,1,150,63.397461)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
@@ -285,13 +244,13 @@
                 transform="matrix(1,0,0,1,250,63.397461)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
-                    x1="5.000000000000001"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5.000000000000001"
                     y2="8.660254037844386"
                     class="axis-tick-item"
                     stroke-width="0"
@@ -300,19 +259,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-33"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            />
+            <g id="g-svg-33" fill="none" class="axis-label-group" />
           </g>
-          <g
-            id="g-svg-34"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-34" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisGrid8.svg b/__tests__/integration/snapshots/AxisGrid8.svg
index bdf3d0184..36a1acd7d 100644
--- a/__tests__/integration/snapshots/AxisGrid8.svg
+++ b/__tests__/integration/snapshots/AxisGrid8.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-35"
-        fill="none"
-        width="450"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-36" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-35" fill="none" width="450" height="500">
+        <g id="g-svg-36" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 200,0 A 200 200 0 0 1 400 200 A 200 200 0 0 1 200.00000000000003 400 A 200 200 0 0 1 0 200.00000000000003"
+                    d="M 200,50 A 200 200 0 0 1 400 250 A 200 200 0 0 1 200.00000000000003 450 A 200 200 0 0 1 0 250.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,33.333332,83.333336)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 166.66666666666669,0 A 166.66666666666669 166.66666666666669 0 0 1 333.33333333333337 166.66666666666669 A 166.66666666666669 166.66666666666669 0 0 1 166.6666666666667 333.33333333333337 A 166.66666666666669 166.66666666666669 0 0 1 0 166.6666666666667"
+                    d="M 200,83.33333333333331 A 166.66666666666669 166.66666666666669 0 0 1 366.6666666666667 250 A 166.66666666666669 166.66666666666669 0 0 1 200.00000000000003 416.6666666666667 A 166.66666666666669 166.66666666666669 0 0 1 33.333333333333314 250.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,66.666664,116.666664)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 133.33333333333334,0 A 133.33333333333334 133.33333333333334 0 0 1 266.66666666666674 133.33333333333334 A 133.33333333333334 133.33333333333334 0 0 1 133.33333333333337 266.66666666666674 A 133.33333333333334 133.33333333333334 0 0 1 0 133.33333333333337"
+                    d="M 200,116.66666666666666 A 133.33333333333334 133.33333333333334 0 0 1 333.33333333333337 250 A 133.33333333333334 133.33333333333334 0 0 1 200.00000000000003 383.33333333333337 A 133.33333333333334 133.33333333333334 0 0 1 66.66666666666666 250.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 100,0 A 100 100 0 0 1 200 100 A 100 100 0 0 1 100 200 A 100 100 0 0 1 0 100.00000000000003"
+                    d="M 200,150 A 100 100 0 0 1 300 250 A 100 100 0 0 1 200 350 A 100 100 0 0 1 100 250.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,133.333328,183.333328)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 66.66666666666669,0 A 66.66666666666669 66.66666666666669 0 0 1 133.33333333333337 66.66666666666669 A 66.66666666666669 66.66666666666669 0 0 1 66.66666666666669 133.33333333333337 A 66.66666666666669 66.66666666666669 0 0 1 0 66.66666666666669"
+                    d="M 200,183.33333333333331 A 66.66666666666669 66.66666666666669 0 0 1 266.6666666666667 250 A 66.66666666666669 66.66666666666669 0 0 1 200 316.6666666666667 A 66.66666666666669 66.66666666666669 0 0 1 133.33333333333331 250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,166.666672,216.666672)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,114 +76,93 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 33.33333333333337,0 A 33.33333333333334 33.33333333333334 0 0 1 66.66666666666671 33.33333333333334 A 33.33333333333334 33.33333333333334 0 0 1 33.33333333333337 66.66666666666671 A 33.33333333333334 33.33333333333334 0 0 1 2.842170943040401e-14 33.33333333333334"
+                    d="M 200,216.66666666666666 A 33.33333333333334 33.33333333333334 0 0 1 233.33333333333334 250 A 33.33333333333334 33.33333333333334 0 0 1 200 283.33333333333337 A 33.33333333333334 33.33333333333334 0 0 1 166.66666666666666 250"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              >
-                <g transform="matrix(1,0,0,1,0,50)">
+              <g id="g-svg-4" fill="none" class="grid-region-group">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="rgba(255,192,203,1)"
-                    d="M 200,0 A 200 200 0 0 1 400 200 A 200 200 0 0 1 200.00000000000003 400 A 200 200 0 0 1 0 200.00000000000003 L 33.333333333333314,200.00000000000003 A 166.66666666666669 166.66666666666669 0 0 0 200.00000000000003 366.6666666666667 A 166.66666666666669 166.66666666666669 0 0 0 366.6666666666667 200 A 166.66666666666669 166.66666666666669 0 0 0 200 33.333333333333314 L 200,0"
+                    d="M 200,50 A 200 200 0 0 1 400 250 A 200 200 0 0 1 200.00000000000003 450 A 200 200 0 0 1 0 250.00000000000003 L 33.333333333333314,250.00000000000003 A 166.66666666666669 166.66666666666669 0 0 0 200.00000000000003 416.6666666666667 A 166.66666666666669 166.66666666666669 0 0 0 366.6666666666667 250 A 166.66666666666669 166.66666666666669 0 0 0 200 83.33333333333331 L 200,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,33.333332,83.333336)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="rgba(0,0,0,0)"
-                    d="M 166.66666666666669,0 A 166.66666666666669 166.66666666666669 0 0 1 333.33333333333337 166.66666666666669 A 166.66666666666669 166.66666666666669 0 0 1 166.6666666666667 333.33333333333337 A 166.66666666666669 166.66666666666669 0 0 1 0 166.6666666666667 L 33.33333333333334,166.6666666666667 A 133.33333333333334 133.33333333333334 0 0 0 166.6666666666667 300.00000000000006 A 133.33333333333334 133.33333333333334 0 0 0 300.00000000000006 166.66666666666669 A 133.33333333333334 133.33333333333334 0 0 0 166.66666666666669 33.33333333333334 L 166.66666666666669,0"
+                    d="M 200,83.33333333333331 A 166.66666666666669 166.66666666666669 0 0 1 366.6666666666667 250 A 166.66666666666669 166.66666666666669 0 0 1 200.00000000000003 416.6666666666667 A 166.66666666666669 166.66666666666669 0 0 1 33.333333333333314 250.00000000000003 L 66.66666666666666,250.00000000000003 A 133.33333333333334 133.33333333333334 0 0 0 200.00000000000003 383.33333333333337 A 133.33333333333334 133.33333333333334 0 0 0 333.33333333333337 250 A 133.33333333333334 133.33333333333334 0 0 0 200 116.66666666666666 L 200,83.33333333333331"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,66.666664,116.666664)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="rgba(255,192,203,1)"
-                    d="M 133.33333333333334,0 A 133.33333333333334 133.33333333333334 0 0 1 266.66666666666674 133.33333333333334 A 133.33333333333334 133.33333333333334 0 0 1 133.33333333333337 266.66666666666674 A 133.33333333333334 133.33333333333334 0 0 1 0 133.33333333333337 L 33.33333333333334,133.33333333333337 A 100 100 0 0 0 133.33333333333334 233.33333333333334 A 100 100 0 0 0 233.33333333333334 133.33333333333334 A 100 100 0 0 0 133.33333333333334 33.33333333333334 L 133.33333333333334,0"
+                    d="M 200,116.66666666666666 A 133.33333333333334 133.33333333333334 0 0 1 333.33333333333337 250 A 133.33333333333334 133.33333333333334 0 0 1 200.00000000000003 383.33333333333337 A 133.33333333333334 133.33333333333334 0 0 1 66.66666666666666 250.00000000000003 L 100,250.00000000000003 A 100 100 0 0 0 200 350 A 100 100 0 0 0 300 250 A 100 100 0 0 0 200 150 L 200,116.66666666666666"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,150)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="rgba(0,0,0,0)"
-                    d="M 100,0 A 100 100 0 0 1 200 100 A 100 100 0 0 1 100 200 A 100 100 0 0 1 0 100.00000000000003 L 33.333333333333314,100 A 66.66666666666669 66.66666666666669 0 0 0 100 166.66666666666669 A 66.66666666666669 66.66666666666669 0 0 0 166.66666666666669 100 A 66.66666666666669 66.66666666666669 0 0 0 100 33.333333333333314 L 100,0"
+                    d="M 200,150 A 100 100 0 0 1 300 250 A 100 100 0 0 1 200 350 A 100 100 0 0 1 100 250.00000000000003 L 133.33333333333331,250 A 66.66666666666669 66.66666666666669 0 0 0 200 316.6666666666667 A 66.66666666666669 66.66666666666669 0 0 0 266.6666666666667 250 A 66.66666666666669 66.66666666666669 0 0 0 200 183.33333333333331 L 200,150"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,133.333328,183.333328)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="rgba(255,192,203,1)"
-                    d="M 66.66666666666669,0 A 66.66666666666669 66.66666666666669 0 0 1 133.33333333333337 66.66666666666669 A 66.66666666666669 66.66666666666669 0 0 1 66.66666666666669 133.33333333333337 A 66.66666666666669 66.66666666666669 0 0 1 0 66.66666666666669 L 33.33333333333334,66.66666666666669 A 33.33333333333334 33.33333333333334 0 0 0 66.66666666666669 100.00000000000006 A 33.33333333333334 33.33333333333334 0 0 0 100.00000000000003 66.66666666666669 A 33.33333333333334 33.33333333333334 0 0 0 66.66666666666669 33.33333333333334 L 66.66666666666669,0"
+                    d="M 200,183.33333333333331 A 66.66666666666669 66.66666666666669 0 0 1 266.6666666666667 250 A 66.66666666666669 66.66666666666669 0 0 1 200 316.6666666666667 A 66.66666666666669 66.66666666666669 0 0 1 133.33333333333331 250 L 166.66666666666666,250 A 33.33333333333334 33.33333333333334 0 0 0 200 283.33333333333337 A 33.33333333333334 33.33333333333334 0 0 0 233.33333333333334 250 A 33.33333333333334 33.33333333333334 0 0 0 200 216.66666666666666 L 200,183.33333333333331"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-16"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,50)">
+          <g id="g-svg-16" fill="none" class="axis-main-group">
+            <g id="g-svg-17" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-18"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="215"
+                  x1="200"
+                  y1="50"
+                  x2="200"
+                  y2="265"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,215)">
+                <g transform="matrix(0,-0.500000,0.500000,0,200,265)">
                   <path
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,200,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -218,13 +176,13 @@
                 transform="matrix(1,0,0,1,200,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -238,13 +196,13 @@
                 transform="matrix(1,0,0,1,200,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -258,13 +216,13 @@
                 transform="matrix(1,0,0,1,200,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -278,13 +236,13 @@
                 transform="matrix(1,0,0,1,200,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -298,13 +256,13 @@
                 transform="matrix(1,0,0,1,200,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -313,19 +271,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,180,50)"
+                transform="matrix(1,0,0,1,180,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-41"
                     fill="rgba(0,0,0,1)"
@@ -348,10 +301,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,180,83.333336)"
+                transform="matrix(1,0,0,1,180,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-42"
                     fill="rgba(0,0,0,1)"
@@ -374,10 +327,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,180,116.666664)"
+                transform="matrix(1,0,0,1,180,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -400,10 +353,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,180,150)"
+                transform="matrix(1,0,0,1,180,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -426,10 +379,10 @@
               <g
                 id="g-svg-39"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,180,183.333328)"
+                transform="matrix(1,0,0,1,180,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -452,10 +405,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,180,216.666672)"
+                transform="matrix(1,0,0,1,180,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -477,12 +430,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-47"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-47" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisGrid9.svg b/__tests__/integration/snapshots/AxisGrid9.svg
index 3fe94b629..d9c18a068 100644
--- a/__tests__/integration/snapshots/AxisGrid9.svg
+++ b/__tests__/integration/snapshots/AxisGrid9.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="400"
-        height="400"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-49" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="400" height="400">
+        <g id="g-svg-49" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 150,0 L 256.06601717798213,43.93398282201787 L 300,150 L 256.06601717798213,256.06601717798213 L 150.00000000000003,300 L 43.93398282201788,256.06601717798213 L 0,150.00000000000003 L 43.93398282201785,43.933982822017896"
+                    d="M 200,50 L 306.06601717798213,93.93398282201787 L 350,200 L 306.06601717798213,306.06601717798213 L 200.00000000000003,350 L 93.93398282201788,306.06601717798213 L 50,200.00000000000003 L 93.93398282201785,93.9339828220179"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,75,75)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 125,0 L 213.38834764831842,36.611652351681556 L 250,125 L 213.38834764831847,213.38834764831842 L 125.00000000000003,250 L 36.61165235168157,213.38834764831847 L 0,125.00000000000003 L 36.61165235168154,36.611652351681585"
+                    d="M 200,75 L 288.3883476483184,111.61165235168156 L 325,200 L 288.3883476483185,288.3883476483184 L 200.00000000000003,325 L 111.61165235168157,288.3883476483185 L 75,200.00000000000003 L 111.61165235168154,111.61165235168158"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,100)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 100,0 L 170.71067811865476,29.289321881345245 L 200,100 L 170.71067811865476,170.71067811865476 L 100,200 L 29.289321881345245,170.71067811865476 L 0,100.00000000000003 L 29.289321881345245,29.289321881345245"
+                    d="M 200,100 L 270.71067811865476,129.28932188134524 L 300,200 L 270.71067811865476,270.71067811865476 L 200,300 L 129.28932188134524,270.71067811865476 L 100,200.00000000000003 L 129.28932188134524,129.28932188134524"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,125)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 75,0 L 128.03300858899107,21.966991411008934 L 150,75 L 128.03300858899107,128.03300858899107 L 75,150 L 21.966991411008934,128.03300858899107 L 0,75 L 21.966991411008934,21.966991411008962"
+                    d="M 200,125 L 253.03300858899107,146.96699141100893 L 275,200 L 253.03300858899107,253.03300858899107 L 200,275 L 146.96699141100893,253.03300858899107 L 125,200 L 146.96699141100893,146.96699141100896"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 50,0 L 85.35533905932738,14.644660940672622 L 100,50 L 85.35533905932738,85.35533905932738 L 50,100 L 14.644660940672622,85.35533905932738 L 0,50 L 14.644660940672622,14.644660940672622"
+                    d="M 200,150 L 235.35533905932738,164.64466094067262 L 250,200 L 235.35533905932738,235.35533905932738 L 200,250 L 164.64466094067262,235.35533905932738 L 150,200 L 164.64466094067262,164.64466094067262"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,175,175)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,108 +76,87 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="0"
                     stroke-dasharray="4,4"
-                    d="M 25,0 L 42.67766952966369,7.322330470336311 L 50,25 L 42.67766952966369,42.67766952966369 L 25,50 L 7.322330470336311,42.67766952966369 L 0,25 L 7.322330470336311,7.322330470336311"
+                    d="M 200,175 L 217.6776695296637,182.3223304703363 L 225,200 L 217.6776695296637,217.6776695296637 L 200,225 L 182.3223304703363,217.6776695296637 L 175,200 L 182.3223304703363,182.3223304703363"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+              <g id="g-svg-4" fill="none" class="grid-region-group">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="rgba(242,206,165,1)"
-                    d="M 150,0 L 256.06601717798213,43.93398282201787 L 300,150 L 256.06601717798213,256.06601717798213 L 150.00000000000003,300 L 43.93398282201788,256.06601717798213 L 0,150.00000000000003 L 43.93398282201785,43.933982822017896 L 61.61165235168154,61.611652351681585 L 25,150.00000000000003 L 61.61165235168157,238.38834764831847 L 150.00000000000003,275 L 238.38834764831847,238.38834764831842 L 275,150 L 238.38834764831842,61.611652351681556 L 150,25 L 150,0"
+                    d="M 200,50 L 306.06601717798213,93.93398282201787 L 350,200 L 306.06601717798213,306.06601717798213 L 200.00000000000003,350 L 93.93398282201788,306.06601717798213 L 50,200.00000000000003 L 93.93398282201785,93.9339828220179 L 111.61165235168154,111.61165235168158 L 75,200.00000000000003 L 111.61165235168157,288.3883476483185 L 200.00000000000003,325 L 288.3883476483185,288.3883476483184 L 325,200 L 288.3883476483184,111.61165235168156 L 200,75 L 200,50"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,75,75)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="rgba(248,222,163,1)"
-                    d="M 125,0 L 213.38834764831842,36.611652351681556 L 250,125 L 213.38834764831847,213.38834764831842 L 125.00000000000003,250 L 36.61165235168157,213.38834764831847 L 0,125.00000000000003 L 36.61165235168154,36.611652351681585 L 54.289321881345245,54.289321881345245 L 25,125.00000000000003 L 54.289321881345245,195.71067811865476 L 125,225 L 195.71067811865476,195.71067811865476 L 225,125 L 195.71067811865476,54.289321881345245 L 125,25 L 125,0"
+                    d="M 200,75 L 288.3883476483184,111.61165235168156 L 325,200 L 288.3883476483185,288.3883476483184 L 200.00000000000003,325 L 111.61165235168157,288.3883476483185 L 75,200.00000000000003 L 111.61165235168154,111.61165235168158 L 129.28932188134524,129.28932188134524 L 100,200.00000000000003 L 129.28932188134524,270.71067811865476 L 200,300 L 270.71067811865476,270.71067811865476 L 300,200 L 270.71067811865476,129.28932188134524 L 200,100 L 200,75"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,100)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="rgba(198,207,147,1)"
-                    d="M 100,0 L 170.71067811865476,29.289321881345245 L 200,100 L 170.71067811865476,170.71067811865476 L 100,200 L 29.289321881345245,170.71067811865476 L 0,100.00000000000003 L 29.289321881345245,29.289321881345245 L 46.966991411008934,46.96699141100896 L 25,100 L 46.966991411008934,153.03300858899107 L 100,175 L 153.03300858899107,153.03300858899107 L 175,100 L 153.03300858899107,46.966991411008934 L 100,25 L 100,0"
+                    d="M 200,100 L 270.71067811865476,129.28932188134524 L 300,200 L 270.71067811865476,270.71067811865476 L 200,300 L 129.28932188134524,270.71067811865476 L 100,200.00000000000003 L 129.28932188134524,129.28932188134524 L 146.96699141100893,146.96699141100896 L 125,200 L 146.96699141100893,253.03300858899107 L 200,275 L 253.03300858899107,253.03300858899107 L 275,200 L 253.03300858899107,146.96699141100893 L 200,125 L 200,100"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,125)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="rgba(149,181,192,1)"
-                    d="M 75,0 L 128.03300858899107,21.966991411008934 L 150,75 L 128.03300858899107,128.03300858899107 L 75,150 L 21.966991411008934,128.03300858899107 L 0,75 L 21.966991411008934,21.966991411008962 L 39.64466094067262,39.64466094067262 L 25,75 L 39.64466094067262,110.35533905932738 L 75,125 L 110.35533905932738,110.35533905932738 L 125,75 L 110.35533905932738,39.64466094067262 L 75,25 L 75,0"
+                    d="M 200,125 L 253.03300858899107,146.96699141100893 L 275,200 L 253.03300858899107,253.03300858899107 L 200,275 L 146.96699141100893,253.03300858899107 L 125,200 L 146.96699141100893,146.96699141100896 L 164.64466094067262,164.64466094067262 L 150,200 L 164.64466094067262,235.35533905932738 L 200,250 L 235.35533905932738,235.35533905932738 L 250,200 L 235.35533905932738,164.64466094067262 L 200,150 L 200,125"
                     class="grid-region"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="rgba(242,206,165,1)"
-                    d="M 50,0 L 85.35533905932738,14.644660940672622 L 100,50 L 85.35533905932738,85.35533905932738 L 50,100 L 14.644660940672622,85.35533905932738 L 0,50 L 14.644660940672622,14.644660940672622 L 32.32233047033631,32.32233047033631 L 25,50 L 32.32233047033631,67.67766952966369 L 50,75 L 67.67766952966369,67.67766952966369 L 75,50 L 67.67766952966369,32.32233047033631 L 50,25 L 50,0"
+                    d="M 200,150 L 235.35533905932738,164.64466094067262 L 250,200 L 235.35533905932738,235.35533905932738 L 200,250 L 164.64466094067262,235.35533905932738 L 150,200 L 164.64466094067262,164.64466094067262 L 182.3223304703363,182.3223304703363 L 175,200 L 182.3223304703363,217.6776695296637 L 200,225 L 217.6776695296637,217.6776695296637 L 225,200 L 217.6776695296637,182.3223304703363 L 200,175 L 200,150"
                     class="grid-region"
                   />
                 </g>
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-16"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,50)">
+          <g id="g-svg-16" fill="none" class="axis-main-group">
+            <g id="g-svg-17" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-18"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="165"
+                  x1="200"
+                  y1="50"
+                  x2="200"
+                  y2="215"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,165)">
+                <g transform="matrix(0,-0.500000,0.500000,0,200,215)">
                   <path
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-21"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-21" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-22"
                 fill="none"
                 transform="matrix(1,0,0,1,200,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
@@ -218,7 +176,7 @@
                 transform="matrix(1,0,0,1,200,75)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
@@ -238,7 +196,7 @@
                 transform="matrix(1,0,0,1,200,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
@@ -258,7 +216,7 @@
                 transform="matrix(1,0,0,1,200,125)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
@@ -278,7 +236,7 @@
                 transform="matrix(1,0,0,1,200,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
@@ -298,7 +256,7 @@
                 transform="matrix(1,0,0,1,200,175)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -313,19 +271,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,190,50)"
+                transform="matrix(1,0,0,1,190,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-41"
                     fill="rgba(0,0,0,1)"
@@ -348,10 +301,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,190,75)"
+                transform="matrix(1,0,0,1,190,75)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-42"
                     fill="rgba(0,0,0,1)"
@@ -374,10 +327,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,190,100)"
+                transform="matrix(1,0,0,1,190,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -400,10 +353,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,190,125)"
+                transform="matrix(1,0,0,1,190,125)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -426,10 +379,10 @@
               <g
                 id="g-svg-39"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,190,150)"
+                transform="matrix(1,0,0,1,190,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -452,10 +405,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,190,175)"
+                transform="matrix(1,0,0,1,190,175)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -477,12 +430,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-47"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-47" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLabelEllipsisUpdate.svg b/__tests__/integration/snapshots/AxisLabelEllipsisUpdate.svg
index 08fe5e2e8..d5ba97151 100644
--- a/__tests__/integration/snapshots/AxisLabelEllipsisUpdate.svg
+++ b/__tests__/integration/snapshots/AxisLabelEllipsisUpdate.svg
@@ -6,42 +6,21 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-91"
-        fill="none"
-        width="800"
-        height="100"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-92" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-95"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
-          <g
-            id="g-svg-96"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-97"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,45,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-91" fill="none" width="800" height="100">
+        <g id="g-svg-92" fill="none">
+          <g id="g-svg-95" fill="none" class="axis-grid-group" />
+          <g id="g-svg-96" fill="none" class="axis-main-group">
+            <g id="g-svg-97" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-98"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="555"
-                  y2="0"
+                  x1="45"
+                  y1="50"
+                  x2="600"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="0.5"
                   stroke="rgba(0,0,0,1)"
@@ -50,19 +29,14 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-99"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-99" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-100"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,45,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1"
                     fill="none"
@@ -83,7 +57,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,92.136986,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2"
                     fill="none"
@@ -104,7 +78,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,137.753418,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-3"
                     fill="none"
@@ -125,7 +99,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,184.890411,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-4"
                     fill="none"
@@ -146,7 +120,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,232.027405,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-5"
                     fill="none"
@@ -167,7 +141,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,276.123291,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-6"
                     fill="none"
@@ -188,7 +162,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,323.260284,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-7"
                     fill="none"
@@ -209,7 +183,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,368.876709,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-8"
                     fill="none"
@@ -230,7 +204,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,416.013702,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-9"
                     fill="none"
@@ -251,7 +225,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,461.630127,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-10"
                     fill="none"
@@ -272,7 +246,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,508.767120,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-11"
                     fill="none"
@@ -293,7 +267,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,555.904114,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-12"
                     fill="none"
@@ -309,19 +283,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-124"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-124" fill="none" class="axis-label-group">
               <g
                 id="g-svg-125"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,45,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-13"
                     fill="rgba(0,0,0,1)"
@@ -349,7 +318,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,92.136986,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-14"
                     fill="rgba(0,0,0,1)"
@@ -377,7 +346,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,137.753418,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-15"
                     fill="rgba(0,0,0,1)"
@@ -405,7 +374,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,184.890411,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-16"
                     fill="rgba(0,0,0,1)"
@@ -433,7 +402,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,232.027405,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-17"
                     fill="rgba(0,0,0,1)"
@@ -461,7 +430,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,276.123291,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-18"
                     fill="rgba(0,0,0,1)"
@@ -489,7 +458,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,323.260284,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-19"
                     fill="rgba(0,0,0,1)"
@@ -517,7 +486,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,368.876709,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -545,7 +514,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,416.013702,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -573,7 +542,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,461.630127,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -601,7 +570,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,508.767120,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -629,7 +598,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,555.904114,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -653,15 +622,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-149"
-            fill="none"
-            class="axis-title-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
+          <g id="g-svg-149" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-93" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-93" fill="none">
+          <g>
             <path
               id="g-svg-27"
               fill="rgba(0,0,0,0)"
@@ -671,19 +635,18 @@
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="0"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-25" fill="none" class="marker" x="10" y="15" />
+          <g>
             <text
               id="g-svg-26"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="10"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -694,30 +657,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-94" fill="none" transform="matrix(1,0,0,1,80,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-94" fill="none" x="80">
+          <g>
             <path
               id="g-svg-30"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 85,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="80"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-28"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-28" fill="none" class="marker" x="90" y="15" />
+          <g>
             <text
               id="g-svg-29"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="90"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisLabelHideUpdate.svg b/__tests__/integration/snapshots/AxisLabelHideUpdate.svg
index c297c2534..88100d2ce 100644
--- a/__tests__/integration/snapshots/AxisLabelHideUpdate.svg
+++ b/__tests__/integration/snapshots/AxisLabelHideUpdate.svg
@@ -6,42 +6,21 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-32"
-        fill="none"
-        width="800"
-        height="100"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-33" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-36"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
-          <g
-            id="g-svg-37"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-38"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,45,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-31" fill="none" width="800" height="100">
+        <g id="g-svg-32" fill="none">
+          <g id="g-svg-35" fill="none" class="axis-grid-group" />
+          <g id="g-svg-36" fill="none" class="axis-main-group">
+            <g id="g-svg-37" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-39"
+                  id="g-svg-38"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="555"
-                  y2="0"
+                  x1="45"
+                  y1="50"
+                  x2="600"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="0.5"
                   stroke="rgba(0,0,0,1)"
@@ -50,19 +29,14 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-40"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-39" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-41"
+                id="g-svg-40"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,45,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1"
                     fill="none"
@@ -78,12 +52,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-42"
+                id="g-svg-41"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,92.136986,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2"
                     fill="none"
@@ -99,12 +73,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-43"
+                id="g-svg-42"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,137.753418,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-3"
                     fill="none"
@@ -120,12 +94,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-44"
+                id="g-svg-43"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,184.890411,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-4"
                     fill="none"
@@ -141,12 +115,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-45"
+                id="g-svg-44"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,232.027405,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-5"
                     fill="none"
@@ -162,12 +136,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-46"
+                id="g-svg-45"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,276.123291,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-6"
                     fill="none"
@@ -183,12 +157,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-47"
+                id="g-svg-46"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,323.260284,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-7"
                     fill="none"
@@ -204,12 +178,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-48"
+                id="g-svg-47"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,368.876709,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-8"
                     fill="none"
@@ -225,12 +199,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-49"
+                id="g-svg-48"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,416.013702,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-9"
                     fill="none"
@@ -246,12 +220,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-50"
+                id="g-svg-49"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,461.630127,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-10"
                     fill="none"
@@ -267,12 +241,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-51"
+                id="g-svg-50"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,508.767120,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-11"
                     fill="none"
@@ -288,12 +262,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-52"
+                id="g-svg-51"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,555.904114,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-12"
                     fill="none"
@@ -309,35 +283,32 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-65"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-64" fill="none" class="axis-label-group">
               <g
-                id="g-svg-66"
+                id="g-svg-65"
                 fill="none"
                 class="axis-label"
-                transform="matrix(1,0,0,1,20.920000,66)"
+                transform="matrix(1,0,0,1,45,66)"
               >
                 <g
                   id="g-svg-13"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
                   class="axis-label-item"
+                  transform="matrix(1,0,0,1,-24.080000,0)"
                 >
-                  <g transform="matrix(1,0,0,1,0,-11.500000)">
+                  <g>
                     <path
                       id="g-svg-15"
                       fill="rgba(255,0,0,1)"
-                      d="M 0,0 l 48.16,0 l 0,23 l-48.16 0 z"
+                      d="M 0,-11.5 l 48.16,0 l 0,23 l-48.16 0 z"
+                      x="0"
+                      y="-11.5"
                       width="48.16"
                       height="23"
                       visibility="visible"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-14"
                       fill="rgba(255,255,255,1)"
@@ -351,6 +322,8 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="left"
+                      x="0"
+                      y="0"
                       visibility="visible"
                     >
                       October
@@ -359,28 +332,30 @@
                 </g>
               </g>
               <g
-                id="g-svg-67"
+                id="g-svg-66"
                 fill="none"
                 class="axis-label"
-                transform="matrix(1,0,0,1,61.876986,66)"
+                transform="matrix(1,0,0,1,92.136986,66)"
               >
                 <g
                   id="g-svg-19"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
                   class="axis-label-item"
+                  transform="matrix(1,0,0,1,-30.260000,0)"
                 >
-                  <g transform="matrix(1,0,0,1,0,-11.500000)">
+                  <g>
                     <path
                       id="g-svg-21"
                       fill="rgba(255,0,0,1)"
-                      d="M 0,0 l 60.52,0 l 0,23 l-60.52 0 z"
+                      d="M 0,-11.5 l 60.52,0 l 0,23 l-60.52 0 z"
+                      x="0"
+                      y="-11.5"
                       width="60.52"
                       height="23"
                       visibility="hidden"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-20"
                       fill="rgba(255,255,255,1)"
@@ -394,6 +369,8 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="left"
+                      x="0"
+                      y="0"
                       visibility="hidden"
                     >
                       November
@@ -402,28 +379,30 @@
                 </g>
               </g>
               <g
-                id="g-svg-68"
+                id="g-svg-67"
                 fill="none"
                 class="axis-label"
-                transform="matrix(1,0,0,1,107.553417,66)"
+                transform="matrix(1,0,0,1,137.753418,66)"
               >
                 <g
                   id="g-svg-25"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
                   class="axis-label-item"
+                  transform="matrix(1,0,0,1,-30.200001,0)"
                 >
-                  <g transform="matrix(1,0,0,1,0,-11.500000)">
+                  <g>
                     <path
                       id="g-svg-27"
                       fill="rgba(255,0,0,1)"
-                      d="M 0,0 l 60.400000000000006,0 l 0,23 l-60.400000000000006 0 z"
+                      d="M 0,-11.5 l 60.400000000000006,0 l 0,23 l-60.400000000000006 0 z"
+                      x="0"
+                      y="-11.5"
                       width="60.400000000000006"
                       height="23"
                       visibility="visible"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-26"
                       fill="rgba(255,255,255,1)"
@@ -437,6 +416,8 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="left"
+                      x="0"
+                      y="0"
                       visibility="visible"
                     >
                       December
@@ -445,28 +426,30 @@
                 </g>
               </g>
               <g
-                id="g-svg-69"
+                id="g-svg-68"
                 fill="none"
                 class="axis-label"
-                transform="matrix(1,0,0,1,170.230412,66)"
+                transform="matrix(1,0,0,1,184.890411,66)"
               >
                 <g
                   id="g-svg-31"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
                   class="axis-label-item"
+                  transform="matrix(1,0,0,1,-14.660000,0)"
                 >
-                  <g transform="matrix(1,0,0,1,0,-11.500000)">
+                  <g>
                     <path
                       id="g-svg-33"
                       fill="rgba(255,0,0,1)"
-                      d="M 0,0 l 29.320000000000004,0 l 0,23 l-29.320000000000004 0 z"
+                      d="M 0,-11.5 l 29.320000000000004,0 l 0,23 l-29.320000000000004 0 z"
+                      x="0"
+                      y="-11.5"
                       width="29.320000000000004"
                       height="23"
                       visibility="hidden"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-32"
                       fill="rgba(255,255,255,1)"
@@ -480,6 +463,8 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="left"
+                      x="0"
+                      y="0"
                       visibility="hidden"
                     >
                       2012
@@ -488,28 +473,30 @@
                 </g>
               </g>
               <g
-                id="g-svg-70"
+                id="g-svg-69"
                 fill="none"
                 class="axis-label"
-                transform="matrix(1,0,0,1,205.847404,66)"
+                transform="matrix(1,0,0,1,232.027405,66)"
               >
                 <g
                   id="g-svg-37"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
                   class="axis-label-item"
+                  transform="matrix(1,0,0,1,-26.180000,0)"
                 >
-                  <g transform="matrix(1,0,0,1,0,-11.500000)">
+                  <g>
                     <path
                       id="g-svg-39"
                       fill="rgba(255,0,0,1)"
-                      d="M 0,0 l 52.36,0 l 0,23 l-52.36 0 z"
+                      d="M 0,-11.5 l 52.36,0 l 0,23 l-52.36 0 z"
+                      x="0"
+                      y="-11.5"
                       width="52.36"
                       height="23"
                       visibility="visible"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-38"
                       fill="rgba(255,255,255,1)"
@@ -523,6 +510,8 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="left"
+                      x="0"
+                      y="0"
                       visibility="visible"
                     >
                       February
@@ -531,28 +520,30 @@
                 </g>
               </g>
               <g
-                id="g-svg-71"
+                id="g-svg-70"
                 fill="none"
                 class="axis-label"
-                transform="matrix(1,0,0,1,257.563292,66)"
+                transform="matrix(1,0,0,1,276.123291,66)"
               >
                 <g
                   id="g-svg-43"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
                   class="axis-label-item"
+                  transform="matrix(1,0,0,1,-18.559999,0)"
                 >
-                  <g transform="matrix(1,0,0,1,0,-11.500000)">
+                  <g>
                     <path
                       id="g-svg-45"
                       fill="rgba(255,0,0,1)"
-                      d="M 0,0 l 37.12,0 l 0,23 l-37.12 0 z"
+                      d="M 0,-11.5 l 37.12,0 l 0,23 l-37.12 0 z"
+                      x="0"
+                      y="-11.5"
                       width="37.12"
                       height="23"
                       visibility="hidden"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-44"
                       fill="rgba(255,255,255,1)"
@@ -566,6 +557,8 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="left"
+                      x="0"
+                      y="0"
                       visibility="hidden"
                     >
                       March
@@ -574,28 +567,30 @@
                 </g>
               </g>
               <g
-                id="g-svg-72"
+                id="g-svg-71"
                 fill="none"
                 class="axis-label"
-                transform="matrix(1,0,0,1,309.440285,66)"
+                transform="matrix(1,0,0,1,323.260284,66)"
               >
                 <g
                   id="g-svg-49"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
                   class="axis-label-item"
+                  transform="matrix(1,0,0,1,-13.820000,0)"
                 >
-                  <g transform="matrix(1,0,0,1,0,-11.500000)">
+                  <g>
                     <path
                       id="g-svg-51"
                       fill="rgba(255,0,0,1)"
-                      d="M 0,0 l 27.64,0 l 0,23 l-27.64 0 z"
+                      d="M 0,-11.5 l 27.64,0 l 0,23 l-27.64 0 z"
+                      x="0"
+                      y="-11.5"
                       width="27.64"
                       height="23"
                       visibility="visible"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-50"
                       fill="rgba(255,255,255,1)"
@@ -609,6 +604,8 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="left"
+                      x="0"
+                      y="0"
                       visibility="visible"
                     >
                       April
@@ -617,28 +614,30 @@
                 </g>
               </g>
               <g
-                id="g-svg-73"
+                id="g-svg-72"
                 fill="none"
                 class="axis-label"
-                transform="matrix(1,0,0,1,356.376709,66)"
+                transform="matrix(1,0,0,1,368.876709,66)"
               >
                 <g
                   id="g-svg-55"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
                   class="axis-label-item"
+                  transform="matrix(1,0,0,1,-12.500000,0)"
                 >
-                  <g transform="matrix(1,0,0,1,0,-11.500000)">
+                  <g>
                     <path
                       id="g-svg-57"
                       fill="rgba(255,0,0,1)"
-                      d="M 0,0 l 25,0 l 0,23 l-25 0 z"
+                      d="M 0,-11.5 l 25,0 l 0,23 l-25 0 z"
+                      x="0"
+                      y="-11.5"
                       width="25"
                       height="23"
                       visibility="hidden"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-56"
                       fill="rgba(255,255,255,1)"
@@ -652,6 +651,8 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="left"
+                      x="0"
+                      y="0"
                       visibility="hidden"
                     >
                       May
@@ -660,28 +661,30 @@
                 </g>
               </g>
               <g
-                id="g-svg-74"
+                id="g-svg-73"
                 fill="none"
                 class="axis-label"
-                transform="matrix(1,0,0,1,401.533703,66)"
+                transform="matrix(1,0,0,1,416.013702,66)"
               >
                 <g
                   id="g-svg-61"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
                   class="axis-label-item"
+                  transform="matrix(1,0,0,1,-14.480000,0)"
                 >
-                  <g transform="matrix(1,0,0,1,0,-11.500000)">
+                  <g>
                     <path
                       id="g-svg-63"
                       fill="rgba(255,0,0,1)"
-                      d="M 0,0 l 28.96,0 l 0,23 l-28.96 0 z"
+                      d="M 0,-11.5 l 28.96,0 l 0,23 l-28.96 0 z"
+                      x="0"
+                      y="-11.5"
                       width="28.96"
                       height="23"
                       visibility="visible"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-62"
                       fill="rgba(255,255,255,1)"
@@ -695,6 +698,8 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="left"
+                      x="0"
+                      y="0"
                       visibility="visible"
                     >
                       June
@@ -703,28 +708,30 @@
                 </g>
               </g>
               <g
-                id="g-svg-75"
+                id="g-svg-74"
                 fill="none"
                 class="axis-label"
-                transform="matrix(1,0,0,1,449.370127,66)"
+                transform="matrix(1,0,0,1,461.630127,66)"
               >
                 <g
                   id="g-svg-67"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
                   class="axis-label-item"
+                  transform="matrix(1,0,0,1,-12.260000,0)"
                 >
-                  <g transform="matrix(1,0,0,1,0,-11.500000)">
+                  <g>
                     <path
                       id="g-svg-69"
                       fill="rgba(255,0,0,1)"
-                      d="M 0,0 l 24.520000000000003,0 l 0,23 l-24.520000000000003 0 z"
+                      d="M 0,-11.5 l 24.520000000000003,0 l 0,23 l-24.520000000000003 0 z"
+                      x="0"
+                      y="-11.5"
                       width="24.520000000000003"
                       height="23"
                       visibility="hidden"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-68"
                       fill="rgba(255,255,255,1)"
@@ -738,6 +745,8 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="left"
+                      x="0"
+                      y="0"
                       visibility="hidden"
                     >
                       July
@@ -746,28 +755,30 @@
                 </g>
               </g>
               <g
-                id="g-svg-76"
+                id="g-svg-75"
                 fill="none"
                 class="axis-label"
-                transform="matrix(1,0,0,1,487.687120,66)"
+                transform="matrix(1,0,0,1,508.767120,66)"
               >
                 <g
                   id="g-svg-73"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
                   class="axis-label-item"
+                  transform="matrix(1,0,0,1,-21.080000,0)"
                 >
-                  <g transform="matrix(1,0,0,1,0,-11.500000)">
+                  <g>
                     <path
                       id="g-svg-75"
                       fill="rgba(255,0,0,1)"
-                      d="M 0,0 l 42.160000000000004,0 l 0,23 l-42.160000000000004 0 z"
+                      d="M 0,-11.5 l 42.160000000000004,0 l 0,23 l-42.160000000000004 0 z"
+                      x="0"
+                      y="-11.5"
                       width="42.160000000000004"
                       height="23"
                       visibility="visible"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-74"
                       fill="rgba(255,255,255,1)"
@@ -781,6 +792,8 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="left"
+                      x="0"
+                      y="0"
                       visibility="visible"
                     >
                       August
@@ -789,28 +802,30 @@
                 </g>
               </g>
               <g
-                id="g-svg-77"
+                id="g-svg-76"
                 fill="none"
                 class="axis-label"
-                transform="matrix(1,0,0,1,523.664112,66)"
+                transform="matrix(1,0,0,1,555.904114,66)"
               >
                 <g
                   id="g-svg-79"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
                   class="axis-label-item"
+                  transform="matrix(1,0,0,1,-32.240002,0)"
                 >
-                  <g transform="matrix(1,0,0,1,0,-11.500000)">
+                  <g>
                     <path
                       id="g-svg-81"
                       fill="rgba(255,0,0,1)"
-                      d="M 0,0 l 64.48,0 l 0,23 l-64.48 0 z"
+                      d="M 0,-11.5 l 64.48,0 l 0,23 l-64.48 0 z"
+                      x="0"
+                      y="-11.5"
                       width="64.48"
                       height="23"
                       visibility="hidden"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <text
                       id="g-svg-80"
                       fill="rgba(255,255,255,1)"
@@ -824,6 +839,8 @@
                       font-weight="normal"
                       stroke-width="1"
                       text-anchor="left"
+                      x="0"
+                      y="0"
                       visibility="hidden"
                     >
                       September
@@ -833,15 +850,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-150"
-            fill="none"
-            class="axis-title-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
+          <g id="g-svg-149" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-34" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-33" fill="none">
+          <g>
             <path
               id="g-svg-87"
               fill="rgba(0,0,0,0)"
@@ -851,19 +863,18 @@
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="0"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-85"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-85" fill="none" class="marker" x="10" y="15" />
+          <g>
             <text
               id="g-svg-86"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="10"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -874,30 +885,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-35" fill="none" transform="matrix(1,0,0,1,80,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-34" fill="none" x="80">
+          <g>
             <path
               id="g-svg-90"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 85,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="80"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-88"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-88" fill="none" class="marker" x="90" y="15" />
+          <g>
             <text
               id="g-svg-89"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="90"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisLabelOverlapUpdate.svg b/__tests__/integration/snapshots/AxisLabelOverlapUpdate.svg
index 5fa40ae6c..9af19eeac 100644
--- a/__tests__/integration/snapshots/AxisLabelOverlapUpdate.svg
+++ b/__tests__/integration/snapshots/AxisLabelOverlapUpdate.svg
@@ -6,47 +6,27 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-76" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-77" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-80"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
-          <g
-            id="g-svg-81"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-82"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            />
-            <g
-              id="g-svg-83"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-75" fill="none">
+        <g id="g-svg-76" fill="none">
+          <g id="g-svg-79" fill="none" class="axis-grid-group" />
+          <g id="g-svg-80" fill="none" class="axis-main-group">
+            <g id="g-svg-81" fill="none" class="axis-line-group" />
+            <g id="g-svg-82" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-84"
+                id="g-svg-83"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,60,389.848450)"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
                     id="g-svg-1"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -56,18 +36,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-85"
+                id="g-svg-84"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,60,340.813965)"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
                     id="g-svg-2"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -77,18 +57,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-86"
+                id="g-svg-85"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,60,291.779480)"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
                     id="g-svg-3"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -98,18 +78,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-87"
+                id="g-svg-86"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,60,242.745010)"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
                     id="g-svg-4"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -119,18 +99,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-88"
+                id="g-svg-87"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,60,193.710541)"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
                     id="g-svg-5"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -140,18 +120,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-89"
+                id="g-svg-88"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,60,144.676071)"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
                     id="g-svg-6"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -161,18 +141,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-90"
+                id="g-svg-89"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,60,95.641594)"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
                     id="g-svg-7"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -182,18 +162,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-91"
+                id="g-svg-90"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,60,46.607121)"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
                     id="g-svg-8"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -203,19 +183,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-100"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-99" fill="none" class="axis-label-group">
               <g
-                id="g-svg-101"
+                id="g-svg-100"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,44,389.848450)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-9"
                     fill="rgba(0,0,0,1)"
@@ -237,12 +212,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-102"
+                id="g-svg-101"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,44,340.813965)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-10"
                     fill="rgba(0,0,0,1)"
@@ -264,12 +239,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-103"
+                id="g-svg-102"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,44,291.779480)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-11"
                     fill="rgba(0,0,0,1)"
@@ -291,12 +266,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-104"
+                id="g-svg-103"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,44,242.745010)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-12"
                     fill="rgba(0,0,0,1)"
@@ -318,12 +293,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-105"
+                id="g-svg-104"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,44,193.710541)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-13"
                     fill="rgba(0,0,0,1)"
@@ -345,12 +320,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-106"
+                id="g-svg-105"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,44,144.676071)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-14"
                     fill="rgba(0,0,0,1)"
@@ -372,12 +347,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-107"
+                id="g-svg-106"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,44,95.641594)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-15"
                     fill="rgba(0,0,0,1)"
@@ -399,12 +374,12 @@
                 </g>
               </g>
               <g
-                id="g-svg-108"
+                id="g-svg-107"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,44,46.607121)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-16"
                     fill="rgba(0,0,0,1)"
@@ -427,15 +402,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-117"
-            fill="none"
-            class="axis-title-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
+          <g id="g-svg-116" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-78" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-77" fill="none">
+          <g>
             <path
               id="g-svg-19"
               fill="rgba(0,0,0,0)"
@@ -445,19 +415,18 @@
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="0"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-17" fill="none" class="marker" x="10" y="15" />
+          <g>
             <text
               id="g-svg-18"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="10"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -468,30 +437,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-79" fill="none" transform="matrix(1,0,0,1,80,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-78" fill="none" x="80">
+          <g>
             <path
               id="g-svg-22"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 85,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="80"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-20"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-20" fill="none" class="marker" x="90" y="15" />
+          <g>
             <text
               id="g-svg-21"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="90"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisLabelRotateUpdate.svg b/__tests__/integration/snapshots/AxisLabelRotateUpdate.svg
index cc1584d52..f884b1a36 100644
--- a/__tests__/integration/snapshots/AxisLabelRotateUpdate.svg
+++ b/__tests__/integration/snapshots/AxisLabelRotateUpdate.svg
@@ -6,42 +6,21 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-23"
-        fill="none"
-        width="800"
-        height="100"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-24" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-27"
-            fill="none"
-            class="axis-grid-group"
-            transform="matrix(1,0,0,1,0,0)"
-          />
-          <g
-            id="g-svg-28"
-            fill="none"
-            class="axis-main-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-29"
-              fill="none"
-              class="axis-line-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,45,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-23" fill="none" width="800" height="100">
+        <g id="g-svg-24" fill="none">
+          <g id="g-svg-27" fill="none" class="axis-grid-group" />
+          <g id="g-svg-28" fill="none" class="axis-main-group">
+            <g id="g-svg-29" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-30"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="755"
-                  y2="0"
+                  x1="45"
+                  y1="50"
+                  x2="800"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="0.5"
                   stroke="rgba(0,0,0,1)"
@@ -50,19 +29,14 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-31"
-              fill="none"
-              class="axis-tick-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-31" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-32"
                 fill="none"
                 class="axis-tick"
                 transform="matrix(1,0,0,1,45,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1"
                     fill="none"
@@ -83,7 +57,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,109.123291,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2"
                     fill="none"
@@ -104,7 +78,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,171.178085,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-3"
                     fill="none"
@@ -125,7 +99,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,235.301376,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-4"
                     fill="none"
@@ -146,7 +120,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,299.424652,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-5"
                     fill="none"
@@ -167,7 +141,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,359.410950,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-6"
                     fill="none"
@@ -188,7 +162,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,423.534241,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-7"
                     fill="none"
@@ -209,7 +183,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,485.589050,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-8"
                     fill="none"
@@ -230,7 +204,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,549.712341,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-9"
                     fill="none"
@@ -251,7 +225,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,611.767151,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-10"
                     fill="none"
@@ -272,7 +246,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,675.890381,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-11"
                     fill="none"
@@ -293,7 +267,7 @@
                 class="axis-tick"
                 transform="matrix(1,0,0,1,740.013672,50)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-12"
                     fill="none"
@@ -309,19 +283,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-56"
-              fill="none"
-              class="axis-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+            <g id="g-svg-56" fill="none" class="axis-label-group">
               <g
                 id="g-svg-57"
                 fill="none"
                 class="axis-label"
                 transform="matrix(1,0,0,1,45,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-13"
                     fill="rgba(0,0,0,1)"
@@ -349,7 +318,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,109.123291,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-14"
                     fill="rgba(0,0,0,1)"
@@ -377,7 +346,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,171.178085,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-15"
                     fill="rgba(0,0,0,1)"
@@ -405,7 +374,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,235.301376,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-16"
                     fill="rgba(0,0,0,1)"
@@ -433,7 +402,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,299.424652,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-17"
                     fill="rgba(0,0,0,1)"
@@ -461,7 +430,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,359.410950,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-18"
                     fill="rgba(0,0,0,1)"
@@ -489,7 +458,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,423.534241,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-19"
                     fill="rgba(0,0,0,1)"
@@ -517,7 +486,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,485.589050,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -545,7 +514,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,549.712341,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -573,7 +542,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,611.767151,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -601,7 +570,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,675.890381,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -629,7 +598,7 @@
                 class="axis-label"
                 transform="matrix(1,0,0,1,740.013672,66)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -657,9 +626,9 @@
             id="g-svg-81"
             fill="none"
             class="axis-title-group"
-            transform="matrix(1,0,0,1,-1.900000,112)"
+            transform="matrix(1,0,0,1,9.760000,100.500000)"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-82"
                 fill="rgba(0,0,0,1)"
@@ -680,10 +649,10 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-25" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-25" fill="none">
+          <g>
             <path
-              id="g-svg-28"
+              id="g-svg-27"
               fill="rgba(0,0,0,0)"
               class=".background"
               d="M 5,0 l 51.44,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -51.44,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
@@ -691,19 +660,18 @@
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="0"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-26"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-25" fill="none" class="marker" x="10" y="15" />
+          <g>
             <text
-              id="g-svg-27"
+              id="g-svg-26"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="10"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
@@ -714,30 +682,29 @@
             </text>
           </g>
         </g>
-        <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,80,0)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-26" fill="none" x="80">
+          <g>
             <path
-              id="g-svg-31"
+              id="g-svg-30"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 85,0 l 40.64,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.64,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.64"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="80"
+              y="0"
             />
           </g>
-          <g
-            id="g-svg-29"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-28" fill="none" class="marker" x="90" y="15" />
+          <g>
             <text
-              id="g-svg-30"
+              id="g-svg-29"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="90"
+              y="15"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/AxisLinearBasis1.svg b/__tests__/integration/snapshots/AxisLinearBasis1.svg
index 88cede698..b6336996f 100644
--- a/__tests__/integration/snapshots/AxisLinearBasis1.svg
+++ b/__tests__/integration/snapshots/AxisLinearBasis1.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-0"
-        fill="none"
-        width="650"
-        height="80"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-0" fill="none" width="650" height="80">
+        <g id="g-svg-1" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,77.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 77.5,50 L 77.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,105,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 105,50 L 105,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,132.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 132.5,50 L 132.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,160,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 160,50 L 160,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,187.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 187.5,50 L 187.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,215,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 215.00000000000003,50 L 215.00000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,242.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 242.50000000000003,50 L 242.50000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,270,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 270,50 L 270,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 380.00000000000006,50 L 380.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,407.500000,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 407.5,50 L 407.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,435,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 435.00000000000006,50 L 435.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,50)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,50 L 462.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,490,50)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 490,50 L 490,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,517.500000,50)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 517.5,50 L 517.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,545,50)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 545,50 L 545,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,572.500000,50)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,80 +197,59 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 572.5,50 L 572.5,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-22"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-23"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,40,50)">
+          <g id="g-svg-22" fill="none" class="axis-main-group">
+            <g id="g-svg-23" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-24"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="230"
-                  y2="0"
+                  x1="40"
+                  y1="50"
+                  x2="270"
+                  y2="50"
                   class="axis-line axis-line-first"
                   stroke-width="5"
                   stroke="rgba(255,0,0,1)"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,380,50)">
+              <g>
                 <line
                   id="g-svg-25"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="245"
-                  y2="-1.83697019872103e-15"
+                  x1="380"
+                  y1="50"
+                  x2="625"
+                  y2="50"
                   class="axis-line axis-line-second"
                   stroke-width="5"
                   stroke="rgba(255,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,245,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,625,50)">
                   <path
                     id="g-svg-27"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(255,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-29"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
@@ -311,7 +269,7 @@
                 transform="matrix(1,0,0,1,77.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-47"
                     fill="none"
@@ -331,7 +289,7 @@
                 transform="matrix(1,0,0,1,105,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-48"
                     fill="none"
@@ -351,7 +309,7 @@
                 transform="matrix(1,0,0,1,132.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-49"
                     fill="none"
@@ -371,7 +329,7 @@
                 transform="matrix(1,0,0,1,160,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-50"
                     fill="none"
@@ -391,7 +349,7 @@
                 transform="matrix(1,0,0,1,187.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -411,7 +369,7 @@
                 transform="matrix(1,0,0,1,215,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -431,7 +389,7 @@
                 transform="matrix(1,0,0,1,242.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -451,7 +409,7 @@
                 transform="matrix(1,0,0,1,270,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -471,7 +429,7 @@
                 transform="matrix(1,0,0,1,380,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
@@ -491,7 +449,7 @@
                 transform="matrix(1,0,0,1,407.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
@@ -511,7 +469,7 @@
                 transform="matrix(1,0,0,1,435,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
@@ -531,7 +489,7 @@
                 transform="matrix(1,0,0,1,462.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
@@ -551,7 +509,7 @@
                 transform="matrix(1,0,0,1,490,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -571,7 +529,7 @@
                 transform="matrix(1,0,0,1,517.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -591,7 +549,7 @@
                 transform="matrix(1,0,0,1,545,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -611,7 +569,7 @@
                 transform="matrix(1,0,0,1,572.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -626,19 +584,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-63"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-63" fill="none" class="axis-label-group">
               <g
                 id="g-svg-64"
                 fill="none"
                 transform="matrix(1,0,0,1,50,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-81"
                     fill="rgba(0,0,0,1)"
@@ -665,7 +618,7 @@
                 transform="matrix(1,0,0,1,77.500000,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-82"
                     fill="rgba(0,0,0,1)"
@@ -692,7 +645,7 @@
                 transform="matrix(1,0,0,1,105,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-83"
                     fill="rgba(0,0,0,1)"
@@ -719,7 +672,7 @@
                 transform="matrix(1,0,0,1,132.500000,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-84"
                     fill="rgba(0,0,0,1)"
@@ -746,7 +699,7 @@
                 transform="matrix(1,0,0,1,160,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-85"
                     fill="rgba(0,0,0,1)"
@@ -773,7 +726,7 @@
                 transform="matrix(1,0,0,1,187.500000,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-86"
                     fill="rgba(0,0,0,1)"
@@ -800,7 +753,7 @@
                 transform="matrix(1,0,0,1,215,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-87"
                     fill="rgba(0,0,0,1)"
@@ -827,7 +780,7 @@
                 transform="matrix(1,0,0,1,242.500000,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-88"
                     fill="rgba(0,0,0,1)"
@@ -854,7 +807,7 @@
                 transform="matrix(1,0,0,1,270,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-89"
                     fill="rgba(0,0,0,1)"
@@ -881,7 +834,7 @@
                 transform="matrix(1,0,0,1,380,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-90"
                     fill="rgba(0,0,0,1)"
@@ -908,7 +861,7 @@
                 transform="matrix(1,0,0,1,407.500000,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-91"
                     fill="rgba(0,0,0,1)"
@@ -935,7 +888,7 @@
                 transform="matrix(1,0,0,1,435,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -962,7 +915,7 @@
                 transform="matrix(1,0,0,1,462.500000,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -989,7 +942,7 @@
                 transform="matrix(1,0,0,1,490,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -1016,7 +969,7 @@
                 transform="matrix(1,0,0,1,517.500000,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -1043,7 +996,7 @@
                 transform="matrix(1,0,0,1,545,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -1070,7 +1023,7 @@
                 transform="matrix(1,0,0,1,572.500000,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -1093,12 +1046,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-98"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-98" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearBasis2.svg b/__tests__/integration/snapshots/AxisLinearBasis2.svg
index e10a4591e..9f750af7f 100644
--- a/__tests__/integration/snapshots/AxisLinearBasis2.svg
+++ b/__tests__/integration/snapshots/AxisLinearBasis2.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-99"
-        fill="none"
-        width="200"
-        height="550"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-100" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-99" fill="none" width="200" height="550">
+        <g id="g-svg-100" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,72.500000)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,72.5 L 50,72.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,95)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,95 L 50,95"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,117.500000)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,117.50000000000001 L 50,117.50000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,140)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,140 L 50,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,162.500000)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,162.5 L 50,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,185)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,185.00000000000003 L 50,185.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,207.500000)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,207.50000000000003 L 50,207.50000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,230)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,230 L 50,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,252.500000)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,252.5 L 50,252.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,275)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,275 L 50,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,297.500000)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,297.5 L 50,297.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,320)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,320.00000000000006 L 50,320.00000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,342.500000)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,342.5 L 50,342.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,365)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,365.00000000000006 L 50,365.00000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,387.500000)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,387.5 L 50,387.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,410)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,410 L 50,410"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,432.500000)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,432.50000000000006 L 50,432.50000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,455)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,455 L 50,455"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,477.500000)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,73 +230,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,477.50000000000006 L 50,477.50000000000006"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="465"
+                  x1="50"
+                  y1="50"
+                  x2="50"
+                  y2="515"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,128,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,465)">
+                <g transform="matrix(0,-0.500000,0.500000,0,50,515)">
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,128,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-30" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -331,13 +289,13 @@
                 transform="matrix(1,0,0,1,50,72.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -351,13 +309,13 @@
                 transform="matrix(1,0,0,1,50,95)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -371,13 +329,13 @@
                 transform="matrix(1,0,0,1,50,117.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -391,13 +349,13 @@
                 transform="matrix(1,0,0,1,50,140)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -411,13 +369,13 @@
                 transform="matrix(1,0,0,1,50,162.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -431,13 +389,13 @@
                 transform="matrix(1,0,0,1,50,185)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -451,13 +409,13 @@
                 transform="matrix(1,0,0,1,50,207.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -471,13 +429,13 @@
                 transform="matrix(1,0,0,1,50,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -491,13 +449,13 @@
                 transform="matrix(1,0,0,1,50,252.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -511,13 +469,13 @@
                 transform="matrix(1,0,0,1,50,275)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -531,13 +489,13 @@
                 transform="matrix(1,0,0,1,50,297.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -551,13 +509,13 @@
                 transform="matrix(1,0,0,1,50,320)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -571,13 +529,13 @@
                 transform="matrix(1,0,0,1,50,342.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -591,13 +549,13 @@
                 transform="matrix(1,0,0,1,50,365)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -611,13 +569,13 @@
                 transform="matrix(1,0,0,1,50,387.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -631,13 +589,13 @@
                 transform="matrix(1,0,0,1,50,410)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -651,13 +609,13 @@
                 transform="matrix(1,0,0,1,50,432.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-68"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -671,13 +629,13 @@
                 transform="matrix(1,0,0,1,50,455)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -691,13 +649,13 @@
                 transform="matrix(1,0,0,1,50,477.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-70"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -706,19 +664,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-71"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-label-group">
               <g
                 id="g-svg-72"
                 fill="none"
                 transform="matrix(1,0,0,1,55,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-92"
                     fill="rgba(255,0,0,1)"
@@ -745,7 +698,7 @@
                 transform="matrix(1,0,0,1,55,72.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-94"
                     fill="rgba(255,0,0,1)"
@@ -772,7 +725,7 @@
                 transform="matrix(1,0,0,1,55,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-96"
                     fill="rgba(255,0,0,1)"
@@ -799,7 +752,7 @@
                 transform="matrix(1,0,0,1,55,117.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-98"
                     fill="rgba(255,0,0,1)"
@@ -826,7 +779,7 @@
                 transform="matrix(1,0,0,1,55,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-100"
                     fill="rgba(255,0,0,1)"
@@ -853,7 +806,7 @@
                 transform="matrix(1,0,0,1,55,162.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-102"
                     fill="rgba(255,0,0,1)"
@@ -880,7 +833,7 @@
                 transform="matrix(1,0,0,1,55,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-104"
                     fill="rgba(255,0,0,1)"
@@ -907,7 +860,7 @@
                 transform="matrix(1,0,0,1,55,207.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-106"
                     fill="rgba(255,0,0,1)"
@@ -934,7 +887,7 @@
                 transform="matrix(1,0,0,1,55,230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-108"
                     fill="rgba(255,0,0,1)"
@@ -961,7 +914,7 @@
                 transform="matrix(1,0,0,1,55,252.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-110"
                     fill="rgba(255,0,0,1)"
@@ -988,7 +941,7 @@
                 transform="matrix(1,0,0,1,55,275)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-112"
                     fill="rgba(255,0,0,1)"
@@ -1015,7 +968,7 @@
                 transform="matrix(1,0,0,1,55,297.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-114"
                     fill="rgba(255,0,0,1)"
@@ -1042,7 +995,7 @@
                 transform="matrix(1,0,0,1,55,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-116"
                     fill="rgba(255,0,0,1)"
@@ -1069,7 +1022,7 @@
                 transform="matrix(1,0,0,1,55,342.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-118"
                     fill="rgba(255,0,0,1)"
@@ -1096,7 +1049,7 @@
                 transform="matrix(1,0,0,1,55,365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-120"
                     fill="rgba(255,0,0,1)"
@@ -1123,7 +1076,7 @@
                 transform="matrix(1,0,0,1,55,387.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-122"
                     fill="rgba(255,0,0,1)"
@@ -1150,7 +1103,7 @@
                 transform="matrix(1,0,0,1,55,410)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-124"
                     fill="rgba(255,0,0,1)"
@@ -1177,7 +1130,7 @@
                 transform="matrix(1,0,0,1,55,432.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-126"
                     fill="rgba(255,0,0,1)"
@@ -1204,7 +1157,7 @@
                 transform="matrix(1,0,0,1,55,455)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-128"
                     fill="rgba(255,0,0,1)"
@@ -1231,7 +1184,7 @@
                 transform="matrix(1,0,0,1,55,477.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-130"
                     fill="rgba(255,0,0,1)"
@@ -1254,12 +1207,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-132"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-132" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearBasis3.svg b/__tests__/integration/snapshots/AxisLinearBasis3.svg
index 5ddc73173..f3d16f128 100644
--- a/__tests__/integration/snapshots/AxisLinearBasis3.svg
+++ b/__tests__/integration/snapshots/AxisLinearBasis3.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-133"
-        fill="none"
-        width="600"
-        height="600"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-134" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,100)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-133" fill="none" width="600" height="600">
+        <g id="g-svg-134" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,100 L 50,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,70,120)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 70,120 L 70,120"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,90,140)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 90,140 L 90,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110,160)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 110,160 L 110,160"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,130,180)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 130,180 L 130,180"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,200)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,200 L 150,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,220)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,220 L 170,220"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,240)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,240 L 190,240"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,210,260)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 210,260 L 210,260"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,280)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,280 L 230,280"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,300)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,300 L 250,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,270,320)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 270,320 L 270,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,290,340)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 290,340 L 290,340"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,310,360)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 310,360 L 310,360"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,330,380)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 330,380 L 330,380"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,400)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,400 L 350,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,370,420)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 370,420 L 370,420"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,390,440)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 390.00000000000006,440.00000000000006 L 390.00000000000006,440.00000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,460)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 410,460 L 410,460"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,430,480)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,73 +230,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 430,480 L 430,480"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,100)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="410.6066017177982"
-                  y2="410.6066017177982"
+                  x1="50"
+                  y1="100"
+                  x2="460.6066017177982"
+                  y2="510.6066017177982"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(255,165,0,1)"
                 />
-                <g transform="matrix(-0.353553,-0.353553,0.353553,-0.353553,410.606598,410.606598)">
+                <g transform="matrix(-0.353553,-0.353553,0.353553,-0.353553,460.606598,510.606598)">
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(255,165,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-30" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,50,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -331,13 +289,13 @@
                 transform="matrix(1,0,0,1,70,120)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -351,13 +309,13 @@
                 transform="matrix(1,0,0,1,90,140)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -371,13 +329,13 @@
                 transform="matrix(1,0,0,1,110,160)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -391,13 +349,13 @@
                 transform="matrix(1,0,0,1,130,180)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -411,13 +369,13 @@
                 transform="matrix(1,0,0,1,150,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -431,13 +389,13 @@
                 transform="matrix(1,0,0,1,170,220)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -451,13 +409,13 @@
                 transform="matrix(1,0,0,1,190,240)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -471,13 +429,13 @@
                 transform="matrix(1,0,0,1,210,260)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -491,13 +449,13 @@
                 transform="matrix(1,0,0,1,230,280)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -511,13 +469,13 @@
                 transform="matrix(1,0,0,1,250,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -531,13 +489,13 @@
                 transform="matrix(1,0,0,1,270,320)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -551,13 +509,13 @@
                 transform="matrix(1,0,0,1,290,340)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -571,13 +529,13 @@
                 transform="matrix(1,0,0,1,310,360)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -591,13 +549,13 @@
                 transform="matrix(1,0,0,1,330,380)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -611,13 +569,13 @@
                 transform="matrix(1,0,0,1,350,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -631,13 +589,13 @@
                 transform="matrix(1,0,0,1,370,420)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -651,13 +609,13 @@
                 transform="matrix(1,0,0,1,390,440)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-68"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -671,13 +629,13 @@
                 transform="matrix(1,0,0,1,410,460)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -691,13 +649,13 @@
                 transform="matrix(1,0,0,1,430,480)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-70"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -706,19 +664,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-71"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-label-group">
               <g
                 id="g-svg-72"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,53.535534,96.464462)"
+                transform="matrix(1,0,0,1,53.535534,96.464462)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -741,10 +694,10 @@
               <g
                 id="g-svg-73"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,73.535538,116.464462)"
+                transform="matrix(1,0,0,1,73.535538,116.464462)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -767,10 +720,10 @@
               <g
                 id="g-svg-74"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,93.535538,136.464462)"
+                transform="matrix(1,0,0,1,93.535538,136.464462)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -793,10 +746,10 @@
               <g
                 id="g-svg-75"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,113.535538,156.464462)"
+                transform="matrix(1,0,0,1,113.535538,156.464462)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -819,10 +772,10 @@
               <g
                 id="g-svg-76"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,133.535538,176.464462)"
+                transform="matrix(1,0,0,1,133.535538,176.464462)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -845,10 +798,10 @@
               <g
                 id="g-svg-77"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,153.535538,196.464462)"
+                transform="matrix(1,0,0,1,153.535538,196.464462)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -871,10 +824,10 @@
               <g
                 id="g-svg-78"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,173.535538,216.464462)"
+                transform="matrix(1,0,0,1,173.535538,216.464462)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-98"
                     fill="rgba(0,0,0,1)"
@@ -897,10 +850,10 @@
               <g
                 id="g-svg-79"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,193.535538,236.464462)"
+                transform="matrix(1,0,0,1,193.535538,236.464462)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-99"
                     fill="rgba(0,0,0,1)"
@@ -923,10 +876,10 @@
               <g
                 id="g-svg-80"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,213.535538,256.464478)"
+                transform="matrix(1,0,0,1,213.535538,256.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-100"
                     fill="rgba(0,0,0,1)"
@@ -949,10 +902,10 @@
               <g
                 id="g-svg-81"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,233.535538,276.464478)"
+                transform="matrix(1,0,0,1,233.535538,276.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-101"
                     fill="rgba(0,0,0,1)"
@@ -975,10 +928,10 @@
               <g
                 id="g-svg-82"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,253.535538,296.464478)"
+                transform="matrix(1,0,0,1,253.535538,296.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-102"
                     fill="rgba(0,0,0,1)"
@@ -1001,10 +954,10 @@
               <g
                 id="g-svg-83"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,273.535522,316.464478)"
+                transform="matrix(1,0,0,1,273.535522,316.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-103"
                     fill="rgba(0,0,0,1)"
@@ -1027,10 +980,10 @@
               <g
                 id="g-svg-84"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,293.535522,336.464478)"
+                transform="matrix(1,0,0,1,293.535522,336.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-104"
                     fill="rgba(0,0,0,1)"
@@ -1053,10 +1006,10 @@
               <g
                 id="g-svg-85"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,313.535522,356.464478)"
+                transform="matrix(1,0,0,1,313.535522,356.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-105"
                     fill="rgba(0,0,0,1)"
@@ -1079,10 +1032,10 @@
               <g
                 id="g-svg-86"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,333.535522,376.464478)"
+                transform="matrix(1,0,0,1,333.535522,376.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-106"
                     fill="rgba(0,0,0,1)"
@@ -1105,10 +1058,10 @@
               <g
                 id="g-svg-87"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,353.535522,396.464478)"
+                transform="matrix(1,0,0,1,353.535522,396.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-107"
                     fill="rgba(0,0,0,1)"
@@ -1131,10 +1084,10 @@
               <g
                 id="g-svg-88"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,373.535522,416.464478)"
+                transform="matrix(1,0,0,1,373.535522,416.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-108"
                     fill="rgba(0,0,0,1)"
@@ -1157,10 +1110,10 @@
               <g
                 id="g-svg-89"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,393.535522,436.464478)"
+                transform="matrix(1,0,0,1,393.535522,436.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-109"
                     fill="rgba(0,0,0,1)"
@@ -1183,10 +1136,10 @@
               <g
                 id="g-svg-90"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,413.535522,456.464478)"
+                transform="matrix(1,0,0,1,413.535522,456.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-110"
                     fill="rgba(0,0,0,1)"
@@ -1209,10 +1162,10 @@
               <g
                 id="g-svg-91"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,433.535522,476.464478)"
+                transform="matrix(1,0,0,1,433.535522,476.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-111"
                     fill="rgba(0,0,0,1)"
@@ -1234,12 +1187,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-112"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-112" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearBasis4.svg b/__tests__/integration/snapshots/AxisLinearBasis4.svg
index eba6cad24..1d4d592aa 100644
--- a/__tests__/integration/snapshots/AxisLinearBasis4.svg
+++ b/__tests__/integration/snapshots/AxisLinearBasis4.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-113"
-        fill="none"
-        width="650"
-        height="550"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-114" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,550,500)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-113" fill="none" width="650" height="550">
+        <g id="g-svg-114" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,500 L 550,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,527.500000,477.500000)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 527.5,477.5 L 527.5,477.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,505,455)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 505,455 L 505,455"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,482.500000,432.500000)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 482.5,432.5 L 482.5,432.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,460,410)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 460,410 L 460,410"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,437.500000,387.500000)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 437.5,387.5 L 437.5,387.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,415,365)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 415,365 L 415,365"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,392.500000,342.500000)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 392.5,342.5 L 392.5,342.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,370,320)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 370,320 L 370,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,347.500000,297.500000)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 347.5,297.5 L 347.5,297.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,325,275)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 325,275 L 325,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,302.500000,252.500000)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 302.5,252.49999999999997 L 302.5,252.49999999999997"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,280,230)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 279.99999999999994,229.99999999999994 L 279.99999999999994,229.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,257.500000,207.500000)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 257.5,207.5 L 257.5,207.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,235,185)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 234.99999999999994,184.99999999999994 L 234.99999999999994,184.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,212.500000,162.500000)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 212.5,162.5 L 212.5,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,190,140)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 190,140 L 190,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,167.500000,117.500000)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 167.49999999999994,117.49999999999994 L 167.49999999999994,117.49999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,145,95)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 145,95 L 145,95"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,122.500000,72.500000)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,74 +230,53 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 122.49999999999994,72.49999999999994 L 122.49999999999994,72.49999999999994"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,100,50)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
-                  x1="450"
-                  y1="450"
-                  x2="-10.606601717798213"
-                  y2="-10.606601717798211"
+                  x1="550"
+                  y1="500"
+                  x2="89.39339828220179"
+                  y2="39.39339828220179"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,255,1)"
                 />
-                <g transform="matrix(0.353553,0.353553,-0.353553,0.353553,-10.606602,-10.606602)">
+                <g transform="matrix(0.353553,0.353553,-0.353553,0.353553,89.393394,39.393398)">
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-30" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,550,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -331,14 +289,14 @@
                 transform="matrix(1,0,0,1,527.500000,477.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -351,14 +309,14 @@
                 transform="matrix(1,0,0,1,505,455)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -371,14 +329,14 @@
                 transform="matrix(1,0,0,1,482.500000,432.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -391,14 +349,14 @@
                 transform="matrix(1,0,0,1,460,410)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -411,14 +369,14 @@
                 transform="matrix(1,0,0,1,437.500000,387.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -431,14 +389,14 @@
                 transform="matrix(1,0,0,1,415,365)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -451,14 +409,14 @@
                 transform="matrix(1,0,0,1,392.500000,342.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -471,14 +429,14 @@
                 transform="matrix(1,0,0,1,370,320)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -491,14 +449,14 @@
                 transform="matrix(1,0,0,1,347.500000,297.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -511,14 +469,14 @@
                 transform="matrix(1,0,0,1,325,275)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -531,14 +489,14 @@
                 transform="matrix(1,0,0,1,302.500000,252.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -551,14 +509,14 @@
                 transform="matrix(1,0,0,1,280,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -571,14 +529,14 @@
                 transform="matrix(1,0,0,1,257.500000,207.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -591,14 +549,14 @@
                 transform="matrix(1,0,0,1,235,185)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -611,14 +569,14 @@
                 transform="matrix(1,0,0,1,212.500000,162.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -631,14 +589,14 @@
                 transform="matrix(1,0,0,1,190,140)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -651,14 +609,14 @@
                 transform="matrix(1,0,0,1,167.500000,117.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-68"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -671,14 +629,14 @@
                 transform="matrix(1,0,0,1,145,95)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -691,14 +649,14 @@
                 transform="matrix(1,0,0,1,122.500000,72.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-70"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,255,1)"
@@ -706,19 +664,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-71"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-label-group">
               <g
                 id="g-svg-72"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,560.606628,489.393402)"
+                transform="matrix(1,0,0,1,560.606628,489.393402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -741,10 +694,10 @@
               <g
                 id="g-svg-73"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,538.106628,466.893402)"
+                transform="matrix(1,0,0,1,538.106628,466.893402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -767,10 +720,10 @@
               <g
                 id="g-svg-74"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,515.606628,444.393402)"
+                transform="matrix(1,0,0,1,515.606628,444.393402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -793,10 +746,10 @@
               <g
                 id="g-svg-75"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,493.106598,421.893402)"
+                transform="matrix(1,0,0,1,493.106598,421.893402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -819,10 +772,10 @@
               <g
                 id="g-svg-76"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,470.606598,399.393402)"
+                transform="matrix(1,0,0,1,470.606598,399.393402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -845,10 +798,10 @@
               <g
                 id="g-svg-77"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,448.106598,376.893402)"
+                transform="matrix(1,0,0,1,448.106598,376.893402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -871,10 +824,10 @@
               <g
                 id="g-svg-78"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,425.606598,354.393402)"
+                transform="matrix(1,0,0,1,425.606598,354.393402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-98"
                     fill="rgba(0,0,0,1)"
@@ -897,10 +850,10 @@
               <g
                 id="g-svg-79"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,403.106598,331.893402)"
+                transform="matrix(1,0,0,1,403.106598,331.893402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-99"
                     fill="rgba(0,0,0,1)"
@@ -923,10 +876,10 @@
               <g
                 id="g-svg-80"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,380.606598,309.393402)"
+                transform="matrix(1,0,0,1,380.606598,309.393402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-100"
                     fill="rgba(0,0,0,1)"
@@ -949,10 +902,10 @@
               <g
                 id="g-svg-81"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,358.106598,286.893402)"
+                transform="matrix(1,0,0,1,358.106598,286.893402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-101"
                     fill="rgba(0,0,0,1)"
@@ -975,10 +928,10 @@
               <g
                 id="g-svg-82"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,335.606598,264.393402)"
+                transform="matrix(1,0,0,1,335.606598,264.393402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-102"
                     fill="rgba(0,0,0,1)"
@@ -1001,10 +954,10 @@
               <g
                 id="g-svg-83"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,313.106598,241.893402)"
+                transform="matrix(1,0,0,1,313.106598,241.893402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-103"
                     fill="rgba(0,0,0,1)"
@@ -1027,10 +980,10 @@
               <g
                 id="g-svg-84"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,290.606598,219.393402)"
+                transform="matrix(1,0,0,1,290.606598,219.393402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-104"
                     fill="rgba(0,0,0,1)"
@@ -1053,10 +1006,10 @@
               <g
                 id="g-svg-85"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,268.106598,196.893402)"
+                transform="matrix(1,0,0,1,268.106598,196.893402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-105"
                     fill="rgba(0,0,0,1)"
@@ -1079,10 +1032,10 @@
               <g
                 id="g-svg-86"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,245.606598,174.393402)"
+                transform="matrix(1,0,0,1,245.606598,174.393402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-106"
                     fill="rgba(0,0,0,1)"
@@ -1105,10 +1058,10 @@
               <g
                 id="g-svg-87"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,223.106598,151.893402)"
+                transform="matrix(1,0,0,1,223.106598,151.893402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-107"
                     fill="rgba(0,0,0,1)"
@@ -1131,10 +1084,10 @@
               <g
                 id="g-svg-88"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,200.606598,129.393402)"
+                transform="matrix(1,0,0,1,200.606598,129.393402)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-108"
                     fill="rgba(0,0,0,1)"
@@ -1157,10 +1110,10 @@
               <g
                 id="g-svg-89"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,178.106598,106.893394)"
+                transform="matrix(1,0,0,1,178.106598,106.893394)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-109"
                     fill="rgba(0,0,0,1)"
@@ -1183,10 +1136,10 @@
               <g
                 id="g-svg-90"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,155.606598,84.393394)"
+                transform="matrix(1,0,0,1,155.606598,84.393394)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-110"
                     fill="rgba(0,0,0,1)"
@@ -1209,10 +1162,10 @@
               <g
                 id="g-svg-91"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,133.106598,61.893398)"
+                transform="matrix(1,0,0,1,133.106598,61.893398)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-111"
                     fill="rgba(0,0,0,1)"
@@ -1234,12 +1187,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-112"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-112" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearBasis5.svg b/__tests__/integration/snapshots/AxisLinearBasis5.svg
index 511be722a..542ec5635 100644
--- a/__tests__/integration/snapshots/AxisLinearBasis5.svg
+++ b/__tests__/integration/snapshots/AxisLinearBasis5.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-113"
-        fill="none"
-        width="550"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-114" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-113" fill="none" width="550" height="150">
+        <g id="g-svg-114" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,72.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 72.5,50 L 72.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,95,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 95,50 L 95,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,117.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 117.50000000000001,50 L 117.50000000000001,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,140,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 140,50 L 140,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,50 L 162.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,185,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 185.00000000000003,50 L 185.00000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,207.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 207.50000000000003,50 L 207.50000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,50 L 230,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 320.00000000000006,50 L 320.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,342.500000,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 342.5,50 L 342.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,365,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 365.00000000000006,50 L 365.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,50 L 387.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,50)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 410,50 L 410,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,432.500000,50)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 432.50000000000006,50 L 432.50000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,455,50)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 455,50 L 455,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,477.500000,50)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,87 +197,66 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 477.50000000000006,50 L 477.50000000000006,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-22"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-23"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,40,50)">
+          <g id="g-svg-22" fill="none" class="axis-main-group">
+            <g id="g-svg-23" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-24"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="190"
-                  y2="0"
+                  x1="40"
+                  y1="50"
+                  x2="230"
+                  y2="50"
                   class="axis-line axis-line-first"
                   stroke-width="5"
                   stroke="rgba(255,192,203,1)"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,320,50)">
+              <g>
                 <line
                   id="g-svg-25"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="205"
-                  y2="-1.83697019872103e-15"
+                  x1="320"
+                  y1="50"
+                  x2="525"
+                  y2="50"
                   class="axis-line axis-line-second"
                   stroke-width="5"
                   stroke="rgba(255,192,203,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,205,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,525,50)">
                   <path
                     id="g-svg-27"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(255,192,203,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-29"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -311,14 +269,14 @@
                 transform="matrix(1,0,0,1,72.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-47"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -331,14 +289,14 @@
                 transform="matrix(1,0,0,1,95,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-48"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -351,14 +309,14 @@
                 transform="matrix(1,0,0,1,117.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-49"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -371,14 +329,14 @@
                 transform="matrix(1,0,0,1,140,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-50"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -391,14 +349,14 @@
                 transform="matrix(1,0,0,1,162.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -411,14 +369,14 @@
                 transform="matrix(1,0,0,1,185,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -431,14 +389,14 @@
                 transform="matrix(1,0,0,1,207.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -451,14 +409,14 @@
                 transform="matrix(1,0,0,1,230,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -471,14 +429,14 @@
                 transform="matrix(1,0,0,1,320,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -491,14 +449,14 @@
                 transform="matrix(1,0,0,1,342.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -511,14 +469,14 @@
                 transform="matrix(1,0,0,1,365,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -531,14 +489,14 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -551,14 +509,14 @@
                 transform="matrix(1,0,0,1,410,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -571,14 +529,14 @@
                 transform="matrix(1,0,0,1,432.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -591,14 +549,14 @@
                 transform="matrix(1,0,0,1,455,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -611,14 +569,14 @@
                 transform="matrix(1,0,0,1,477.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -626,19 +584,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-63"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-63" fill="none" class="axis-label-group">
               <g
                 id="g-svg-64"
                 fill="none"
-                transform="matrix(0,1,-1,0,50,55)"
+                transform="matrix(1,0,0,1,50,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-81"
                     fill="rgba(0,0,0,1)"
@@ -661,10 +614,10 @@
               <g
                 id="g-svg-65"
                 fill="none"
-                transform="matrix(0,1,-1,0,72.500000,55)"
+                transform="matrix(1,0,0,1,72.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-82"
                     fill="rgba(0,0,0,1)"
@@ -687,10 +640,10 @@
               <g
                 id="g-svg-66"
                 fill="none"
-                transform="matrix(0,1,-1,0,95,55)"
+                transform="matrix(1,0,0,1,95,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-83"
                     fill="rgba(0,0,0,1)"
@@ -713,10 +666,10 @@
               <g
                 id="g-svg-67"
                 fill="none"
-                transform="matrix(0,1,-1,0,117.500000,55)"
+                transform="matrix(1,0,0,1,117.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-84"
                     fill="rgba(0,0,0,1)"
@@ -739,10 +692,10 @@
               <g
                 id="g-svg-68"
                 fill="none"
-                transform="matrix(0,1,-1,0,140,55)"
+                transform="matrix(1,0,0,1,140,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-85"
                     fill="rgba(0,0,0,1)"
@@ -765,10 +718,10 @@
               <g
                 id="g-svg-69"
                 fill="none"
-                transform="matrix(0,1,-1,0,162.500000,55)"
+                transform="matrix(1,0,0,1,162.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-86"
                     fill="rgba(0,0,0,1)"
@@ -791,10 +744,10 @@
               <g
                 id="g-svg-70"
                 fill="none"
-                transform="matrix(0,1,-1,0,185,55)"
+                transform="matrix(1,0,0,1,185,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-87"
                     fill="rgba(0,0,0,1)"
@@ -817,10 +770,10 @@
               <g
                 id="g-svg-71"
                 fill="none"
-                transform="matrix(0,1,-1,0,207.500000,55)"
+                transform="matrix(1,0,0,1,207.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-88"
                     fill="rgba(0,0,0,1)"
@@ -843,10 +796,10 @@
               <g
                 id="g-svg-72"
                 fill="none"
-                transform="matrix(0,1,-1,0,230,55)"
+                transform="matrix(1,0,0,1,230,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-89"
                     fill="rgba(0,0,0,1)"
@@ -869,10 +822,10 @@
               <g
                 id="g-svg-73"
                 fill="none"
-                transform="matrix(0,1,-1,0,320,55)"
+                transform="matrix(1,0,0,1,320,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-90"
                     fill="rgba(0,0,0,1)"
@@ -895,10 +848,10 @@
               <g
                 id="g-svg-74"
                 fill="none"
-                transform="matrix(0,1,-1,0,342.500000,55)"
+                transform="matrix(1,0,0,1,342.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-91"
                     fill="rgba(0,0,0,1)"
@@ -921,10 +874,10 @@
               <g
                 id="g-svg-75"
                 fill="none"
-                transform="matrix(0,1,-1,0,365,55)"
+                transform="matrix(1,0,0,1,365,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -947,10 +900,10 @@
               <g
                 id="g-svg-76"
                 fill="none"
-                transform="matrix(0,1,-1,0,387.500000,55)"
+                transform="matrix(1,0,0,1,387.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -973,10 +926,10 @@
               <g
                 id="g-svg-77"
                 fill="none"
-                transform="matrix(0,1,-1,0,410,55)"
+                transform="matrix(1,0,0,1,410,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -999,10 +952,10 @@
               <g
                 id="g-svg-78"
                 fill="none"
-                transform="matrix(0,1,-1,0,432.500000,55)"
+                transform="matrix(1,0,0,1,432.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -1025,10 +978,10 @@
               <g
                 id="g-svg-79"
                 fill="none"
-                transform="matrix(0,1,-1,0,455,55)"
+                transform="matrix(1,0,0,1,455,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -1051,10 +1004,10 @@
               <g
                 id="g-svg-80"
                 fill="none"
-                transform="matrix(0,1,-1,0,477.500000,55)"
+                transform="matrix(1,0,0,1,477.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -1076,12 +1029,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-98"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-98" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearBasis6.svg b/__tests__/integration/snapshots/AxisLinearBasis6.svg
index 4d3b1ea37..aeea2cd9e 100644
--- a/__tests__/integration/snapshots/AxisLinearBasis6.svg
+++ b/__tests__/integration/snapshots/AxisLinearBasis6.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-99"
-        fill="none"
-        width="200"
-        height="550"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-100" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,500)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-99" fill="none" width="200" height="550">
+        <g id="g-svg-100" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,500 L 50,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,477.500000)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,477.5 L 50,477.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,455)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,455 L 50,455"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,432.500000)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,432.5 L 50,432.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,410)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,410 L 50,410"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,387.500000)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,387.5 L 50,387.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,365)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,365 L 50,365"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,342.500000)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,342.5 L 50,342.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,320)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,320 L 50,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,297.500000)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,297.5 L 50,297.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,275)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,275 L 50,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,252.500000)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,252.49999999999997 L 50,252.49999999999997"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,230)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,229.99999999999994 L 50,229.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,207.500000)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,207.5 L 50,207.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,185)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,184.99999999999994 L 50,184.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,162.500000)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,162.5 L 50,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,140)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,140 L 50,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,117.500000)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,117.49999999999994 L 50,117.49999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,95)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,95 L 50,95"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,72.500000)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,67 +230,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,72.49999999999994 L 50,72.49999999999994"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
-                  x1="0"
-                  y1="450"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="50"
+                  y1="500"
+                  x2="50"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(128,0,128,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,50,35)">
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(128,0,128,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-30" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,50,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -331,7 +289,7 @@
                 transform="matrix(1,0,0,1,50,477.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -351,7 +309,7 @@
                 transform="matrix(1,0,0,1,50,455)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -371,7 +329,7 @@
                 transform="matrix(1,0,0,1,50,432.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -391,7 +349,7 @@
                 transform="matrix(1,0,0,1,50,410)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
@@ -411,7 +369,7 @@
                 transform="matrix(1,0,0,1,50,387.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
@@ -431,7 +389,7 @@
                 transform="matrix(1,0,0,1,50,365)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
@@ -451,7 +409,7 @@
                 transform="matrix(1,0,0,1,50,342.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
@@ -471,7 +429,7 @@
                 transform="matrix(1,0,0,1,50,320)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -491,7 +449,7 @@
                 transform="matrix(1,0,0,1,50,297.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -511,7 +469,7 @@
                 transform="matrix(1,0,0,1,50,275)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -531,7 +489,7 @@
                 transform="matrix(1,0,0,1,50,252.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -551,7 +509,7 @@
                 transform="matrix(1,0,0,1,50,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
@@ -571,7 +529,7 @@
                 transform="matrix(1,0,0,1,50,207.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
@@ -591,7 +549,7 @@
                 transform="matrix(1,0,0,1,50,185)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
@@ -611,7 +569,7 @@
                 transform="matrix(1,0,0,1,50,162.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
@@ -631,7 +589,7 @@
                 transform="matrix(1,0,0,1,50,140)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="none"
@@ -651,7 +609,7 @@
                 transform="matrix(1,0,0,1,50,117.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-68"
                     fill="none"
@@ -671,7 +629,7 @@
                 transform="matrix(1,0,0,1,50,95)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="none"
@@ -691,7 +649,7 @@
                 transform="matrix(1,0,0,1,50,72.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-70"
                     fill="none"
@@ -706,19 +664,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-71"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-label-group">
               <g
                 id="g-svg-72"
                 fill="none"
                 transform="matrix(1,0,0,1,65,500)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -744,7 +697,7 @@
                 transform="matrix(1,0,0,1,65,477.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -770,7 +723,7 @@
                 transform="matrix(1,0,0,1,65,455)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -796,7 +749,7 @@
                 transform="matrix(1,0,0,1,65,432.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -822,7 +775,7 @@
                 transform="matrix(1,0,0,1,65,410)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -848,7 +801,7 @@
                 transform="matrix(1,0,0,1,65,387.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -874,7 +827,7 @@
                 transform="matrix(1,0,0,1,65,365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-98"
                     fill="rgba(0,0,0,1)"
@@ -900,7 +853,7 @@
                 transform="matrix(1,0,0,1,65,342.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-99"
                     fill="rgba(0,0,0,1)"
@@ -926,7 +879,7 @@
                 transform="matrix(1,0,0,1,65,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-100"
                     fill="rgba(0,0,0,1)"
@@ -952,7 +905,7 @@
                 transform="matrix(1,0,0,1,65,297.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-101"
                     fill="rgba(0,0,0,1)"
@@ -978,7 +931,7 @@
                 transform="matrix(1,0,0,1,65,275)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-102"
                     fill="rgba(0,0,0,1)"
@@ -1004,7 +957,7 @@
                 transform="matrix(1,0,0,1,65,252.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-103"
                     fill="rgba(0,0,0,1)"
@@ -1030,7 +983,7 @@
                 transform="matrix(1,0,0,1,65,230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-104"
                     fill="rgba(0,0,0,1)"
@@ -1056,7 +1009,7 @@
                 transform="matrix(1,0,0,1,65,207.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-105"
                     fill="rgba(0,0,0,1)"
@@ -1082,7 +1035,7 @@
                 transform="matrix(1,0,0,1,65,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-106"
                     fill="rgba(0,0,0,1)"
@@ -1108,7 +1061,7 @@
                 transform="matrix(1,0,0,1,65,162.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-107"
                     fill="rgba(0,0,0,1)"
@@ -1134,7 +1087,7 @@
                 transform="matrix(1,0,0,1,65,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-108"
                     fill="rgba(0,0,0,1)"
@@ -1160,7 +1113,7 @@
                 transform="matrix(1,0,0,1,65,117.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-109"
                     fill="rgba(0,0,0,1)"
@@ -1186,7 +1139,7 @@
                 transform="matrix(1,0,0,1,65,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-110"
                     fill="rgba(0,0,0,1)"
@@ -1212,7 +1165,7 @@
                 transform="matrix(1,0,0,1,65,72.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-111"
                     fill="rgba(0,0,0,1)"
@@ -1234,12 +1187,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-112"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-112" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearBasis7.svg b/__tests__/integration/snapshots/AxisLinearBasis7.svg
index ef66f819a..eebc2e9d5 100644
--- a/__tests__/integration/snapshots/AxisLinearBasis7.svg
+++ b/__tests__/integration/snapshots/AxisLinearBasis7.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-113"
-        fill="none"
-        width="550"
-        height="200"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-114" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-113" fill="none" width="550" height="200">
+        <g id="g-svg-114" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,72.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 72.5,50 L 72.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,95,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 95,50 L 95,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,185,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 185.00000000000003,50 L 185.00000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,207.500000,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 207.50000000000003,50 L 207.50000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,50 L 230,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,50 L 252.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,50 L 275,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,297.500000,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 297.5,50 L 297.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 320.00000000000006,50 L 320.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,342.500000,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 342.5,50 L 342.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,365,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 365.00000000000006,50 L 365.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,50 L 387.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,50)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 410,50 L 410,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,432.500000,50)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 432.50000000000006,50 L 432.50000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,455,50)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 455,50 L 455,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,477.500000,50)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,80 +197,59 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 477.50000000000006,50 L 477.50000000000006,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-22"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-23"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-22" fill="none" class="axis-main-group">
+            <g id="g-svg-23" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-24"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="45"
-                  y2="0"
+                  x1="50"
+                  y1="50"
+                  x2="95"
+                  y2="50"
                   class="axis-line axis-line-first"
                   stroke-width="2"
                   stroke="rgba(0,0,0,1)"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,185,50)">
+              <g>
                 <line
                   id="g-svg-25"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="330"
-                  y2="-1.83697019872103e-15"
+                  x1="185"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line-second"
                   stroke-width="2"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,330,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-27"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="2"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-29"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
@@ -311,7 +269,7 @@
                 transform="matrix(1,0,0,1,72.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-47"
                     fill="none"
@@ -331,7 +289,7 @@
                 transform="matrix(1,0,0,1,95,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-48"
                     fill="none"
@@ -351,7 +309,7 @@
                 transform="matrix(1,0,0,1,185,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-49"
                     fill="none"
@@ -371,7 +329,7 @@
                 transform="matrix(1,0,0,1,207.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-50"
                     fill="none"
@@ -391,7 +349,7 @@
                 transform="matrix(1,0,0,1,230,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -411,7 +369,7 @@
                 transform="matrix(1,0,0,1,252.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -431,7 +389,7 @@
                 transform="matrix(1,0,0,1,275,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -451,7 +409,7 @@
                 transform="matrix(1,0,0,1,297.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -471,7 +429,7 @@
                 transform="matrix(1,0,0,1,320,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
@@ -491,7 +449,7 @@
                 transform="matrix(1,0,0,1,342.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
@@ -511,7 +469,7 @@
                 transform="matrix(1,0,0,1,365,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
@@ -531,7 +489,7 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
@@ -551,7 +509,7 @@
                 transform="matrix(1,0,0,1,410,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -571,7 +529,7 @@
                 transform="matrix(1,0,0,1,432.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -591,7 +549,7 @@
                 transform="matrix(1,0,0,1,455,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -611,7 +569,7 @@
                 transform="matrix(1,0,0,1,477.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -626,19 +584,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-63"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-63" fill="none" class="axis-label-group">
               <g
                 id="g-svg-64"
                 fill="none"
-                transform="matrix(0,1,-1,0,50,55)"
+                transform="matrix(1,0,0,1,50,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-81"
                     fill="rgba(0,0,0,1)"
@@ -661,10 +614,10 @@
               <g
                 id="g-svg-65"
                 fill="none"
-                transform="matrix(0,1,-1,0,72.500000,55)"
+                transform="matrix(1,0,0,1,72.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-82"
                     fill="rgba(0,0,0,1)"
@@ -687,10 +640,10 @@
               <g
                 id="g-svg-66"
                 fill="none"
-                transform="matrix(0,1,-1,0,95,55)"
+                transform="matrix(1,0,0,1,95,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-83"
                     fill="rgba(0,0,0,1)"
@@ -713,10 +666,10 @@
               <g
                 id="g-svg-67"
                 fill="none"
-                transform="matrix(0,1,-1,0,185,55)"
+                transform="matrix(1,0,0,1,185,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-84"
                     fill="rgba(0,0,0,1)"
@@ -739,10 +692,10 @@
               <g
                 id="g-svg-68"
                 fill="none"
-                transform="matrix(0,1,-1,0,207.500000,55)"
+                transform="matrix(1,0,0,1,207.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-85"
                     fill="rgba(0,0,0,1)"
@@ -765,10 +718,10 @@
               <g
                 id="g-svg-69"
                 fill="none"
-                transform="matrix(0,1,-1,0,230,55)"
+                transform="matrix(1,0,0,1,230,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-86"
                     fill="rgba(0,0,0,1)"
@@ -791,10 +744,10 @@
               <g
                 id="g-svg-70"
                 fill="none"
-                transform="matrix(0,1,-1,0,252.500000,55)"
+                transform="matrix(1,0,0,1,252.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-87"
                     fill="rgba(0,0,0,1)"
@@ -817,10 +770,10 @@
               <g
                 id="g-svg-71"
                 fill="none"
-                transform="matrix(0,1,-1,0,275,55)"
+                transform="matrix(1,0,0,1,275,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-88"
                     fill="rgba(0,0,0,1)"
@@ -843,10 +796,10 @@
               <g
                 id="g-svg-72"
                 fill="none"
-                transform="matrix(0,1,-1,0,297.500000,55)"
+                transform="matrix(1,0,0,1,297.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-89"
                     fill="rgba(0,0,0,1)"
@@ -869,10 +822,10 @@
               <g
                 id="g-svg-73"
                 fill="none"
-                transform="matrix(0,1,-1,0,320,55)"
+                transform="matrix(1,0,0,1,320,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-90"
                     fill="rgba(0,0,0,1)"
@@ -895,10 +848,10 @@
               <g
                 id="g-svg-74"
                 fill="none"
-                transform="matrix(0,1,-1,0,342.500000,55)"
+                transform="matrix(1,0,0,1,342.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-91"
                     fill="rgba(0,0,0,1)"
@@ -921,10 +874,10 @@
               <g
                 id="g-svg-75"
                 fill="none"
-                transform="matrix(0,1,-1,0,365,55)"
+                transform="matrix(1,0,0,1,365,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -947,10 +900,10 @@
               <g
                 id="g-svg-76"
                 fill="none"
-                transform="matrix(0,1,-1,0,387.500000,55)"
+                transform="matrix(1,0,0,1,387.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -973,10 +926,10 @@
               <g
                 id="g-svg-77"
                 fill="none"
-                transform="matrix(0,1,-1,0,410,55)"
+                transform="matrix(1,0,0,1,410,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -999,10 +952,10 @@
               <g
                 id="g-svg-78"
                 fill="none"
-                transform="matrix(0,1,-1,0,432.500000,55)"
+                transform="matrix(1,0,0,1,432.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -1025,10 +978,10 @@
               <g
                 id="g-svg-79"
                 fill="none"
-                transform="matrix(0,1,-1,0,455,55)"
+                transform="matrix(1,0,0,1,455,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -1051,10 +1004,10 @@
               <g
                 id="g-svg-80"
                 fill="none"
-                transform="matrix(0,1,-1,0,477.500000,55)"
+                transform="matrix(1,0,0,1,477.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -1076,12 +1029,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-98"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-98" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearBasis8.svg b/__tests__/integration/snapshots/AxisLinearBasis8.svg
index 76b8d5e0c..5e6549f81 100644
--- a/__tests__/integration/snapshots/AxisLinearBasis8.svg
+++ b/__tests__/integration/snapshots/AxisLinearBasis8.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-99"
-        fill="none"
-        width="600"
-        height="600"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-120" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-99" fill="none" width="600" height="600">
+        <g id="g-svg-120" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,72.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 72.5,50 L 72.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,95,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 95,50 L 95,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,117.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 117.50000000000001,50 L 117.50000000000001,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,140,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 140,50 L 140,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,50 L 162.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,185,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 185.00000000000003,50 L 185.00000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,207.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 207.50000000000003,50 L 207.50000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,50 L 230,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,50 L 252.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,50 L 275,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,297.500000,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 297.5,50 L 297.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 320.00000000000006,50 L 320.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,342.500000,50)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 342.5,50 L 342.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,365,50)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 365.00000000000006,50 L 365.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,50 L 387.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,50)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 410,50 L 410,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,432.500000,50)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 432.50000000000006,50 L 432.50000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,455,50)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 455,50 L 455,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,477.500000,50)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,67 +230,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 477.50000000000006,50 L 477.50000000000006,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,128,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,128,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-30" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -331,7 +289,7 @@
                 transform="matrix(1,0,0,1,72.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -351,7 +309,7 @@
                 transform="matrix(1,0,0,1,95,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -371,7 +329,7 @@
                 transform="matrix(1,0,0,1,117.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -391,7 +349,7 @@
                 transform="matrix(1,0,0,1,140,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
@@ -411,7 +369,7 @@
                 transform="matrix(1,0,0,1,162.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
@@ -431,7 +389,7 @@
                 transform="matrix(1,0,0,1,185,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
@@ -451,7 +409,7 @@
                 transform="matrix(1,0,0,1,207.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
@@ -471,7 +429,7 @@
                 transform="matrix(1,0,0,1,230,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -491,7 +449,7 @@
                 transform="matrix(1,0,0,1,252.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -511,7 +469,7 @@
                 transform="matrix(1,0,0,1,275,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -531,7 +489,7 @@
                 transform="matrix(1,0,0,1,297.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -551,7 +509,7 @@
                 transform="matrix(1,0,0,1,320,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
@@ -571,7 +529,7 @@
                 transform="matrix(1,0,0,1,342.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
@@ -591,7 +549,7 @@
                 transform="matrix(1,0,0,1,365,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
@@ -611,7 +569,7 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
@@ -631,7 +589,7 @@
                 transform="matrix(1,0,0,1,410,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="none"
@@ -651,7 +609,7 @@
                 transform="matrix(1,0,0,1,432.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-68"
                     fill="none"
@@ -671,7 +629,7 @@
                 transform="matrix(1,0,0,1,455,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="none"
@@ -691,7 +649,7 @@
                 transform="matrix(1,0,0,1,477.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-70"
                     fill="none"
@@ -706,19 +664,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-71"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-label-group">
               <g
                 id="g-svg-72"
                 fill="none"
                 transform="matrix(1,0,0,1,50,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -746,7 +699,7 @@
                 transform="matrix(1,0,0,1,72.500000,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -774,7 +727,7 @@
                 transform="matrix(1,0,0,1,95,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -802,7 +755,7 @@
                 transform="matrix(1,0,0,1,117.500000,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -818,7 +771,7 @@
                     text-anchor="middle"
                     class="axis-label-item"
                     dy="-11.5px"
-                    visibility="hidden"
+                    visibility="visible"
                   >
                     合规线
                   </text>
@@ -830,7 +783,7 @@
                 transform="matrix(1,0,0,1,140,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -858,7 +811,7 @@
                 transform="matrix(1,0,0,1,162.500000,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -886,7 +839,7 @@
                 transform="matrix(1,0,0,1,185,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-98"
                     fill="rgba(0,0,0,1)"
@@ -902,7 +855,7 @@
                     text-anchor="middle"
                     class="axis-label-item"
                     dy="-11.5px"
-                    visibility="hidden"
+                    visibility="visible"
                   >
                     CFO线
                   </text>
@@ -914,7 +867,7 @@
                 transform="matrix(1,0,0,1,207.500000,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-99"
                     fill="rgba(0,0,0,1)"
@@ -930,7 +883,7 @@
                     text-anchor="middle"
                     class="axis-label-item"
                     dy="-11.5px"
-                    visibility="visible"
+                    visibility="hidden"
                   >
                     CTO线
                   </text>
@@ -942,7 +895,7 @@
                 transform="matrix(1,0,0,1,230,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-100"
                     fill="rgba(0,0,0,1)"
@@ -970,7 +923,7 @@
                 transform="matrix(1,0,0,1,252.500000,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-101"
                     fill="rgba(0,0,0,1)"
@@ -986,7 +939,7 @@
                     text-anchor="middle"
                     class="axis-label-item"
                     dy="-11.5px"
-                    visibility="hidden"
+                    visibility="visible"
                   >
                     GR线
                   </text>
@@ -998,7 +951,7 @@
                 transform="matrix(1,0,0,1,275,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-102"
                     fill="rgba(0,0,0,1)"
@@ -1026,7 +979,7 @@
                 transform="matrix(1,0,0,1,297.500000,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-103"
                     fill="rgba(0,0,0,1)"
@@ -1054,7 +1007,7 @@
                 transform="matrix(1,0,0,1,320,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-104"
                     fill="rgba(0,0,0,1)"
@@ -1070,7 +1023,7 @@
                     text-anchor="middle"
                     class="axis-label-item"
                     dy="-11.5px"
-                    visibility="hidden"
+                    visibility="visible"
                   >
                     CMO线
                   </text>
@@ -1082,7 +1035,7 @@
                 transform="matrix(1,0,0,1,342.500000,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-105"
                     fill="rgba(0,0,0,1)"
@@ -1110,7 +1063,7 @@
                 transform="matrix(1,0,0,1,365,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-106"
                     fill="rgba(0,0,0,1)"
@@ -1126,7 +1079,7 @@
                     text-anchor="middle"
                     class="axis-label-item"
                     dy="-11.5px"
-                    visibility="visible"
+                    visibility="hidden"
                   >
                     天猫事业线
                   </text>
@@ -1138,7 +1091,7 @@
                 transform="matrix(1,0,0,1,387.500000,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-107"
                     fill="rgba(0,0,0,1)"
@@ -1154,7 +1107,7 @@
                     text-anchor="middle"
                     class="axis-label-item"
                     dy="-11.5px"
-                    visibility="hidden"
+                    visibility="visible"
                   >
                     影业
                   </text>
@@ -1166,7 +1119,7 @@
                 transform="matrix(1,0,0,1,410,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-108"
                     fill="rgba(0,0,0,1)"
@@ -1194,7 +1147,7 @@
                 transform="matrix(1,0,0,1,432.500000,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-109"
                     fill="rgba(0,0,0,1)"
@@ -1222,7 +1175,7 @@
                 transform="matrix(1,0,0,1,455,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-110"
                     fill="rgba(0,0,0,1)"
@@ -1238,7 +1191,7 @@
                     text-anchor="middle"
                     class="axis-label-item"
                     dy="-11.5px"
-                    visibility="hidden"
+                    visibility="visible"
                   >
                     阿里体育
                   </text>
@@ -1250,7 +1203,7 @@
                 transform="matrix(1,0,0,1,477.500000,45)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-111"
                     fill="rgba(0,0,0,1)"
@@ -1274,12 +1227,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-112"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-112" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearBasisZ.svg b/__tests__/integration/snapshots/AxisLinearBasisZ.svg
index d02f1bb08..d6b29954a 100644
--- a/__tests__/integration/snapshots/AxisLinearBasisZ.svg
+++ b/__tests__/integration/snapshots/AxisLinearBasisZ.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-113"
-        fill="none"
-        width="650"
-        height="80"
-        transform="matrix(1,0,0,1,0,0)"
-      >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-113" fill="none" width="650" height="80">
         <g id="g-svg-114" fill="none" transform="matrix(0,0,0,1,49.999998,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 50,350 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,83.333336,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 83.33333333333333,350 L 83.33333333333333,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,116.666664,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 116.66666666666666,350 L 116.66666666666666,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 150,350 L 150,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,183.333328,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 183.33333333333331,350 L 183.33333333333331,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,216.666672,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 216.66666666666669,350 L 216.66666666666669,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 250,350 L 250,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,283.333344,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 283.33333333333337,350 L 283.33333333333337,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,316.666656,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 316.66666666666663,350 L 316.66666666666663,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,67 +120,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 350,350 L 350,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-15"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-16"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,350)">
+          <g id="g-svg-15" fill="none" class="axis-main-group">
+            <g id="g-svg-16" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-17"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="315"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="350"
+                  x2="365"
+                  y2="350"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,315,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,365,350)">
                   <path
                     id="g-svg-19"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-20"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-20" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-21"
                 fill="none"
                 transform="matrix(1,0,0,1,50,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
@@ -221,7 +179,7 @@
                 transform="matrix(1,0,0,1,83.333336,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
@@ -241,7 +199,7 @@
                 transform="matrix(1,0,0,1,116.666664,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -261,7 +219,7 @@
                 transform="matrix(1,0,0,1,150,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
@@ -281,7 +239,7 @@
                 transform="matrix(1,0,0,1,183.333328,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
@@ -301,7 +259,7 @@
                 transform="matrix(1,0,0,1,216.666672,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
@@ -321,7 +279,7 @@
                 transform="matrix(1,0,0,1,250,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -341,7 +299,7 @@
                 transform="matrix(1,0,0,1,283.333344,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -361,7 +319,7 @@
                 transform="matrix(1,0,0,1,316.666656,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -381,7 +339,7 @@
                 transform="matrix(1,0,0,1,350,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -396,19 +354,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-41"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-41" fill="none" class="axis-label-group">
               <g
                 id="g-svg-42"
                 fill="none"
                 transform="matrix(1,0,0,1,50,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-52"
                     fill="rgba(0,0,0,1)"
@@ -435,7 +388,7 @@
                 transform="matrix(1,0,0,1,83.333336,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-53"
                     fill="rgba(0,0,0,1)"
@@ -462,7 +415,7 @@
                 transform="matrix(1,0,0,1,116.666664,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-54"
                     fill="rgba(0,0,0,1)"
@@ -489,7 +442,7 @@
                 transform="matrix(1,0,0,1,150,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-55"
                     fill="rgba(0,0,0,1)"
@@ -516,7 +469,7 @@
                 transform="matrix(1,0,0,1,183.333328,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-56"
                     fill="rgba(0,0,0,1)"
@@ -543,7 +496,7 @@
                 transform="matrix(1,0,0,1,216.666672,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -570,7 +523,7 @@
                 transform="matrix(1,0,0,1,250,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -597,7 +550,7 @@
                 transform="matrix(1,0,0,1,283.333344,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -624,7 +577,7 @@
                 transform="matrix(1,0,0,1,316.666656,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -651,7 +604,7 @@
                 transform="matrix(1,0,0,1,350,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -677,10 +630,10 @@
           <g
             id="g-svg-62"
             fill="none"
-            transform="matrix(1,0,0,1,208.080002,404)"
+            transform="matrix(1,0,0,1,208.080002,392.500000)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-63"
                 fill="rgba(0,0,0,1)"
@@ -702,25 +655,21 @@
           </g>
         </g>
         <g id="g-svg-115" fill="none" transform="matrix(0,0,0,1,49.999998,0)">
-          <g
-            id="g-svg-65"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-66"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-67"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,350)">
+          <g id="g-svg-64" fill="none" class="axis-grid-group">
+            <g id="g-svg-65" fill="none" class="axis-grid">
+              <g id="g-svg-66" fill="none" class="grid-line-group">
+                <g>
+                  <path
+                    id="g-svg-68"
+                    fill="none"
+                    class="grid-line"
+                    stroke="rgba(217,217,217,1)"
+                    stroke-width="2"
+                    stroke-dasharray="0,0"
+                    d="M 50,350 L 350,350"
+                  />
+                </g>
+                <g>
                   <path
                     id="g-svg-69"
                     fill="none"
@@ -728,10 +677,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,316.6666666666667 L 350,316.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,316.666656)">
+                <g>
                   <path
                     id="g-svg-70"
                     fill="none"
@@ -739,10 +688,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,283.33333333333337 L 350,283.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,283.333344)">
+                <g>
                   <path
                     id="g-svg-71"
                     fill="none"
@@ -750,10 +699,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,250 L 350,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,250)">
+                <g>
                   <path
                     id="g-svg-72"
                     fill="none"
@@ -761,10 +710,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,216.66666666666669 L 350,216.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,216.666672)">
+                <g>
                   <path
                     id="g-svg-73"
                     fill="none"
@@ -772,10 +721,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,183.33333333333331 L 350,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,183.333328)">
+                <g>
                   <path
                     id="g-svg-74"
                     fill="none"
@@ -783,10 +732,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,150 L 350,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,150)">
+                <g>
                   <path
                     id="g-svg-75"
                     fill="none"
@@ -794,10 +743,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,116.66666666666666 L 350,116.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,116.666664)">
+                <g>
                   <path
                     id="g-svg-76"
                     fill="none"
@@ -805,10 +754,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,83.33333333333337 L 350,83.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,83.333336)">
+                <g>
                   <path
                     id="g-svg-77"
                     fill="none"
@@ -816,84 +765,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
-                  />
-                </g>
-                <g transform="matrix(1,0,0,1,50,50)">
-                  <path
-                    id="g-svg-78"
-                    fill="none"
-                    class="grid-line"
-                    stroke="rgba(217,217,217,1)"
-                    stroke-width="2"
-                    stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,50 L 350,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-68"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-67" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-79"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-80"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-78" fill="none" class="axis-main-group">
+            <g id="g-svg-79" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-81"
+                  id="g-svg-80"
                   fill="none"
-                  x1="0"
-                  y1="300"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="50"
+                  y1="350"
+                  x2="50"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,50,35)">
                   <path
-                    id="g-svg-83"
+                    id="g-svg-82"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-84"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-83" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-85"
+                id="g-svg-84"
                 fill="none"
                 transform="matrix(1,0,0,1,50,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-95"
+                    id="g-svg-94"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -902,18 +819,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-86"
+                id="g-svg-85"
                 fill="none"
                 transform="matrix(1,0,0,1,50,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-96"
+                    id="g-svg-95"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -922,18 +839,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-87"
+                id="g-svg-86"
                 fill="none"
                 transform="matrix(1,0,0,1,50,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-97"
+                    id="g-svg-96"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -942,18 +859,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-88"
+                id="g-svg-87"
                 fill="none"
                 transform="matrix(1,0,0,1,50,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-98"
+                    id="g-svg-97"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -962,18 +879,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-89"
+                id="g-svg-88"
                 fill="none"
                 transform="matrix(1,0,0,1,50,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-99"
+                    id="g-svg-98"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -982,18 +899,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-90"
+                id="g-svg-89"
                 fill="none"
                 transform="matrix(1,0,0,1,50,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-100"
+                    id="g-svg-99"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1002,18 +919,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-91"
+                id="g-svg-90"
                 fill="none"
                 transform="matrix(1,0,0,1,50,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-101"
+                    id="g-svg-100"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1022,18 +939,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-92"
+                id="g-svg-91"
                 fill="none"
                 transform="matrix(1,0,0,1,50,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-102"
+                    id="g-svg-101"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1042,18 +959,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-93"
+                id="g-svg-92"
                 fill="none"
                 transform="matrix(1,0,0,1,50,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-103"
+                    id="g-svg-102"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1062,18 +979,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-94"
+                id="g-svg-93"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-104"
+                    id="g-svg-103"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1082,40 +999,26 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-105"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            />
+            <g id="g-svg-104" fill="none" class="axis-label-group" />
           </g>
-          <g
-            id="g-svg-106"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-105" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-116" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-107"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-108"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-109"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,350)">
+        <g id="g-svg-116" fill="none">
+          <g id="g-svg-106" fill="none" class="axis-grid-group">
+            <g id="g-svg-107" fill="none" class="axis-grid">
+              <g id="g-svg-108" fill="none" class="grid-line-group">
+                <g>
+                  <path
+                    id="g-svg-110"
+                    fill="none"
+                    class="grid-line"
+                    stroke="rgba(217,217,217,1)"
+                    stroke-width="2"
+                    stroke-dasharray="0,0"
+                    d="M 50,350 L 350,350"
+                  />
+                </g>
+                <g>
                   <path
                     id="g-svg-111"
                     fill="none"
@@ -1123,10 +1026,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,316.6666666666667 L 350,316.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,316.666656)">
+                <g>
                   <path
                     id="g-svg-112"
                     fill="none"
@@ -1134,10 +1037,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,283.33333333333337 L 350,283.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,283.333344)">
+                <g>
                   <path
                     id="g-svg-113"
                     fill="none"
@@ -1145,10 +1048,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,250 L 350,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,250)">
+                <g>
                   <path
                     id="g-svg-114"
                     fill="none"
@@ -1156,10 +1059,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,216.66666666666669 L 350,216.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,216.666672)">
+                <g>
                   <path
                     id="g-svg-115"
                     fill="none"
@@ -1167,10 +1070,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,183.33333333333331 L 350,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,183.333328)">
+                <g>
                   <path
                     id="g-svg-116"
                     fill="none"
@@ -1178,10 +1081,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,150 L 350,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,150)">
+                <g>
                   <path
                     id="g-svg-117"
                     fill="none"
@@ -1189,10 +1092,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,116.66666666666666 L 350,116.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,116.666664)">
+                <g>
                   <path
                     id="g-svg-118"
                     fill="none"
@@ -1200,10 +1103,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,83.33333333333337 L 350,83.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,83.333336)">
+                <g>
                   <path
                     id="g-svg-119"
                     fill="none"
@@ -1211,84 +1114,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
-                  />
-                </g>
-                <g transform="matrix(1,0,0,1,50,50)">
-                  <path
-                    id="g-svg-120"
-                    fill="none"
-                    class="grid-line"
-                    stroke="rgba(217,217,217,1)"
-                    stroke-width="2"
-                    stroke-dasharray="0,0"
-                    d="M 0,0 L 300,0"
+                    d="M 50,50 L 350,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-110"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-109" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-121"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-122"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-120" fill="none" class="axis-main-group">
+            <g id="g-svg-121" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-123"
+                  id="g-svg-122"
                   fill="none"
-                  x1="0"
-                  y1="300"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="50"
+                  y1="350"
+                  x2="50"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,50,35)">
                   <path
-                    id="g-svg-125"
+                    id="g-svg-124"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-126"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-125" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-127"
+                id="g-svg-126"
                 fill="none"
                 transform="matrix(1,0,0,1,50,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-137"
+                    id="g-svg-136"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1297,18 +1168,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-128"
+                id="g-svg-127"
                 fill="none"
                 transform="matrix(1,0,0,1,50,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-138"
+                    id="g-svg-137"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1317,18 +1188,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-129"
+                id="g-svg-128"
                 fill="none"
                 transform="matrix(1,0,0,1,50,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-139"
+                    id="g-svg-138"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1337,18 +1208,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-130"
+                id="g-svg-129"
                 fill="none"
                 transform="matrix(1,0,0,1,50,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-140"
+                    id="g-svg-139"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1357,18 +1228,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-131"
+                id="g-svg-130"
                 fill="none"
                 transform="matrix(1,0,0,1,50,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-141"
+                    id="g-svg-140"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1377,18 +1248,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-132"
+                id="g-svg-131"
                 fill="none"
                 transform="matrix(1,0,0,1,50,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-142"
+                    id="g-svg-141"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1397,18 +1268,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-133"
+                id="g-svg-132"
                 fill="none"
                 transform="matrix(1,0,0,1,50,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-143"
+                    id="g-svg-142"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1417,18 +1288,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-134"
+                id="g-svg-133"
                 fill="none"
                 transform="matrix(1,0,0,1,50,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-144"
+                    id="g-svg-143"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1437,18 +1308,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-135"
+                id="g-svg-134"
                 fill="none"
                 transform="matrix(1,0,0,1,50,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-145"
+                    id="g-svg-144"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1457,18 +1328,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-136"
+                id="g-svg-135"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-4,0)">
+                <g>
                   <line
-                    id="g-svg-146"
+                    id="g-svg-145"
                     fill="none"
-                    x1="4"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-4"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1477,21 +1348,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-147"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-146" fill="none" class="axis-label-group">
               <g
-                id="g-svg-148"
+                id="g-svg-147"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,38,350)"
+                transform="matrix(1,0,0,1,38,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-158"
+                    id="g-svg-157"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1510,14 +1376,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-149"
+                id="g-svg-148"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,38,316.666656)"
+                transform="matrix(1,0,0,1,38,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-159"
+                    id="g-svg-158"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1536,14 +1402,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-150"
+                id="g-svg-149"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,38,283.333344)"
+                transform="matrix(1,0,0,1,38,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-160"
+                    id="g-svg-159"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1562,14 +1428,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-151"
+                id="g-svg-150"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,38,250)"
+                transform="matrix(1,0,0,1,38,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-161"
+                    id="g-svg-160"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1588,14 +1454,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-152"
+                id="g-svg-151"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,38,216.666672)"
+                transform="matrix(1,0,0,1,38,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-162"
+                    id="g-svg-161"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1614,14 +1480,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-153"
+                id="g-svg-152"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,38,183.333328)"
+                transform="matrix(1,0,0,1,38,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-163"
+                    id="g-svg-162"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1640,14 +1506,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-154"
+                id="g-svg-153"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,38,150)"
+                transform="matrix(1,0,0,1,38,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-164"
+                    id="g-svg-163"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1666,14 +1532,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-155"
+                id="g-svg-154"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,38,116.666664)"
+                transform="matrix(1,0,0,1,38,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-165"
+                    id="g-svg-164"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1692,14 +1558,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-156"
+                id="g-svg-155"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,38,83.333336)"
+                transform="matrix(1,0,0,1,38,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-166"
+                    id="g-svg-165"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1718,14 +1584,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-157"
+                id="g-svg-156"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,38,50)"
+                transform="matrix(1,0,0,1,38,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-167"
+                    id="g-svg-166"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1746,14 +1612,14 @@
             </g>
           </g>
           <g
-            id="g-svg-168"
+            id="g-svg-167"
             fill="none"
-            transform="matrix(1,0,0,1,-5.460000,191.919998)"
+            transform="matrix(1,0,0,1,10.520000,191.919998)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-169"
+                id="g-svg-168"
                 fill="rgba(0,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1772,195 +1638,159 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-117" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-171"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-172"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-173"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+        <g id="g-svg-117" fill="none">
+          <g id="g-svg-169" fill="none" class="axis-grid-group">
+            <g id="g-svg-170" fill="none" class="axis-grid">
+              <g id="g-svg-171" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-175"
+                    id="g-svg-173"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 50,350 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,83.333336,50)">
+                <g>
                   <path
-                    id="g-svg-176"
+                    id="g-svg-174"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 83.33333333333333,350 L 83.33333333333333,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,116.666664,50)">
+                <g>
                   <path
-                    id="g-svg-177"
+                    id="g-svg-175"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 116.66666666666666,350 L 116.66666666666666,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,50)">
+                <g>
                   <path
-                    id="g-svg-178"
+                    id="g-svg-176"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 150,350 L 150,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,183.333328,50)">
+                <g>
                   <path
-                    id="g-svg-179"
+                    id="g-svg-177"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 183.33333333333331,350 L 183.33333333333331,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,216.666672,50)">
+                <g>
                   <path
-                    id="g-svg-180"
+                    id="g-svg-178"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 216.66666666666669,350 L 216.66666666666669,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,50)">
+                <g>
                   <path
-                    id="g-svg-181"
+                    id="g-svg-179"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 250,350 L 250,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,283.333344,50)">
+                <g>
                   <path
-                    id="g-svg-182"
+                    id="g-svg-180"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 283.33333333333337,350 L 283.33333333333337,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,316.666656,50)">
+                <g>
                   <path
-                    id="g-svg-183"
+                    id="g-svg-181"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 316.66666666666663,350 L 316.66666666666663,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
-                    id="g-svg-184"
+                    id="g-svg-182"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="2"
                     stroke-dasharray="0,0"
-                    d="M 0,300 L 0,0"
+                    d="M 350,350 L 350,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-174"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-172" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-185"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-186"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,350)">
+          <g id="g-svg-183" fill="none" class="axis-main-group">
+            <g id="g-svg-184" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-187"
+                  id="g-svg-185"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="315"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="350"
+                  x2="365"
+                  y2="350"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,315,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,365,350)">
                   <path
-                    id="g-svg-189"
+                    id="g-svg-187"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-190"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-188" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-191"
+                id="g-svg-189"
                 fill="none"
                 transform="matrix(1,0,0,1,50,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-201"
+                    id="g-svg-199"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1973,14 +1803,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-192"
+                id="g-svg-190"
                 fill="none"
                 transform="matrix(1,0,0,1,83.333336,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-202"
+                    id="g-svg-200"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1993,14 +1823,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-193"
+                id="g-svg-191"
                 fill="none"
                 transform="matrix(1,0,0,1,116.666664,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-203"
+                    id="g-svg-201"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2013,14 +1843,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-194"
+                id="g-svg-192"
                 fill="none"
                 transform="matrix(1,0,0,1,150,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-204"
+                    id="g-svg-202"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2033,14 +1863,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-195"
+                id="g-svg-193"
                 fill="none"
                 transform="matrix(1,0,0,1,183.333328,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-205"
+                    id="g-svg-203"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2053,14 +1883,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-196"
+                id="g-svg-194"
                 fill="none"
                 transform="matrix(1,0,0,1,216.666672,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-206"
+                    id="g-svg-204"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2073,14 +1903,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-197"
+                id="g-svg-195"
                 fill="none"
                 transform="matrix(1,0,0,1,250,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-207"
+                    id="g-svg-205"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2093,14 +1923,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-198"
+                id="g-svg-196"
                 fill="none"
                 transform="matrix(1,0,0,1,283.333344,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-208"
+                    id="g-svg-206"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2113,14 +1943,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-199"
+                id="g-svg-197"
                 fill="none"
                 transform="matrix(1,0,0,1,316.666656,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-209"
+                    id="g-svg-207"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2133,14 +1963,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-200"
+                id="g-svg-198"
                 fill="none"
                 transform="matrix(1,0,0,1,350,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-210"
+                    id="g-svg-208"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2153,21 +1983,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-211"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-209" fill="none" class="axis-label-group">
               <g
-                id="g-svg-212"
+                id="g-svg-210"
                 fill="none"
                 transform="matrix(1,0,0,1,50,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-222"
+                    id="g-svg-220"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2187,14 +2012,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-213"
+                id="g-svg-211"
                 fill="none"
                 transform="matrix(1,0,0,1,83.333336,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-223"
+                    id="g-svg-221"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2214,14 +2039,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-214"
+                id="g-svg-212"
                 fill="none"
                 transform="matrix(1,0,0,1,116.666664,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-224"
+                    id="g-svg-222"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2241,14 +2066,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-215"
+                id="g-svg-213"
                 fill="none"
                 transform="matrix(1,0,0,1,150,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-225"
+                    id="g-svg-223"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2268,14 +2093,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-216"
+                id="g-svg-214"
                 fill="none"
                 transform="matrix(1,0,0,1,183.333328,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-226"
+                    id="g-svg-224"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2295,14 +2120,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-217"
+                id="g-svg-215"
                 fill="none"
                 transform="matrix(1,0,0,1,216.666672,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-227"
+                    id="g-svg-225"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2322,14 +2147,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-218"
+                id="g-svg-216"
                 fill="none"
                 transform="matrix(1,0,0,1,250,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-228"
+                    id="g-svg-226"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2349,14 +2174,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-219"
+                id="g-svg-217"
                 fill="none"
                 transform="matrix(1,0,0,1,283.333344,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-229"
+                    id="g-svg-227"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2376,14 +2201,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-220"
+                id="g-svg-218"
                 fill="none"
                 transform="matrix(1,0,0,1,316.666656,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-230"
+                    id="g-svg-228"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2403,14 +2228,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-221"
+                id="g-svg-219"
                 fill="none"
                 transform="matrix(1,0,0,1,350,358)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-231"
+                    id="g-svg-229"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2432,14 +2257,14 @@
             </g>
           </g>
           <g
-            id="g-svg-232"
+            id="g-svg-230"
             fill="none"
-            transform="matrix(1,0,0,1,208.080002,404)"
+            transform="matrix(1,0,0,1,208.080002,392.500000)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-233"
+                id="g-svg-231"
                 fill="rgba(0,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
diff --git a/__tests__/integration/snapshots/AxisLinearCustomTick.svg b/__tests__/integration/snapshots/AxisLinearCustomTick.svg
index 71a04b1fe..5ad1f669d 100644
--- a/__tests__/integration/snapshots/AxisLinearCustomTick.svg
+++ b/__tests__/integration/snapshots/AxisLinearCustomTick.svg
@@ -6,36 +6,20 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
       <g
-        id="g-svg-235"
+        id="g-svg-232"
         name="笛卡尔坐标系-刻度线-自定义"
         fill="none"
         width="550"
         height="150"
-        transform="matrix(1,0,0,1,0,0)"
       >
-        <g id="g-svg-236" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+        <g id="g-svg-233" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -43,10 +27,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,72.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -54,10 +38,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 72.5,50 L 72.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,95,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -65,10 +49,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 95,50 L 95,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,117.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -76,10 +60,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 117.50000000000001,50 L 117.50000000000001,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,140,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -87,10 +71,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 140,50 L 140,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -98,10 +82,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,50 L 162.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,185,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -109,10 +93,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 185.00000000000003,50 L 185.00000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,207.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -120,10 +104,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 207.50000000000003,50 L 207.50000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -131,10 +115,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,50 L 230,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -142,10 +126,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,50 L 252.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -153,10 +137,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,50 L 275,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,297.500000,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -164,10 +148,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 297.5,50 L 297.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -175,10 +159,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 320.00000000000006,50 L 320.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,342.500000,50)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -186,10 +170,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 342.5,50 L 342.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,365,50)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -197,10 +181,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 365.00000000000006,50 L 365.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -208,10 +192,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,50 L 387.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,50)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -219,10 +203,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 410,50 L 410,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,432.500000,50)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -230,10 +214,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 432.50000000000006,50 L 432.50000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,455,50)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -241,10 +225,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 455,50 L 455,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,477.500000,50)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -252,73 +236,51 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 477.50000000000006,50 L 477.50000000000006,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-30" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <circle
                     id="g-svg-51"
                     fill="rgba(255,192,203,1)"
-                    transform="translate(-10,-10)"
-                    cx="10"
-                    cy="10"
+                    cx="0"
+                    cy="0"
                     r="10"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -332,7 +294,7 @@
                 transform="matrix(1,0,0,1,72.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="rgba(255,255,255,1)"
@@ -352,7 +314,7 @@
                 transform="matrix(1,0,0,1,95,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="rgba(255,255,255,1)"
@@ -372,12 +334,13 @@
                 transform="matrix(1,0,0,1,117.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,-10,-10)">
                   <path
                     id="g-svg-57"
                     fill="rgba(255,255,255,1)"
                     d="M 0,0 l 20,0 l 0,20 l-20 0 z"
-                    transform="translate(-10,-10)"
+                    x="0"
+                    y="0"
                     width="20"
                     height="20"
                     class="axis-tick-item"
@@ -392,7 +355,7 @@
                 transform="matrix(1,0,0,1,140,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="rgba(255,255,255,1)"
@@ -412,13 +375,12 @@
                 transform="matrix(1,0,0,1,162.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <circle
                     id="g-svg-61"
                     fill="rgba(255,192,203,1)"
-                    transform="translate(-5,-5)"
-                    cx="5"
-                    cy="5"
+                    cx="0"
+                    cy="0"
                     r="5"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -432,7 +394,7 @@
                 transform="matrix(1,0,0,1,185,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="rgba(255,255,255,1)"
@@ -452,7 +414,7 @@
                 transform="matrix(1,0,0,1,207.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="rgba(255,255,255,1)"
@@ -472,7 +434,7 @@
                 transform="matrix(1,0,0,1,230,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="rgba(255,255,255,1)"
@@ -492,7 +454,7 @@
                 transform="matrix(1,0,0,1,252.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="rgba(255,255,255,1)"
@@ -512,13 +474,12 @@
                 transform="matrix(1,0,0,1,275,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <circle
                     id="g-svg-71"
                     fill="rgba(255,192,203,1)"
-                    transform="translate(-10,-10)"
-                    cx="10"
-                    cy="10"
+                    cx="0"
+                    cy="0"
                     r="10"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -532,7 +493,7 @@
                 transform="matrix(1,0,0,1,297.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-73"
                     fill="rgba(255,255,255,1)"
@@ -552,7 +513,7 @@
                 transform="matrix(1,0,0,1,320,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-75"
                     fill="rgba(255,255,255,1)"
@@ -572,7 +533,7 @@
                 transform="matrix(1,0,0,1,342.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-77"
                     fill="rgba(255,255,255,1)"
@@ -592,7 +553,7 @@
                 transform="matrix(1,0,0,1,365,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-79"
                     fill="rgba(255,255,255,1)"
@@ -612,13 +573,12 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <circle
                     id="g-svg-81"
                     fill="rgba(255,192,203,1)"
-                    transform="translate(-5,-5)"
-                    cx="5"
-                    cy="5"
+                    cx="0"
+                    cy="0"
                     r="5"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -632,7 +592,7 @@
                 transform="matrix(1,0,0,1,410,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-83"
                     fill="rgba(255,255,255,1)"
@@ -652,7 +612,7 @@
                 transform="matrix(1,0,0,1,432.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-85"
                     fill="rgba(255,255,255,1)"
@@ -672,7 +632,7 @@
                 transform="matrix(1,0,0,1,455,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-87"
                     fill="rgba(255,255,255,1)"
@@ -692,7 +652,7 @@
                 transform="matrix(1,0,0,1,477.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-89"
                     fill="rgba(255,255,255,1)"
@@ -707,19 +667,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-91"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-91" fill="none" class="axis-label-group">
               <g
                 id="g-svg-92"
                 fill="none"
                 transform="matrix(1,0,0,1,50,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-112"
                     fill="rgba(0,0,0,1)"
@@ -742,7 +697,7 @@
                 transform="matrix(1,0,0,1,72.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-113"
                     fill="rgba(0,0,0,1)"
@@ -765,7 +720,7 @@
                 transform="matrix(1,0,0,1,95,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-114"
                     fill="rgba(0,0,0,1)"
@@ -788,7 +743,7 @@
                 transform="matrix(1,0,0,1,117.500000,75)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-115"
                     fill="rgba(0,0,0,1)"
@@ -811,7 +766,7 @@
                 transform="matrix(1,0,0,1,140,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-116"
                     fill="rgba(0,0,0,1)"
@@ -834,7 +789,7 @@
                 transform="matrix(1,0,0,1,162.500000,85)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-117"
                     fill="rgba(0,0,0,1)"
@@ -857,7 +812,7 @@
                 transform="matrix(1,0,0,1,185,90)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-118"
                     fill="rgba(0,0,0,1)"
@@ -880,7 +835,7 @@
                 transform="matrix(1,0,0,1,207.500000,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-119"
                     fill="rgba(0,0,0,1)"
@@ -903,7 +858,7 @@
                 transform="matrix(1,0,0,1,230,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-120"
                     fill="rgba(0,0,0,1)"
@@ -926,7 +881,7 @@
                 transform="matrix(1,0,0,1,252.500000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-121"
                     fill="rgba(0,0,0,1)"
@@ -949,7 +904,7 @@
                 transform="matrix(1,0,0,1,275,110)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-122"
                     fill="rgba(0,0,0,1)"
@@ -972,7 +927,7 @@
                 transform="matrix(1,0,0,1,297.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-123"
                     fill="rgba(0,0,0,1)"
@@ -995,7 +950,7 @@
                 transform="matrix(1,0,0,1,320,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-124"
                     fill="rgba(0,0,0,1)"
@@ -1018,7 +973,7 @@
                 transform="matrix(1,0,0,1,342.500000,125)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-125"
                     fill="rgba(0,0,0,1)"
@@ -1041,7 +996,7 @@
                 transform="matrix(1,0,0,1,365,130)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-126"
                     fill="rgba(0,0,0,1)"
@@ -1064,7 +1019,7 @@
                 transform="matrix(1,0,0,1,387.500000,135)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-127"
                     fill="rgba(0,0,0,1)"
@@ -1087,7 +1042,7 @@
                 transform="matrix(1,0,0,1,410,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-128"
                     fill="rgba(0,0,0,1)"
@@ -1110,7 +1065,7 @@
                 transform="matrix(1,0,0,1,432.500000,145)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-129"
                     fill="rgba(0,0,0,1)"
@@ -1133,7 +1088,7 @@
                 transform="matrix(1,0,0,1,455,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-130"
                     fill="rgba(0,0,0,1)"
@@ -1156,7 +1111,7 @@
                 transform="matrix(1,0,0,1,477.500000,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-131"
                     fill="rgba(0,0,0,1)"
@@ -1175,12 +1130,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-132"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-132" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabel.svg b/__tests__/integration/snapshots/AxisLinearLabel.svg
index c1f7aaea5..517a0f488 100644
--- a/__tests__/integration/snapshots/AxisLinearLabel.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabel.svg
@@ -6,83 +6,46 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-133"
-        fill="none"
-        width="600"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-134" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          />
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,20,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-133" fill="none" width="600" height="150">
+        <g id="g-svg-134" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group" />
+          <g id="g-svg-2" fill="none" class="axis-main-group">
+            <g id="g-svg-3" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-4"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="525"
-                  y2="-1.83697019872103e-15"
+                  x1="20"
+                  y1="50"
+                  x2="545"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,525,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,545,50)">
                   <path
                     id="g-svg-6"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-7"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-8"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-7" fill="none" class="axis-tick-group" />
+            <g id="g-svg-8" fill="none" class="axis-label-group">
               <g
                 id="g-svg-9"
                 fill="none"
                 transform="matrix(1,0,0,1,50,70)"
                 class="axis-label"
               >
-                <g
-                  id="g-svg-19"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-label-item"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-19" fill="none" class="axis-label-item">
+                  <g transform="matrix(1,0,0,1,-15,-15)">
                     <image
                       id="g-svg-20"
                       fill="none"
@@ -90,7 +53,6 @@
                       x="0"
                       y="0"
                       href="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1NiMRKb2sfMAAAAAAAAAAAAADmJ7AQ/original"
-                      transform="translate(-15,-15)"
                       width="30"
                       height="30"
                     />
@@ -121,13 +83,8 @@
                 transform="matrix(1,0,0,1,100,70)"
                 class="axis-label"
               >
-                <g
-                  id="g-svg-25"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-label-item"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-25" fill="none" class="axis-label-item">
+                  <g transform="matrix(1,0,0,1,-15,-15)">
                     <image
                       id="g-svg-26"
                       fill="none"
@@ -135,7 +92,6 @@
                       x="0"
                       y="0"
                       href="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1NiMRKb2sfMAAAAAAAAAAAAADmJ7AQ/original"
-                      transform="translate(-15,-15)"
                       width="30"
                       height="30"
                     />
@@ -166,13 +122,8 @@
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-label"
               >
-                <g
-                  id="g-svg-31"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-label-item"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-31" fill="none" class="axis-label-item">
+                  <g transform="matrix(1,0,0,1,-15,-15)">
                     <image
                       id="g-svg-32"
                       fill="none"
@@ -180,7 +131,6 @@
                       x="0"
                       y="0"
                       href="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1NiMRKb2sfMAAAAAAAAAAAAADmJ7AQ/original"
-                      transform="translate(-15,-15)"
                       width="30"
                       height="30"
                     />
@@ -211,7 +161,7 @@
                 transform="matrix(1,0,0,1,200,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -238,7 +188,7 @@
                 transform="matrix(1,0,0,1,250,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -265,7 +215,7 @@
                 transform="matrix(1,0,0,1,300,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -292,7 +242,7 @@
                 transform="matrix(1,0,0,1,350,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-40"
                     fill="rgba(0,0,0,1)"
@@ -319,7 +269,7 @@
                 transform="matrix(1,0,0,1,400,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-41"
                     fill="rgba(0,0,0,1)"
@@ -346,7 +296,7 @@
                 transform="matrix(1,0,0,1,450,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-42"
                     fill="rgba(0,0,0,1)"
@@ -373,7 +323,7 @@
                 transform="matrix(1,0,0,1,500,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-43"
                     fill="rgba(0,0,0,1)"
@@ -396,12 +346,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-44"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-44" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelAlign1.svg b/__tests__/integration/snapshots/AxisLinearLabelAlign1.svg
index 31ea8e1d8..014fe4df4 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelAlign1.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelAlign1.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-265"
-        fill="none"
-        width="550"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-266" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-265" fill="none" width="550" height="150">
+        <g id="g-svg-266" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,50 L 87.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,50 L 125,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,50 L 162.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,50 L 200,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,50 L 237.49999999999997,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,50 L 275,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,50 L 312.49999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,50 L 350,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,50 L 387.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,50 L 424.99999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,74 +142,53 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,50 L 462.5,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -243,14 +201,14 @@
                 transform="matrix(1,0,0,1,87.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -263,14 +221,14 @@
                 transform="matrix(1,0,0,1,125,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -283,14 +241,14 @@
                 transform="matrix(1,0,0,1,162.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -303,14 +261,14 @@
                 transform="matrix(1,0,0,1,200,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -323,14 +281,14 @@
                 transform="matrix(1,0,0,1,237.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -343,14 +301,14 @@
                 transform="matrix(1,0,0,1,275,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -363,14 +321,14 @@
                 transform="matrix(1,0,0,1,312.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -383,14 +341,14 @@
                 transform="matrix(1,0,0,1,350,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -403,14 +361,14 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -423,14 +381,14 @@
                 transform="matrix(1,0,0,1,425,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -443,14 +401,14 @@
                 transform="matrix(1,0,0,1,462.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
                 transform="matrix(1,0,0,1,50,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -497,7 +450,7 @@
                 transform="matrix(1,0,0,1,87.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -524,7 +477,7 @@
                 transform="matrix(1,0,0,1,125,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -551,7 +504,7 @@
                 transform="matrix(1,0,0,1,162.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -578,7 +531,7 @@
                 transform="matrix(1,0,0,1,200,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -605,7 +558,7 @@
                 transform="matrix(1,0,0,1,237.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -632,7 +585,7 @@
                 transform="matrix(1,0,0,1,275,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -659,7 +612,7 @@
                 transform="matrix(1,0,0,1,312.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -686,7 +639,7 @@
                 transform="matrix(1,0,0,1,350,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -713,7 +666,7 @@
                 transform="matrix(1,0,0,1,387.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -740,7 +693,7 @@
                 transform="matrix(1,0,0,1,425,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -767,7 +720,7 @@
                 transform="matrix(1,0,0,1,462.500000,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -790,12 +743,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-72"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-72" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelAlign10.svg b/__tests__/integration/snapshots/AxisLinearLabelAlign10.svg
index fcf825f29..640b4197f 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelAlign10.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelAlign10.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-73"
-        fill="none"
-        width="1000"
-        height="1000"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,950,500)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-73" fill="none" width="1000" height="1000">
+        <g id="g-svg-74" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,500 L 950,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,916.666687,466.666656)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 916.6666666666666,466.6666666666667 L 916.6666666666666,466.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,883.333313,433.333344)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 883.3333333333334,433.33333333333337 L 883.3333333333334,433.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,400)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,400 L 850,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,816.666687,366.666656)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 816.6666666666667,366.6666666666667 L 816.6666666666667,366.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,783.333313,333.333344)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 783.3333333333334,333.33333333333337 L 783.3333333333334,333.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,300)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,300 L 750,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,716.666687,266.666656)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 716.6666666666667,266.6666666666667 L 716.6666666666667,266.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,683.333313,233.333328)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 683.3333333333334,233.33333333333337 L 683.3333333333334,233.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,200)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,200 L 650,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,616.666687,166.666672)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 616.6666666666667,166.66666666666669 L 616.6666666666667,166.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,583.333313,133.333328)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,73 +142,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 583.3333333333334,133.33333333333337 L 583.3333333333334,133.33333333333337"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,550,100)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="400"
-                  y1="400"
-                  x2="-10.606601717798213"
-                  y2="-10.606601717798211"
+                  x1="950"
+                  y1="500"
+                  x2="539.3933982822018"
+                  y2="89.39339828220179"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.353553,0.353553,-0.353553,0.353553,-10.606602,-10.606602)">
+                <g transform="matrix(0.353553,0.353553,-0.353553,0.353553,539.393372,89.393394)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,950,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -243,13 +201,13 @@
                 transform="matrix(1,0,0,1,916.666687,466.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -263,13 +221,13 @@
                 transform="matrix(1,0,0,1,883.333313,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -283,13 +241,13 @@
                 transform="matrix(1,0,0,1,850,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -303,13 +261,13 @@
                 transform="matrix(1,0,0,1,816.666687,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -323,13 +281,13 @@
                 transform="matrix(1,0,0,1,783.333313,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -343,13 +301,13 @@
                 transform="matrix(1,0,0,1,750,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -363,13 +321,13 @@
                 transform="matrix(1,0,0,1,716.666687,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -383,13 +341,13 @@
                 transform="matrix(1,0,0,1,683.333313,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -403,13 +361,13 @@
                 transform="matrix(1,0,0,1,650,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -423,13 +381,13 @@
                 transform="matrix(1,0,0,1,616.666687,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -443,13 +401,13 @@
                 transform="matrix(1,0,0,1,583.333313,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
                 transform="matrix(1,0,0,1,953.535522,496.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -496,7 +449,7 @@
                 transform="matrix(1,0,0,1,920.202209,463.131134)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -522,7 +475,7 @@
                 transform="matrix(1,0,0,1,886.868896,429.797791)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -548,7 +501,7 @@
                 transform="matrix(1,0,0,1,853.535522,396.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -574,7 +527,7 @@
                 transform="matrix(1,0,0,1,820.202209,363.131134)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -600,7 +553,7 @@
                 transform="matrix(1,0,0,1,786.868896,329.797791)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -626,7 +579,7 @@
                 transform="matrix(1,0,0,1,753.535522,296.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -652,7 +605,7 @@
                 transform="matrix(1,0,0,1,720.202209,263.131134)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -678,7 +631,7 @@
                 transform="matrix(1,0,0,1,686.868896,229.797806)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -704,7 +657,7 @@
                 transform="matrix(1,0,0,1,653.535522,196.464462)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -730,7 +683,7 @@
                 transform="matrix(1,0,0,1,620.202209,163.131134)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -756,7 +709,7 @@
                 transform="matrix(1,0,0,1,586.868896,129.797806)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -778,12 +731,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-72"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-72" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelAlign11.svg b/__tests__/integration/snapshots/AxisLinearLabelAlign11.svg
index 801617d51..8307407d6 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelAlign11.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelAlign11.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-73"
-        fill="none"
-        width="550"
-        height="100"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-73" fill="none" width="550" height="100">
+        <g id="g-svg-74" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,50 L 87.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,50 L 125,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,50 L 162.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,50 L 200,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,50 L 237.49999999999997,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,50 L 275,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,50 L 312.49999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,50 L 350,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,50 L 387.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,50 L 424.99999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,67 +142,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,50 L 462.5,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
@@ -243,7 +201,7 @@
                 transform="matrix(1,0,0,1,87.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
@@ -263,7 +221,7 @@
                 transform="matrix(1,0,0,1,125,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -283,7 +241,7 @@
                 transform="matrix(1,0,0,1,162.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -303,7 +261,7 @@
                 transform="matrix(1,0,0,1,200,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -323,7 +281,7 @@
                 transform="matrix(1,0,0,1,237.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -343,7 +301,7 @@
                 transform="matrix(1,0,0,1,275,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
@@ -363,7 +321,7 @@
                 transform="matrix(1,0,0,1,312.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
@@ -383,7 +341,7 @@
                 transform="matrix(1,0,0,1,350,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
@@ -403,7 +361,7 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -423,7 +381,7 @@
                 transform="matrix(1,0,0,1,425,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -443,7 +401,7 @@
                 transform="matrix(1,0,0,1,462.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
                 transform="matrix(1,0,0,1,50,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -497,7 +450,7 @@
                 transform="matrix(1,0,0,1,87.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -524,7 +477,7 @@
                 transform="matrix(1,0,0,1,125,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -551,7 +504,7 @@
                 transform="matrix(1,0,0,1,162.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -578,7 +531,7 @@
                 transform="matrix(1,0,0,1,200,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -605,7 +558,7 @@
                 transform="matrix(1,0,0,1,237.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -632,7 +585,7 @@
                 transform="matrix(1,0,0,1,275,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-72"
                     fill="rgba(0,0,0,1)"
@@ -659,7 +612,7 @@
                 transform="matrix(1,0,0,1,312.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-74"
                     fill="rgba(0,0,0,1)"
@@ -686,7 +639,7 @@
                 transform="matrix(1,0,0,1,350,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-76"
                     fill="rgba(0,0,0,1)"
@@ -713,7 +666,7 @@
                 transform="matrix(1,0,0,1,387.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-78"
                     fill="rgba(0,0,0,1)"
@@ -740,7 +693,7 @@
                 transform="matrix(1,0,0,1,425,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-80"
                     fill="rgba(0,0,0,1)"
@@ -767,7 +720,7 @@
                 transform="matrix(1,0,0,1,462.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-82"
                     fill="rgba(0,0,0,1)"
@@ -790,12 +743,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-84"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-84" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelAlign2.svg b/__tests__/integration/snapshots/AxisLinearLabelAlign2.svg
index 3c9827754..58c10b1dc 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelAlign2.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelAlign2.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-73"
-        fill="none"
-        width="550"
-        height="600"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,500,550)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-73" fill="none" width="550" height="600">
+        <g id="g-svg-74" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,550 L 500,550"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,550)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,550 L 462.5,550"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,550)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 425,550 L 425,550"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,550)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,550 L 387.5,550"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,550)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,550 L 350,550"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,550)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.5,550 L 312.5,550"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,550)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,550 L 275,550"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,550)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.50000000000006,550 L 237.50000000000006,550"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,550)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,550 L 200,550"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,550)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,550 L 162.5,550"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,550)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125.00000000000006,550 L 125.00000000000006,550"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,550)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,67 +142,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,550 L 87.5,550"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,550)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="450"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="500"
+                  y1="550"
+                  x2="35"
+                  y2="550"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,35,550)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,500,550)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
@@ -243,7 +201,7 @@
                 transform="matrix(1,0,0,1,462.500000,550)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
@@ -263,7 +221,7 @@
                 transform="matrix(1,0,0,1,425,550)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -283,7 +241,7 @@
                 transform="matrix(1,0,0,1,387.500000,550)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -303,7 +261,7 @@
                 transform="matrix(1,0,0,1,350,550)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -323,7 +281,7 @@
                 transform="matrix(1,0,0,1,312.500000,550)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -343,7 +301,7 @@
                 transform="matrix(1,0,0,1,275,550)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
@@ -363,7 +321,7 @@
                 transform="matrix(1,0,0,1,237.500000,550)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
@@ -383,7 +341,7 @@
                 transform="matrix(1,0,0,1,200,550)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
@@ -403,7 +361,7 @@
                 transform="matrix(1,0,0,1,162.500000,550)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -423,7 +381,7 @@
                 transform="matrix(1,0,0,1,125,550)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -443,7 +401,7 @@
                 transform="matrix(1,0,0,1,87.500000,550)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
                 transform="matrix(1,0,0,1,500,545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -497,7 +450,7 @@
                 transform="matrix(1,0,0,1,462.500000,545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -524,7 +477,7 @@
                 transform="matrix(1,0,0,1,425,545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -551,7 +504,7 @@
                 transform="matrix(1,0,0,1,387.500000,545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -578,7 +531,7 @@
                 transform="matrix(1,0,0,1,350,545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -605,7 +558,7 @@
                 transform="matrix(1,0,0,1,312.500000,545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -632,7 +585,7 @@
                 transform="matrix(1,0,0,1,275,545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -659,7 +612,7 @@
                 transform="matrix(1,0,0,1,237.500000,545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -686,7 +639,7 @@
                 transform="matrix(1,0,0,1,200,545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -713,7 +666,7 @@
                 transform="matrix(1,0,0,1,162.500000,545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -740,7 +693,7 @@
                 transform="matrix(1,0,0,1,125,545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -767,7 +720,7 @@
                 transform="matrix(1,0,0,1,87.500000,545)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -790,12 +743,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-72"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-72" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelAlign3.svg b/__tests__/integration/snapshots/AxisLinearLabelAlign3.svg
index 7ae7fac30..5d4589db0 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelAlign3.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelAlign3.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-73"
-        fill="none"
-        width="100"
-        height="550"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,150)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-73" fill="none" width="100" height="550">
+        <g id="g-svg-74" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,150 L 50,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,179.166672)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,179.16666666666666 L 50,179.16666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,208.333328)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,208.33333333333331 L 50,208.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,237.500000)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,237.5 L 50,237.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,266.666656)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,266.66666666666663 L 50,266.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,295.833344)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,295.8333333333333 L 50,295.8333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,325)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,325 L 50,325"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,354.166656)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,354.16666666666663 L 50,354.16666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,383.333344)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,383.3333333333333 L 50,383.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,412.500000)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,412.5 L 50,412.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,441.666656)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,441.66666666666663 L 50,441.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,470.833344)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,73 +142,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,470.8333333333333 L 50,470.8333333333333"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,150)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="365"
+                  x1="50"
+                  y1="150"
+                  x2="50"
+                  y2="515"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,365)">
+                <g transform="matrix(0,-0.500000,0.500000,0,50,515)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,50,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -243,13 +201,13 @@
                 transform="matrix(1,0,0,1,50,179.166672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -263,13 +221,13 @@
                 transform="matrix(1,0,0,1,50,208.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -283,13 +241,13 @@
                 transform="matrix(1,0,0,1,50,237.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -303,13 +261,13 @@
                 transform="matrix(1,0,0,1,50,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -323,13 +281,13 @@
                 transform="matrix(1,0,0,1,50,295.833344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -343,13 +301,13 @@
                 transform="matrix(1,0,0,1,50,325)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -363,13 +321,13 @@
                 transform="matrix(1,0,0,1,50,354.166656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -383,13 +341,13 @@
                 transform="matrix(1,0,0,1,50,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -403,13 +361,13 @@
                 transform="matrix(1,0,0,1,50,412.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -423,13 +381,13 @@
                 transform="matrix(1,0,0,1,50,441.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -443,13 +401,13 @@
                 transform="matrix(1,0,0,1,50,470.833344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,150)"
+                transform="matrix(1,0,0,1,55,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -493,10 +446,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,179.166672)"
+                transform="matrix(1,0,0,1,55,179.166672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +472,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,208.333328)"
+                transform="matrix(1,0,0,1,55,208.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -545,10 +498,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,237.500000)"
+                transform="matrix(1,0,0,1,55,237.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -571,10 +524,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,266.666656)"
+                transform="matrix(1,0,0,1,55,266.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -597,10 +550,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,295.833344)"
+                transform="matrix(1,0,0,1,55,295.833344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -623,10 +576,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,325)"
+                transform="matrix(1,0,0,1,55,325)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -649,10 +602,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,354.166656)"
+                transform="matrix(1,0,0,1,55,354.166656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -675,10 +628,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,383.333344)"
+                transform="matrix(1,0,0,1,55,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -701,10 +654,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,412.500000)"
+                transform="matrix(1,0,0,1,55,412.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -727,10 +680,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,441.666656)"
+                transform="matrix(1,0,0,1,55,441.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -753,10 +706,10 @@
               <g
                 id="g-svg-59"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,55,470.833344)"
+                transform="matrix(1,0,0,1,55,470.833344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -778,12 +731,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-72"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-72" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelAlign4.svg b/__tests__/integration/snapshots/AxisLinearLabelAlign4.svg
index 596149f1c..c4045319b 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelAlign4.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelAlign4.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-73"
-        fill="none"
-        width="150"
-        height="550"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,100,500)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-73" fill="none" width="150" height="550">
+        <g id="g-svg-74" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,500 L 100,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,475)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,475 L 100,475"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,450)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,450 L 100,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,425)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,425 L 100,425"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,400)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,400 L 100,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,375)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,375 L 100,375"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,350)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,350 L 100,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,325)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,325 L 100,325"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,300)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,300 L 100,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,275)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,275 L 100,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,250)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,250.00000000000003 L 100,250.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,225)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,73 +142,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,225 L 100,225"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,100,200)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="0"
-                  y1="300"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="100"
+                  y1="500"
+                  x2="100"
+                  y2="185"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,100,185)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,100,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -243,13 +201,13 @@
                 transform="matrix(1,0,0,1,100,475)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -263,13 +221,13 @@
                 transform="matrix(1,0,0,1,100,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -283,13 +241,13 @@
                 transform="matrix(1,0,0,1,100,425)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -303,13 +261,13 @@
                 transform="matrix(1,0,0,1,100,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -323,13 +281,13 @@
                 transform="matrix(1,0,0,1,100,375)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -343,13 +301,13 @@
                 transform="matrix(1,0,0,1,100,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -363,13 +321,13 @@
                 transform="matrix(1,0,0,1,100,325)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -383,13 +341,13 @@
                 transform="matrix(1,0,0,1,100,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -403,13 +361,13 @@
                 transform="matrix(1,0,0,1,100,275)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -423,13 +381,13 @@
                 transform="matrix(1,0,0,1,100,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -443,13 +401,13 @@
                 transform="matrix(1,0,0,1,100,225)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,85,500)"
+                transform="matrix(1,0,0,1,85,500)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -493,10 +446,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,85,475)"
+                transform="matrix(1,0,0,1,85,475)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +472,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,85,450)"
+                transform="matrix(1,0,0,1,85,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -545,10 +498,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,85,425)"
+                transform="matrix(1,0,0,1,85,425)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -571,10 +524,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,85,400)"
+                transform="matrix(1,0,0,1,85,400)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -597,10 +550,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,85,375)"
+                transform="matrix(1,0,0,1,85,375)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -623,10 +576,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,85,350)"
+                transform="matrix(1,0,0,1,85,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -649,10 +602,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,85,325)"
+                transform="matrix(1,0,0,1,85,325)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -675,10 +628,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,85,300)"
+                transform="matrix(1,0,0,1,85,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -701,10 +654,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,85,275)"
+                transform="matrix(1,0,0,1,85,275)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -727,10 +680,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,85,250)"
+                transform="matrix(1,0,0,1,85,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -753,10 +706,10 @@
               <g
                 id="g-svg-59"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,85,225)"
+                transform="matrix(1,0,0,1,85,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -778,12 +731,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-72"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-72" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelAlign5.svg b/__tests__/integration/snapshots/AxisLinearLabelAlign5.svg
index e5dd98b2b..80d770d1f 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelAlign5.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelAlign5.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-73"
-        fill="none"
-        width="1000"
-        height="1000"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,100)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-73" fill="none" width="1000" height="1000">
+        <g id="g-svg-74" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,100 L 50,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,83.333336,133.333328)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 83.33333333333333,133.33333333333331 L 83.33333333333333,133.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,116.666664,166.666672)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 116.66666666666666,166.66666666666666 L 116.66666666666666,166.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,200)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,200 L 150,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,183.333328,233.333328)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 183.33333333333331,233.33333333333331 L 183.33333333333331,233.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,216.666672,266.666656)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 216.66666666666666,266.66666666666663 L 216.66666666666666,266.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,300)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,300 L 250,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,283.333344,333.333344)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 283.3333333333333,333.3333333333333 L 283.3333333333333,333.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,316.666656,366.666656)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 316.66666666666663,366.66666666666663 L 316.66666666666663,366.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,400)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,400 L 350,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,383.333344,433.333344)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 383.3333333333333,433.3333333333333 L 383.3333333333333,433.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,416.666656,466.666656)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,74 +142,53 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 416.66666666666663,466.66666666666663 L 416.66666666666663,466.66666666666663"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,100)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="410.6066017177982"
-                  y2="410.6066017177982"
+                  x1="50"
+                  y1="100"
+                  x2="460.6066017177982"
+                  y2="510.6066017177982"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.353553,-0.353553,0.353553,-0.353553,410.606598,410.606598)">
+                <g transform="matrix(-0.353553,-0.353553,0.353553,-0.353553,460.606598,510.606598)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,50,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -243,14 +201,14 @@
                 transform="matrix(1,0,0,1,83.333336,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -263,14 +221,14 @@
                 transform="matrix(1,0,0,1,116.666664,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -283,14 +241,14 @@
                 transform="matrix(1,0,0,1,150,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -303,14 +261,14 @@
                 transform="matrix(1,0,0,1,183.333328,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -323,14 +281,14 @@
                 transform="matrix(1,0,0,1,216.666672,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -343,14 +301,14 @@
                 transform="matrix(1,0,0,1,250,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -363,14 +321,14 @@
                 transform="matrix(1,0,0,1,283.333344,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -383,14 +341,14 @@
                 transform="matrix(1,0,0,1,316.666656,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -403,14 +361,14 @@
                 transform="matrix(1,0,0,1,350,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -423,14 +381,14 @@
                 transform="matrix(1,0,0,1,383.333344,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -443,14 +401,14 @@
                 transform="matrix(1,0,0,1,416.666656,466.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,46.464466,103.535538)"
+                transform="matrix(1,0,0,1,46.464466,103.535538)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -493,10 +446,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,79.797798,136.868866)"
+                transform="matrix(1,0,0,1,79.797798,136.868866)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +472,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,113.131134,170.202194)"
+                transform="matrix(1,0,0,1,113.131134,170.202194)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -545,10 +498,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,146.464462,203.535538)"
+                transform="matrix(1,0,0,1,146.464462,203.535538)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -571,10 +524,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,179.797806,236.868866)"
+                transform="matrix(1,0,0,1,179.797806,236.868866)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -597,10 +550,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,213.131134,270.202209)"
+                transform="matrix(1,0,0,1,213.131134,270.202209)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -623,10 +576,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,246.464462,303.535522)"
+                transform="matrix(1,0,0,1,246.464462,303.535522)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -649,10 +602,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,279.797791,336.868866)"
+                transform="matrix(1,0,0,1,279.797791,336.868866)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -675,10 +628,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,313.131134,370.202209)"
+                transform="matrix(1,0,0,1,313.131134,370.202209)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -701,10 +654,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,346.464478,403.535522)"
+                transform="matrix(1,0,0,1,346.464478,403.535522)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -727,10 +680,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,379.797791,436.868866)"
+                transform="matrix(1,0,0,1,379.797791,436.868866)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -753,10 +706,10 @@
               <g
                 id="g-svg-59"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,413.131134,470.202209)"
+                transform="matrix(1,0,0,1,413.131134,470.202209)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -778,12 +731,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-72"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-72" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelAlign6.svg b/__tests__/integration/snapshots/AxisLinearLabelAlign6.svg
index c81c2706b..93e6ac7b3 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelAlign6.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelAlign6.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-73"
-        fill="none"
-        width="1000"
-        height="1000"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,100)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-73" fill="none" width="1000" height="1000">
+        <g id="g-svg-74" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,100 L 150,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,183.333328,133.333328)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 183.33333333333331,133.33333333333331 L 183.33333333333331,133.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,216.666672,166.666672)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 216.66666666666666,166.66666666666666 L 216.66666666666666,166.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,200)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,200 L 250,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,283.333344,233.333328)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 283.3333333333333,233.33333333333331 L 283.3333333333333,233.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,316.666656,266.666656)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 316.66666666666663,266.66666666666663 L 316.66666666666663,266.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,300)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,300 L 350,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,383.333344,333.333344)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 383.3333333333333,333.3333333333333 L 383.3333333333333,333.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,416.666656,366.666656)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 416.66666666666663,366.66666666666663 L 416.66666666666663,366.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,400)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 450,400 L 450,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,483.333344,433.333344)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 483.3333333333333,433.3333333333333 L 483.3333333333333,433.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,516.666687,466.666656)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,74 +142,53 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 516.6666666666666,466.66666666666663 L 516.6666666666666,466.66666666666663"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,150,100)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="410.6066017177982"
-                  y2="410.6066017177982"
+                  x1="150"
+                  y1="100"
+                  x2="560.6066017177982"
+                  y2="510.6066017177982"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.353553,-0.353553,0.353553,-0.353553,410.606598,410.606598)">
+                <g transform="matrix(-0.353553,-0.353553,0.353553,-0.353553,560.606628,510.606598)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,150,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -243,14 +201,14 @@
                 transform="matrix(1,0,0,1,183.333328,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -263,14 +221,14 @@
                 transform="matrix(1,0,0,1,216.666672,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -283,14 +241,14 @@
                 transform="matrix(1,0,0,1,250,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -303,14 +261,14 @@
                 transform="matrix(1,0,0,1,283.333344,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -323,14 +281,14 @@
                 transform="matrix(1,0,0,1,316.666656,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -343,14 +301,14 @@
                 transform="matrix(1,0,0,1,350,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -363,14 +321,14 @@
                 transform="matrix(1,0,0,1,383.333344,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -383,14 +341,14 @@
                 transform="matrix(1,0,0,1,416.666656,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -403,14 +361,14 @@
                 transform="matrix(1,0,0,1,450,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -423,14 +381,14 @@
                 transform="matrix(1,0,0,1,483.333344,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -443,14 +401,14 @@
                 transform="matrix(1,0,0,1,516.666687,466.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,146.464462,103.535538)"
+                transform="matrix(1,0,0,1,146.464462,103.535538)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -493,10 +446,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,179.797806,136.868866)"
+                transform="matrix(1,0,0,1,179.797806,136.868866)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +472,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,213.131134,170.202194)"
+                transform="matrix(1,0,0,1,213.131134,170.202194)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -545,10 +498,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,246.464462,203.535538)"
+                transform="matrix(1,0,0,1,246.464462,203.535538)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -571,10 +524,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,279.797791,236.868866)"
+                transform="matrix(1,0,0,1,279.797791,236.868866)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -597,10 +550,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,313.131134,270.202209)"
+                transform="matrix(1,0,0,1,313.131134,270.202209)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -623,10 +576,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,346.464478,303.535522)"
+                transform="matrix(1,0,0,1,346.464478,303.535522)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -649,10 +602,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,379.797791,336.868866)"
+                transform="matrix(1,0,0,1,379.797791,336.868866)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -675,10 +628,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,413.131134,370.202209)"
+                transform="matrix(1,0,0,1,413.131134,370.202209)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -701,10 +654,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,446.464478,403.535522)"
+                transform="matrix(1,0,0,1,446.464478,403.535522)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -727,10 +680,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,479.797791,436.868866)"
+                transform="matrix(1,0,0,1,479.797791,436.868866)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -753,10 +706,10 @@
               <g
                 id="g-svg-59"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,513.131104,470.202209)"
+                transform="matrix(1,0,0,1,513.131104,470.202209)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -778,12 +731,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-72"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-72" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelAlign7.svg b/__tests__/integration/snapshots/AxisLinearLabelAlign7.svg
index 06d638a27..3dac15426 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelAlign7.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelAlign7.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-73"
-        fill="none"
-        width="1000"
-        height="1000"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,250,100)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-73" fill="none" width="1000" height="1000">
+        <g id="g-svg-74" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,100 L 250,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,283.333344,133.333328)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 283.3333333333333,133.33333333333331 L 283.3333333333333,133.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,316.666656,166.666672)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 316.66666666666663,166.66666666666666 L 316.66666666666663,166.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,200)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,200 L 350,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,383.333344,233.333328)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 383.3333333333333,233.33333333333331 L 383.3333333333333,233.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,416.666656,266.666656)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 416.66666666666663,266.66666666666663 L 416.66666666666663,266.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,300)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 450,300 L 450,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,483.333344,333.333344)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 483.3333333333333,333.3333333333333 L 483.3333333333333,333.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,516.666687,366.666656)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 516.6666666666666,366.66666666666663 L 516.6666666666666,366.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,400)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,400 L 550,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,583.333313,433.333344)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 583.3333333333333,433.3333333333333 L 583.3333333333333,433.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,616.666687,466.666656)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,74 +142,53 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 616.6666666666666,466.66666666666663 L 616.6666666666666,466.66666666666663"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,250,100)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="410.6066017177982"
-                  y2="410.6066017177982"
+                  x1="250"
+                  y1="100"
+                  x2="660.6066017177982"
+                  y2="510.6066017177982"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.353553,-0.353553,0.353553,-0.353553,410.606598,410.606598)">
+                <g transform="matrix(-0.353553,-0.353553,0.353553,-0.353553,660.606628,510.606598)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,250,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -243,14 +201,14 @@
                 transform="matrix(1,0,0,1,283.333344,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -263,14 +221,14 @@
                 transform="matrix(1,0,0,1,316.666656,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -283,14 +241,14 @@
                 transform="matrix(1,0,0,1,350,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -303,14 +261,14 @@
                 transform="matrix(1,0,0,1,383.333344,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -323,14 +281,14 @@
                 transform="matrix(1,0,0,1,416.666656,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -343,14 +301,14 @@
                 transform="matrix(1,0,0,1,450,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -363,14 +321,14 @@
                 transform="matrix(1,0,0,1,483.333344,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -383,14 +341,14 @@
                 transform="matrix(1,0,0,1,516.666687,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -403,14 +361,14 @@
                 transform="matrix(1,0,0,1,550,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -423,14 +381,14 @@
                 transform="matrix(1,0,0,1,583.333313,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -443,14 +401,14 @@
                 transform="matrix(1,0,0,1,616.666687,466.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-7.071068)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
                     x1="0"
-                    y1="7.071067811865475"
+                    y1="0"
                     x2="7.071067811865475"
-                    y2="0"
+                    y2="-7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
                 transform="matrix(1,0,0,1,246.464462,103.535538)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -496,7 +449,7 @@
                 transform="matrix(1,0,0,1,279.797791,136.868866)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -522,7 +475,7 @@
                 transform="matrix(1,0,0,1,313.131134,170.202194)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -548,7 +501,7 @@
                 transform="matrix(1,0,0,1,346.464478,203.535538)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -574,7 +527,7 @@
                 transform="matrix(1,0,0,1,379.797791,236.868866)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -600,7 +553,7 @@
                 transform="matrix(1,0,0,1,413.131134,270.202209)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -626,7 +579,7 @@
                 transform="matrix(1,0,0,1,446.464478,303.535522)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -652,7 +605,7 @@
                 transform="matrix(1,0,0,1,479.797791,336.868866)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -678,7 +631,7 @@
                 transform="matrix(1,0,0,1,513.131104,370.202209)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -704,7 +657,7 @@
                 transform="matrix(1,0,0,1,546.464478,403.535522)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -730,7 +683,7 @@
                 transform="matrix(1,0,0,1,579.797791,436.868866)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -756,7 +709,7 @@
                 transform="matrix(1,0,0,1,613.131104,470.202209)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -778,12 +731,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-72"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-72" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelAlign8.svg b/__tests__/integration/snapshots/AxisLinearLabelAlign8.svg
index 8d77a159b..e3eb78e85 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelAlign8.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelAlign8.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-73"
-        fill="none"
-        width="1000"
-        height="1000"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,750,500)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-73" fill="none" width="1000" height="1000">
+        <g id="g-svg-74" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,500 L 750,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,716.666687,466.666656)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 716.6666666666666,466.6666666666667 L 716.6666666666666,466.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,683.333313,433.333344)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 683.3333333333334,433.33333333333337 L 683.3333333333334,433.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,400)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,400 L 650,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,616.666687,366.666656)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 616.6666666666667,366.6666666666667 L 616.6666666666667,366.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,583.333313,333.333344)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 583.3333333333334,333.33333333333337 L 583.3333333333334,333.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,300)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,300 L 550,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,516.666687,266.666656)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 516.6666666666667,266.6666666666667 L 516.6666666666667,266.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,483.333344,233.333328)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 483.33333333333337,233.33333333333337 L 483.33333333333337,233.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,200)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 450,200 L 450,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,416.666656,166.666672)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 416.6666666666667,166.66666666666669 L 416.6666666666667,166.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,383.333344,133.333328)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,73 +142,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 383.33333333333337,133.33333333333337 L 383.33333333333337,133.33333333333337"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,350,100)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="400"
-                  y1="400"
-                  x2="-10.606601717798213"
-                  y2="-10.606601717798211"
+                  x1="750"
+                  y1="500"
+                  x2="339.3933982822018"
+                  y2="89.39339828220179"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.353553,0.353553,-0.353553,0.353553,-10.606602,-10.606602)">
+                <g transform="matrix(0.353553,0.353553,-0.353553,0.353553,339.393402,89.393394)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,750,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -243,13 +201,13 @@
                 transform="matrix(1,0,0,1,716.666687,466.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -263,13 +221,13 @@
                 transform="matrix(1,0,0,1,683.333313,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -283,13 +241,13 @@
                 transform="matrix(1,0,0,1,650,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -303,13 +261,13 @@
                 transform="matrix(1,0,0,1,616.666687,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -323,13 +281,13 @@
                 transform="matrix(1,0,0,1,583.333313,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -343,13 +301,13 @@
                 transform="matrix(1,0,0,1,550,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -363,13 +321,13 @@
                 transform="matrix(1,0,0,1,516.666687,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -383,13 +341,13 @@
                 transform="matrix(1,0,0,1,483.333344,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -403,13 +361,13 @@
                 transform="matrix(1,0,0,1,450,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -423,13 +381,13 @@
                 transform="matrix(1,0,0,1,416.666656,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -443,13 +401,13 @@
                 transform="matrix(1,0,0,1,383.333344,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,753.535522,496.464478)"
+                transform="matrix(1,0,0,1,753.535522,496.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -493,10 +446,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,720.202209,463.131134)"
+                transform="matrix(1,0,0,1,720.202209,463.131134)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +472,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,686.868896,429.797791)"
+                transform="matrix(1,0,0,1,686.868896,429.797791)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -545,10 +498,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,653.535522,396.464478)"
+                transform="matrix(1,0,0,1,653.535522,396.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -571,10 +524,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,620.202209,363.131134)"
+                transform="matrix(1,0,0,1,620.202209,363.131134)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -597,10 +550,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,586.868896,329.797791)"
+                transform="matrix(1,0,0,1,586.868896,329.797791)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -623,10 +576,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,553.535522,296.464478)"
+                transform="matrix(1,0,0,1,553.535522,296.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -649,10 +602,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,520.202209,263.131134)"
+                transform="matrix(1,0,0,1,520.202209,263.131134)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -675,10 +628,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,486.868866,229.797806)"
+                transform="matrix(1,0,0,1,486.868866,229.797806)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -701,10 +654,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,453.535522,196.464462)"
+                transform="matrix(1,0,0,1,453.535522,196.464462)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -727,10 +680,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,420.202209,163.131134)"
+                transform="matrix(1,0,0,1,420.202209,163.131134)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -753,10 +706,10 @@
               <g
                 id="g-svg-59"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,386.868866,129.797806)"
+                transform="matrix(1,0,0,1,386.868866,129.797806)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -778,12 +731,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-72"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-72" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelAlign9.svg b/__tests__/integration/snapshots/AxisLinearLabelAlign9.svg
index c0ca9a8ce..7f20fdadf 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelAlign9.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelAlign9.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-73"
-        fill="none"
-        width="1000"
-        height="1000"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,850,500)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-73" fill="none" width="1000" height="1000">
+        <g id="g-svg-74" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,500 L 850,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,816.666687,466.666656)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 816.6666666666666,466.6666666666667 L 816.6666666666666,466.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,783.333313,433.333344)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 783.3333333333334,433.33333333333337 L 783.3333333333334,433.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,400)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,400 L 750,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,716.666687,366.666656)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 716.6666666666667,366.6666666666667 L 716.6666666666667,366.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,683.333313,333.333344)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 683.3333333333334,333.33333333333337 L 683.3333333333334,333.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,300)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,300 L 650,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,616.666687,266.666656)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 616.6666666666667,266.6666666666667 L 616.6666666666667,266.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,583.333313,233.333328)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 583.3333333333334,233.33333333333337 L 583.3333333333334,233.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,200)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,200 L 550,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,516.666687,166.666672)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 516.6666666666667,166.66666666666669 L 516.6666666666667,166.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,483.333344,133.333328)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,73 +142,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 483.33333333333337,133.33333333333337 L 483.33333333333337,133.33333333333337"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,450,100)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="400"
-                  y1="400"
-                  x2="-10.606601717798213"
-                  y2="-10.606601717798211"
+                  x1="850"
+                  y1="500"
+                  x2="439.3933982822018"
+                  y2="89.39339828220179"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.353553,0.353553,-0.353553,0.353553,-10.606602,-10.606602)">
+                <g transform="matrix(0.353553,0.353553,-0.353553,0.353553,439.393402,89.393394)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,850,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -243,13 +201,13 @@
                 transform="matrix(1,0,0,1,816.666687,466.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -263,13 +221,13 @@
                 transform="matrix(1,0,0,1,783.333313,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -283,13 +241,13 @@
                 transform="matrix(1,0,0,1,750,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -303,13 +261,13 @@
                 transform="matrix(1,0,0,1,716.666687,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -323,13 +281,13 @@
                 transform="matrix(1,0,0,1,683.333313,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -343,13 +301,13 @@
                 transform="matrix(1,0,0,1,650,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -363,13 +321,13 @@
                 transform="matrix(1,0,0,1,616.666687,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -383,13 +341,13 @@
                 transform="matrix(1,0,0,1,583.333313,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -403,13 +361,13 @@
                 transform="matrix(1,0,0,1,550,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -423,13 +381,13 @@
                 transform="matrix(1,0,0,1,516.666687,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -443,13 +401,13 @@
                 transform="matrix(1,0,0,1,483.333344,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-7.071068,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
-                    x1="7.071067811865475"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-7.071067811865475"
                     y2="7.071067811865475"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,853.535522,496.464478)"
+                transform="matrix(1,0,0,1,853.535522,496.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -493,10 +446,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,820.202209,463.131134)"
+                transform="matrix(1,0,0,1,820.202209,463.131134)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -519,10 +472,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,786.868896,429.797791)"
+                transform="matrix(1,0,0,1,786.868896,429.797791)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -545,10 +498,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,753.535522,396.464478)"
+                transform="matrix(1,0,0,1,753.535522,396.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -571,10 +524,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,720.202209,363.131134)"
+                transform="matrix(1,0,0,1,720.202209,363.131134)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -597,10 +550,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,686.868896,329.797791)"
+                transform="matrix(1,0,0,1,686.868896,329.797791)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -623,10 +576,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,653.535522,296.464478)"
+                transform="matrix(1,0,0,1,653.535522,296.464478)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -649,10 +602,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,620.202209,263.131134)"
+                transform="matrix(1,0,0,1,620.202209,263.131134)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -675,10 +628,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,586.868896,229.797806)"
+                transform="matrix(1,0,0,1,586.868896,229.797806)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -701,10 +654,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,553.535522,196.464462)"
+                transform="matrix(1,0,0,1,553.535522,196.464462)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -727,10 +680,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,520.202209,163.131134)"
+                transform="matrix(1,0,0,1,520.202209,163.131134)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -753,10 +706,10 @@
               <g
                 id="g-svg-59"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,486.868866,129.797806)"
+                transform="matrix(1,0,0,1,486.868866,129.797806)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -778,12 +731,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-72"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-72" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelOverlap.svg b/__tests__/integration/snapshots/AxisLinearLabelOverlap.svg
index 177e85622..21e917d6f 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelOverlap.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelOverlap.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-2129"
-        fill="none"
-        width="1000"
-        height="550"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-2130" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-2129" fill="none" width="1000" height="550">
+        <g id="g-svg-2130" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,50 L 87.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,50 L 125,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,50 L 162.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,50 L 200,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,50 L 237.49999999999997,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,50 L 275,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,50 L 312.49999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,50 L 350,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,50 L 387.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,50 L 424.99999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,67 +142,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,50 L 462.5,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
@@ -243,7 +201,7 @@
                 transform="matrix(1,0,0,1,87.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
@@ -263,7 +221,7 @@
                 transform="matrix(1,0,0,1,125,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -283,7 +241,7 @@
                 transform="matrix(1,0,0,1,162.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -303,7 +261,7 @@
                 transform="matrix(1,0,0,1,200,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -323,7 +281,7 @@
                 transform="matrix(1,0,0,1,237.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -343,7 +301,7 @@
                 transform="matrix(1,0,0,1,275,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
@@ -363,7 +321,7 @@
                 transform="matrix(1,0,0,1,312.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
@@ -383,7 +341,7 @@
                 transform="matrix(1,0,0,1,350,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
@@ -403,7 +361,7 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -423,7 +381,7 @@
                 transform="matrix(1,0,0,1,425,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -443,7 +401,7 @@
                 transform="matrix(1,0,0,1,462.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
                 transform="matrix(1,0,0,1,50,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -497,7 +450,7 @@
                 transform="matrix(1,0,0,1,87.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -524,7 +477,7 @@
                 transform="matrix(1,0,0,1,125,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -551,7 +504,7 @@
                 transform="matrix(1,0,0,1,162.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -578,7 +531,7 @@
                 transform="matrix(1,0,0,1,200,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -605,7 +558,7 @@
                 transform="matrix(1,0,0,1,237.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -632,7 +585,7 @@
                 transform="matrix(1,0,0,1,275,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -659,7 +612,7 @@
                 transform="matrix(1,0,0,1,312.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -686,7 +639,7 @@
                 transform="matrix(1,0,0,1,350,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -713,7 +666,7 @@
                 transform="matrix(1,0,0,1,387.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -740,7 +693,7 @@
                 transform="matrix(1,0,0,1,425,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -767,7 +720,7 @@
                 transform="matrix(1,0,0,1,462.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -793,10 +746,10 @@
           <g
             id="g-svg-72"
             fill="none"
-            transform="matrix(1,0,0,1,-15.680000,111)"
+            transform="matrix(1,0,0,1,5.100000,99.500000)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-73"
                 fill="rgba(0,0,0,1)"
@@ -817,26 +770,22 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-2131" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-75"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-76"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-77"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,100)">
+        <g id="g-svg-2131" fill="none">
+          <g id="g-svg-74" fill="none" class="axis-grid-group">
+            <g id="g-svg-75" fill="none" class="axis-grid">
+              <g id="g-svg-76" fill="none" class="grid-line-group">
+                <g>
+                  <path
+                    id="g-svg-78"
+                    fill="none"
+                    class="grid-line"
+                    stroke="rgba(217,217,217,1)"
+                    stroke-width="1"
+                    stroke-dasharray="4,4"
+                    d="M 50,100 L 50,100"
+                  />
+                </g>
+                <g>
                   <path
                     id="g-svg-79"
                     fill="none"
@@ -844,10 +793,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,100 L 87.5,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,100)">
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
@@ -855,10 +804,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,100 L 125,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,100)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
@@ -866,10 +815,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,100 L 162.5,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,100)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
@@ -877,10 +826,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,100 L 200,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,100)">
+                <g>
                   <path
                     id="g-svg-83"
                     fill="none"
@@ -888,10 +837,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,100 L 237.49999999999997,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,100)">
+                <g>
                   <path
                     id="g-svg-84"
                     fill="none"
@@ -899,10 +848,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,100 L 275,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,100)">
+                <g>
                   <path
                     id="g-svg-85"
                     fill="none"
@@ -910,10 +859,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,100 L 312.49999999999994,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,100)">
+                <g>
                   <path
                     id="g-svg-86"
                     fill="none"
@@ -921,10 +870,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,100 L 350,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,100)">
+                <g>
                   <path
                     id="g-svg-87"
                     fill="none"
@@ -932,10 +881,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,100 L 387.5,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,100)">
+                <g>
                   <path
                     id="g-svg-88"
                     fill="none"
@@ -943,10 +892,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,100 L 424.99999999999994,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,100)">
+                <g>
                   <path
                     id="g-svg-89"
                     fill="none"
@@ -954,80 +903,48 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
-                  />
-                </g>
-                <g transform="matrix(1,0,0,1,462.500000,100)">
-                  <path
-                    id="g-svg-90"
-                    fill="none"
-                    class="grid-line"
-                    stroke="rgba(217,217,217,1)"
-                    stroke-width="1"
-                    stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,100 L 462.5,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-78"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-77" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-91"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-92"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,100)">
+          <g id="g-svg-90" fill="none" class="axis-main-group">
+            <g id="g-svg-91" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-93"
+                  id="g-svg-92"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="100"
+                  x2="515"
+                  y2="100"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,100)">
                   <path
-                    id="g-svg-95"
+                    id="g-svg-94"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-96"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-95" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-97"
+                id="g-svg-96"
                 fill="none"
                 transform="matrix(1,0,0,1,50,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-109"
+                    id="g-svg-108"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1040,14 +957,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-98"
+                id="g-svg-97"
                 fill="none"
                 transform="matrix(1,0,0,1,87.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-110"
+                    id="g-svg-109"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1060,14 +977,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-99"
+                id="g-svg-98"
                 fill="none"
                 transform="matrix(1,0,0,1,125,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-111"
+                    id="g-svg-110"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1080,14 +997,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-100"
+                id="g-svg-99"
                 fill="none"
                 transform="matrix(1,0,0,1,162.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-112"
+                    id="g-svg-111"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1100,14 +1017,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-101"
+                id="g-svg-100"
                 fill="none"
                 transform="matrix(1,0,0,1,200,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-113"
+                    id="g-svg-112"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1120,14 +1037,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-102"
+                id="g-svg-101"
                 fill="none"
                 transform="matrix(1,0,0,1,237.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-114"
+                    id="g-svg-113"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1140,14 +1057,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-103"
+                id="g-svg-102"
                 fill="none"
                 transform="matrix(1,0,0,1,275,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-115"
+                    id="g-svg-114"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1160,14 +1077,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-104"
+                id="g-svg-103"
                 fill="none"
                 transform="matrix(1,0,0,1,312.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-116"
+                    id="g-svg-115"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1180,14 +1097,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-105"
+                id="g-svg-104"
                 fill="none"
                 transform="matrix(1,0,0,1,350,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-117"
+                    id="g-svg-116"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1200,14 +1117,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-106"
+                id="g-svg-105"
                 fill="none"
                 transform="matrix(1,0,0,1,387.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-118"
+                    id="g-svg-117"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1220,14 +1137,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-107"
+                id="g-svg-106"
                 fill="none"
                 transform="matrix(1,0,0,1,425,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-119"
+                    id="g-svg-118"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1240,14 +1157,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-108"
+                id="g-svg-107"
                 fill="none"
                 transform="matrix(1,0,0,1,462.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-120"
+                    id="g-svg-119"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1260,21 +1177,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-121"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-120" fill="none" class="axis-label-group">
               <g
-                id="g-svg-122"
+                id="g-svg-121"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,50,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-134"
+                    id="g-svg-133"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1293,14 +1205,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-123"
+                id="g-svg-122"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,87.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-135"
+                    id="g-svg-134"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1319,14 +1231,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-124"
+                id="g-svg-123"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,125,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-136"
+                    id="g-svg-135"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1345,14 +1257,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-125"
+                id="g-svg-124"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,162.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-137"
+                    id="g-svg-136"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1371,14 +1283,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-126"
+                id="g-svg-125"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,200,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-138"
+                    id="g-svg-137"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1397,14 +1309,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-127"
+                id="g-svg-126"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,237.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-139"
+                    id="g-svg-138"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1423,14 +1335,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-128"
+                id="g-svg-127"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,275,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-140"
+                    id="g-svg-139"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1449,14 +1361,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-129"
+                id="g-svg-128"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,312.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-141"
+                    id="g-svg-140"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1475,14 +1387,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-130"
+                id="g-svg-129"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,350,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-142"
+                    id="g-svg-141"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1501,14 +1413,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-131"
+                id="g-svg-130"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,387.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-143"
+                    id="g-svg-142"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1527,14 +1439,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-132"
+                id="g-svg-131"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,425,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-144"
+                    id="g-svg-143"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1553,14 +1465,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-133"
+                id="g-svg-132"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,462.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-145"
+                    id="g-svg-144"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1581,14 +1493,14 @@
             </g>
           </g>
           <g
-            id="g-svg-146"
+            id="g-svg-145"
             fill="none"
-            transform="matrix(1,0,0,1,-22.971727,180.949661)"
+            transform="matrix(1,0,0,1,9.448272,169.449661)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-147"
+                id="g-svg-146"
                 fill="rgba(0,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1607,217 +1519,181 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-2132" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-149"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-150"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-151"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,200)">
+        <g id="g-svg-2132" fill="none">
+          <g id="g-svg-147" fill="none" class="axis-grid-group">
+            <g id="g-svg-148" fill="none" class="axis-grid">
+              <g id="g-svg-149" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-153"
+                    id="g-svg-151"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,200 L 50,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,200)">
+                <g>
                   <path
-                    id="g-svg-154"
+                    id="g-svg-152"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,200 L 87.5,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,200)">
+                <g>
                   <path
-                    id="g-svg-155"
+                    id="g-svg-153"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,200 L 125,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,200)">
+                <g>
                   <path
-                    id="g-svg-156"
+                    id="g-svg-154"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,200 L 162.5,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,200)">
+                <g>
                   <path
-                    id="g-svg-157"
+                    id="g-svg-155"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,200)">
+                <g>
                   <path
-                    id="g-svg-158"
+                    id="g-svg-156"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,200 L 237.49999999999997,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,200)">
+                <g>
                   <path
-                    id="g-svg-159"
+                    id="g-svg-157"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,200 L 275,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,200)">
+                <g>
                   <path
-                    id="g-svg-160"
+                    id="g-svg-158"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,200 L 312.49999999999994,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,200)">
+                <g>
                   <path
-                    id="g-svg-161"
+                    id="g-svg-159"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,200 L 350,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,200)">
+                <g>
                   <path
-                    id="g-svg-162"
+                    id="g-svg-160"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,200 L 387.5,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,200)">
+                <g>
                   <path
-                    id="g-svg-163"
+                    id="g-svg-161"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,200 L 424.99999999999994,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,200)">
+                <g>
                   <path
-                    id="g-svg-164"
+                    id="g-svg-162"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,200 L 462.5,200"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-152"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-150" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-165"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-166"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,200)">
+          <g id="g-svg-163" fill="none" class="axis-main-group">
+            <g id="g-svg-164" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-167"
+                  id="g-svg-165"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="200"
+                  x2="515"
+                  y2="200"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,200)">
                   <path
-                    id="g-svg-169"
+                    id="g-svg-167"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-170"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-168" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-171"
+                id="g-svg-169"
                 fill="none"
                 transform="matrix(1,0,0,1,50,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-183"
+                    id="g-svg-181"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1830,14 +1706,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-172"
+                id="g-svg-170"
                 fill="none"
                 transform="matrix(1,0,0,1,87.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-184"
+                    id="g-svg-182"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1850,14 +1726,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-173"
+                id="g-svg-171"
                 fill="none"
                 transform="matrix(1,0,0,1,125,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-185"
+                    id="g-svg-183"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1870,14 +1746,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-174"
+                id="g-svg-172"
                 fill="none"
                 transform="matrix(1,0,0,1,162.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-186"
+                    id="g-svg-184"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1890,14 +1766,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-175"
+                id="g-svg-173"
                 fill="none"
                 transform="matrix(1,0,0,1,200,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-187"
+                    id="g-svg-185"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1910,14 +1786,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-176"
+                id="g-svg-174"
                 fill="none"
                 transform="matrix(1,0,0,1,237.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-188"
+                    id="g-svg-186"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1930,14 +1806,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-177"
+                id="g-svg-175"
                 fill="none"
                 transform="matrix(1,0,0,1,275,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-189"
+                    id="g-svg-187"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1950,14 +1826,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-178"
+                id="g-svg-176"
                 fill="none"
                 transform="matrix(1,0,0,1,312.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-190"
+                    id="g-svg-188"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1970,14 +1846,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-179"
+                id="g-svg-177"
                 fill="none"
                 transform="matrix(1,0,0,1,350,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-191"
+                    id="g-svg-189"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1990,14 +1866,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-180"
+                id="g-svg-178"
                 fill="none"
                 transform="matrix(1,0,0,1,387.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-192"
+                    id="g-svg-190"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2010,14 +1886,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-181"
+                id="g-svg-179"
                 fill="none"
                 transform="matrix(1,0,0,1,425,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-193"
+                    id="g-svg-191"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2030,14 +1906,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-182"
+                id="g-svg-180"
                 fill="none"
                 transform="matrix(1,0,0,1,462.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-194"
+                    id="g-svg-192"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2050,21 +1926,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-195"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-193" fill="none" class="axis-label-group">
               <g
-                id="g-svg-196"
+                id="g-svg-194"
                 fill="none"
                 transform="matrix(1,0,0,1,50,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-208"
+                    id="g-svg-206"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2085,14 +1956,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-197"
+                id="g-svg-195"
                 fill="none"
                 transform="matrix(1,0,0,1,87.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-209"
+                    id="g-svg-207"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2113,14 +1984,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-198"
+                id="g-svg-196"
                 fill="none"
                 transform="matrix(1,0,0,1,125,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-210"
+                    id="g-svg-208"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2141,14 +2012,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-199"
+                id="g-svg-197"
                 fill="none"
                 transform="matrix(1,0,0,1,162.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-211"
+                    id="g-svg-209"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2169,14 +2040,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-200"
+                id="g-svg-198"
                 fill="none"
                 transform="matrix(1,0,0,1,200,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-212"
+                    id="g-svg-210"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2197,14 +2068,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-201"
+                id="g-svg-199"
                 fill="none"
                 transform="matrix(1,0,0,1,237.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-213"
+                    id="g-svg-211"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2225,14 +2096,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-202"
+                id="g-svg-200"
                 fill="none"
                 transform="matrix(1,0,0,1,275,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-214"
+                    id="g-svg-212"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2253,14 +2124,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-203"
+                id="g-svg-201"
                 fill="none"
                 transform="matrix(1,0,0,1,312.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-215"
+                    id="g-svg-213"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2281,14 +2152,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-204"
+                id="g-svg-202"
                 fill="none"
                 transform="matrix(1,0,0,1,350,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-216"
+                    id="g-svg-214"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2309,14 +2180,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-205"
+                id="g-svg-203"
                 fill="none"
                 transform="matrix(1,0,0,1,387.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-217"
+                    id="g-svg-215"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2337,14 +2208,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-206"
+                id="g-svg-204"
                 fill="none"
                 transform="matrix(1,0,0,1,425,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-218"
+                    id="g-svg-216"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2365,14 +2236,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-207"
+                id="g-svg-205"
                 fill="none"
                 transform="matrix(1,0,0,1,462.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-219"
+                    id="g-svg-217"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2395,14 +2266,14 @@
             </g>
           </g>
           <g
-            id="g-svg-220"
+            id="g-svg-218"
             fill="none"
-            transform="matrix(1,0,0,1,-29.120001,261)"
+            transform="matrix(1,0,0,1,-1.620000,249.500000)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-221"
+                id="g-svg-219"
                 fill="rgba(0,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -2421,217 +2292,181 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-2133" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-223"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-224"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-225"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,300)">
+        <g id="g-svg-2133" fill="none">
+          <g id="g-svg-220" fill="none" class="axis-grid-group">
+            <g id="g-svg-221" fill="none" class="axis-grid">
+              <g id="g-svg-222" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-227"
+                    id="g-svg-224"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,300 L 50,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,300)">
+                <g>
                   <path
-                    id="g-svg-228"
+                    id="g-svg-225"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,300 L 87.5,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,300)">
+                <g>
                   <path
-                    id="g-svg-229"
+                    id="g-svg-226"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,300 L 125,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,300)">
+                <g>
                   <path
-                    id="g-svg-230"
+                    id="g-svg-227"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,300 L 162.5,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,300)">
+                <g>
                   <path
-                    id="g-svg-231"
+                    id="g-svg-228"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,300 L 200,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,300)">
+                <g>
                   <path
-                    id="g-svg-232"
+                    id="g-svg-229"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,300 L 237.49999999999997,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,300)">
+                <g>
                   <path
-                    id="g-svg-233"
+                    id="g-svg-230"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,300 L 275,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,300)">
+                <g>
                   <path
-                    id="g-svg-234"
+                    id="g-svg-231"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,300 L 312.49999999999994,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,300)">
+                <g>
                   <path
-                    id="g-svg-235"
+                    id="g-svg-232"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,300 L 350,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,300)">
+                <g>
                   <path
-                    id="g-svg-236"
+                    id="g-svg-233"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,300 L 387.5,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,300)">
+                <g>
                   <path
-                    id="g-svg-237"
+                    id="g-svg-234"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,300 L 424.99999999999994,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,300)">
+                <g>
                   <path
-                    id="g-svg-238"
+                    id="g-svg-235"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,300 L 462.5,300"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-226"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-223" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-239"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-240"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,300)">
+          <g id="g-svg-236" fill="none" class="axis-main-group">
+            <g id="g-svg-237" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-241"
+                  id="g-svg-238"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="300"
+                  x2="515"
+                  y2="300"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,300)">
                   <path
-                    id="g-svg-243"
+                    id="g-svg-240"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-244"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-241" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-245"
+                id="g-svg-242"
                 fill="none"
                 transform="matrix(1,0,0,1,50,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-257"
+                    id="g-svg-254"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2644,14 +2479,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-246"
+                id="g-svg-243"
                 fill="none"
                 transform="matrix(1,0,0,1,87.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-258"
+                    id="g-svg-255"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2664,14 +2499,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-247"
+                id="g-svg-244"
                 fill="none"
                 transform="matrix(1,0,0,1,125,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-259"
+                    id="g-svg-256"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2684,14 +2519,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-248"
+                id="g-svg-245"
                 fill="none"
                 transform="matrix(1,0,0,1,162.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-260"
+                    id="g-svg-257"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2704,14 +2539,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-249"
+                id="g-svg-246"
                 fill="none"
                 transform="matrix(1,0,0,1,200,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-261"
+                    id="g-svg-258"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2724,14 +2559,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-250"
+                id="g-svg-247"
                 fill="none"
                 transform="matrix(1,0,0,1,237.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-262"
+                    id="g-svg-259"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2744,14 +2579,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-251"
+                id="g-svg-248"
                 fill="none"
                 transform="matrix(1,0,0,1,275,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-263"
+                    id="g-svg-260"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2764,14 +2599,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-252"
+                id="g-svg-249"
                 fill="none"
                 transform="matrix(1,0,0,1,312.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-264"
+                    id="g-svg-261"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2784,14 +2619,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-253"
+                id="g-svg-250"
                 fill="none"
                 transform="matrix(1,0,0,1,350,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-265"
+                    id="g-svg-262"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2804,14 +2639,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-254"
+                id="g-svg-251"
                 fill="none"
                 transform="matrix(1,0,0,1,387.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-266"
+                    id="g-svg-263"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2824,14 +2659,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-255"
+                id="g-svg-252"
                 fill="none"
                 transform="matrix(1,0,0,1,425,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-267"
+                    id="g-svg-264"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2844,14 +2679,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-256"
+                id="g-svg-253"
                 fill="none"
                 transform="matrix(1,0,0,1,462.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-268"
+                    id="g-svg-265"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -2864,21 +2699,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-269"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-266" fill="none" class="axis-label-group">
               <g
-                id="g-svg-270"
+                id="g-svg-267"
                 fill="none"
                 transform="matrix(1,0,0,1,50,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-282"
+                    id="g-svg-279"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2898,14 +2728,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-271"
+                id="g-svg-268"
                 fill="none"
                 transform="matrix(1,0,0,1,87.500000,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-283"
+                    id="g-svg-280"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2925,14 +2755,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-272"
+                id="g-svg-269"
                 fill="none"
                 transform="matrix(1,0,0,1,125,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-284"
+                    id="g-svg-281"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2952,14 +2782,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-273"
+                id="g-svg-270"
                 fill="none"
                 transform="matrix(1,0,0,1,162.500000,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-285"
+                    id="g-svg-282"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2979,14 +2809,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-274"
+                id="g-svg-271"
                 fill="none"
                 transform="matrix(1,0,0,1,200,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-286"
+                    id="g-svg-283"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3006,14 +2836,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-275"
+                id="g-svg-272"
                 fill="none"
                 transform="matrix(1,0,0,1,237.500000,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-287"
+                    id="g-svg-284"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3033,14 +2863,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-276"
+                id="g-svg-273"
                 fill="none"
                 transform="matrix(1,0,0,1,275,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-288"
+                    id="g-svg-285"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3060,14 +2890,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-277"
+                id="g-svg-274"
                 fill="none"
                 transform="matrix(1,0,0,1,312.500000,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-289"
+                    id="g-svg-286"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3087,14 +2917,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-278"
+                id="g-svg-275"
                 fill="none"
                 transform="matrix(1,0,0,1,350,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-290"
+                    id="g-svg-287"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3114,14 +2944,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-279"
+                id="g-svg-276"
                 fill="none"
                 transform="matrix(1,0,0,1,387.500000,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-291"
+                    id="g-svg-288"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3141,14 +2971,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-280"
+                id="g-svg-277"
                 fill="none"
                 transform="matrix(1,0,0,1,425,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-292"
+                    id="g-svg-289"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3168,14 +2998,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-281"
+                id="g-svg-278"
                 fill="none"
                 transform="matrix(1,0,0,1,462.500000,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-293"
+                    id="g-svg-290"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3197,14 +3027,14 @@
             </g>
           </g>
           <g
-            id="g-svg-294"
+            id="g-svg-291"
             fill="none"
-            transform="matrix(1,0,0,1,-38.119999,361)"
+            transform="matrix(1,0,0,1,-3.120000,349.500000)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-295"
+                id="g-svg-292"
                 fill="rgba(0,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -3223,222 +3053,186 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-2134" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-297"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-298"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-299"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,500,400)">
+        <g id="g-svg-2134" fill="none">
+          <g id="g-svg-293" fill="none" class="axis-grid-group">
+            <g id="g-svg-294" fill="none" class="axis-grid">
+              <g id="g-svg-295" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-301"
+                    id="g-svg-297"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,400 L 500,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,400)">
+                <g>
                   <path
-                    id="g-svg-302"
+                    id="g-svg-298"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,400 L 462.5,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,400)">
+                <g>
                   <path
-                    id="g-svg-303"
+                    id="g-svg-299"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 425,400 L 425,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,400)">
+                <g>
                   <path
-                    id="g-svg-304"
+                    id="g-svg-300"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,400 L 387.5,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,400)">
+                <g>
                   <path
-                    id="g-svg-305"
+                    id="g-svg-301"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,400 L 350,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,400)">
+                <g>
                   <path
-                    id="g-svg-306"
+                    id="g-svg-302"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.5,400 L 312.5,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,400)">
+                <g>
                   <path
-                    id="g-svg-307"
+                    id="g-svg-303"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,400 L 275,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,400)">
+                <g>
                   <path
-                    id="g-svg-308"
+                    id="g-svg-304"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.50000000000006,400 L 237.50000000000006,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,400)">
+                <g>
                   <path
-                    id="g-svg-309"
+                    id="g-svg-305"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,400 L 200,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,400)">
+                <g>
                   <path
-                    id="g-svg-310"
+                    id="g-svg-306"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,400 L 162.5,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,400)">
+                <g>
                   <path
-                    id="g-svg-311"
+                    id="g-svg-307"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125.00000000000006,400 L 125.00000000000006,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,400)">
+                <g>
                   <path
-                    id="g-svg-312"
+                    id="g-svg-308"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,400 L 87.5,400"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-300"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-296" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-313"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-314"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,400)">
+          <g id="g-svg-309" fill="none" class="axis-main-group">
+            <g id="g-svg-310" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-315"
+                  id="g-svg-311"
                   fill="none"
-                  x1="450"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="500"
+                  y1="400"
+                  x2="35"
+                  y2="400"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,35,400)">
                   <path
-                    id="g-svg-317"
+                    id="g-svg-313"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-318"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-314" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-319"
+                id="g-svg-315"
                 fill="none"
                 transform="matrix(1,0,0,1,500,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-331"
+                    id="g-svg-327"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3446,19 +3240,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-320"
+                id="g-svg-316"
                 fill="none"
                 transform="matrix(1,0,0,1,462.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-332"
+                    id="g-svg-328"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3466,19 +3260,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-321"
+                id="g-svg-317"
                 fill="none"
                 transform="matrix(1,0,0,1,425,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-333"
+                    id="g-svg-329"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3486,19 +3280,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-322"
+                id="g-svg-318"
                 fill="none"
                 transform="matrix(1,0,0,1,387.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-334"
+                    id="g-svg-330"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3506,19 +3300,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-323"
+                id="g-svg-319"
                 fill="none"
                 transform="matrix(1,0,0,1,350,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-335"
+                    id="g-svg-331"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3526,19 +3320,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-324"
+                id="g-svg-320"
                 fill="none"
                 transform="matrix(1,0,0,1,312.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-336"
+                    id="g-svg-332"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3546,19 +3340,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-325"
+                id="g-svg-321"
                 fill="none"
                 transform="matrix(1,0,0,1,275,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-337"
+                    id="g-svg-333"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3566,19 +3360,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-326"
+                id="g-svg-322"
                 fill="none"
                 transform="matrix(1,0,0,1,237.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-338"
+                    id="g-svg-334"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3586,19 +3380,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-327"
+                id="g-svg-323"
                 fill="none"
                 transform="matrix(1,0,0,1,200,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-339"
+                    id="g-svg-335"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3606,19 +3400,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-328"
+                id="g-svg-324"
                 fill="none"
                 transform="matrix(1,0,0,1,162.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-340"
+                    id="g-svg-336"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3626,19 +3420,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-329"
+                id="g-svg-325"
                 fill="none"
                 transform="matrix(1,0,0,1,125,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-341"
+                    id="g-svg-337"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3646,19 +3440,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-330"
+                id="g-svg-326"
                 fill="none"
                 transform="matrix(1,0,0,1,87.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-342"
+                    id="g-svg-338"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3666,21 +3460,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-343"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-339" fill="none" class="axis-label-group">
               <g
-                id="g-svg-344"
+                id="g-svg-340"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,500,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-356"
+                    id="g-svg-352"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3699,14 +3488,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-345"
+                id="g-svg-341"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,462.500000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-357"
+                    id="g-svg-353"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3725,14 +3514,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-346"
+                id="g-svg-342"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,425,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-358"
+                    id="g-svg-354"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3751,14 +3540,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-347"
+                id="g-svg-343"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,387.500000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-359"
+                    id="g-svg-355"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3777,14 +3566,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-348"
+                id="g-svg-344"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,350,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-360"
+                    id="g-svg-356"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3803,14 +3592,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-349"
+                id="g-svg-345"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,312.500000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-361"
+                    id="g-svg-357"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3829,14 +3618,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-350"
+                id="g-svg-346"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,275,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-362"
+                    id="g-svg-358"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3855,14 +3644,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-351"
+                id="g-svg-347"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,237.500000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-363"
+                    id="g-svg-359"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3881,14 +3670,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-352"
+                id="g-svg-348"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,200,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-364"
+                    id="g-svg-360"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3907,14 +3696,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-353"
+                id="g-svg-349"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,162.500000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-365"
+                    id="g-svg-361"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3933,14 +3722,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-354"
+                id="g-svg-350"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,125,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-366"
+                    id="g-svg-362"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3959,14 +3748,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-355"
+                id="g-svg-351"
                 fill="none"
                 transform="matrix(0.707107,0.707107,-0.707107,0.707107,87.500000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
-                    id="g-svg-367"
+                    id="g-svg-363"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3986,229 +3775,188 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-368"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-364" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-2135" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-369"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-370"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-371"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,500,450)">
+        <g id="g-svg-2135" fill="none">
+          <g id="g-svg-365" fill="none" class="axis-grid-group">
+            <g id="g-svg-366" fill="none" class="axis-grid">
+              <g id="g-svg-367" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-373"
+                    id="g-svg-369"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,450 L 500,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,450)">
+                <g>
                   <path
-                    id="g-svg-374"
+                    id="g-svg-370"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,450 L 462.5,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,450)">
+                <g>
                   <path
-                    id="g-svg-375"
+                    id="g-svg-371"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 425,450 L 425,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,450)">
+                <g>
                   <path
-                    id="g-svg-376"
+                    id="g-svg-372"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,450 L 387.5,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,450)">
+                <g>
                   <path
-                    id="g-svg-377"
+                    id="g-svg-373"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,450 L 350,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,450)">
+                <g>
                   <path
-                    id="g-svg-378"
+                    id="g-svg-374"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.5,450 L 312.5,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,450)">
+                <g>
                   <path
-                    id="g-svg-379"
+                    id="g-svg-375"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,450 L 275,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,450)">
+                <g>
                   <path
-                    id="g-svg-380"
+                    id="g-svg-376"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.50000000000006,450 L 237.50000000000006,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,450)">
+                <g>
                   <path
-                    id="g-svg-381"
+                    id="g-svg-377"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,450 L 200,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,450)">
+                <g>
                   <path
-                    id="g-svg-382"
+                    id="g-svg-378"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,450 L 162.5,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,450)">
+                <g>
                   <path
-                    id="g-svg-383"
+                    id="g-svg-379"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125.00000000000006,450 L 125.00000000000006,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,450)">
+                <g>
                   <path
-                    id="g-svg-384"
+                    id="g-svg-380"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,450 L 87.5,450"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-372"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-368" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-385"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-386"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,450)">
+          <g id="g-svg-381" fill="none" class="axis-main-group">
+            <g id="g-svg-382" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-387"
+                  id="g-svg-383"
                   fill="none"
-                  x1="450"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="500"
+                  y1="450"
+                  x2="35"
+                  y2="450"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,35,450)">
                   <path
-                    id="g-svg-389"
+                    id="g-svg-385"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-390"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-386" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-391"
+                id="g-svg-387"
                 fill="none"
                 transform="matrix(1,0,0,1,500,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-403"
+                    id="g-svg-399"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -4216,19 +3964,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-392"
+                id="g-svg-388"
                 fill="none"
                 transform="matrix(1,0,0,1,462.500000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-404"
+                    id="g-svg-400"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -4236,19 +3984,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-393"
+                id="g-svg-389"
                 fill="none"
                 transform="matrix(1,0,0,1,425,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-405"
+                    id="g-svg-401"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -4256,19 +4004,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-394"
+                id="g-svg-390"
                 fill="none"
                 transform="matrix(1,0,0,1,387.500000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-406"
+                    id="g-svg-402"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -4276,19 +4024,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-395"
+                id="g-svg-391"
                 fill="none"
                 transform="matrix(1,0,0,1,350,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-407"
+                    id="g-svg-403"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -4296,19 +4044,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-396"
+                id="g-svg-392"
                 fill="none"
                 transform="matrix(1,0,0,1,312.500000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-408"
+                    id="g-svg-404"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -4316,19 +4064,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-397"
+                id="g-svg-393"
                 fill="none"
                 transform="matrix(1,0,0,1,275,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-409"
+                    id="g-svg-405"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -4336,19 +4084,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-398"
+                id="g-svg-394"
                 fill="none"
                 transform="matrix(1,0,0,1,237.500000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-410"
+                    id="g-svg-406"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -4356,19 +4104,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-399"
+                id="g-svg-395"
                 fill="none"
                 transform="matrix(1,0,0,1,200,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-411"
+                    id="g-svg-407"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -4376,19 +4124,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-400"
+                id="g-svg-396"
                 fill="none"
                 transform="matrix(1,0,0,1,162.500000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-412"
+                    id="g-svg-408"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -4396,19 +4144,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-401"
+                id="g-svg-397"
                 fill="none"
                 transform="matrix(1,0,0,1,125,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-413"
+                    id="g-svg-409"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -4416,19 +4164,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-402"
+                id="g-svg-398"
                 fill="none"
                 transform="matrix(1,0,0,1,87.500000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-414"
+                    id="g-svg-410"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -4436,21 +4184,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-415"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-411" fill="none" class="axis-label-group">
               <g
-                id="g-svg-416"
+                id="g-svg-412"
                 fill="none"
                 transform="matrix(1,0,0,1,500,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-428"
+                    id="g-svg-424"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4471,14 +4214,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-417"
+                id="g-svg-413"
                 fill="none"
                 transform="matrix(1,0,0,1,462.500000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-429"
+                    id="g-svg-425"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4499,14 +4242,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-418"
+                id="g-svg-414"
                 fill="none"
                 transform="matrix(1,0,0,1,425,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-430"
+                    id="g-svg-426"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4527,14 +4270,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-419"
+                id="g-svg-415"
                 fill="none"
                 transform="matrix(1,0,0,1,387.500000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-431"
+                    id="g-svg-427"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4555,14 +4298,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-420"
+                id="g-svg-416"
                 fill="none"
                 transform="matrix(1,0,0,1,350,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-432"
+                    id="g-svg-428"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4583,14 +4326,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-421"
+                id="g-svg-417"
                 fill="none"
                 transform="matrix(1,0,0,1,312.500000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-433"
+                    id="g-svg-429"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4611,14 +4354,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-422"
+                id="g-svg-418"
                 fill="none"
                 transform="matrix(1,0,0,1,275,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-434"
+                    id="g-svg-430"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4639,14 +4382,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-423"
+                id="g-svg-419"
                 fill="none"
                 transform="matrix(1,0,0,1,237.500000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-435"
+                    id="g-svg-431"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4667,14 +4410,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-424"
+                id="g-svg-420"
                 fill="none"
                 transform="matrix(1,0,0,1,200,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-436"
+                    id="g-svg-432"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4695,14 +4438,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-425"
+                id="g-svg-421"
                 fill="none"
                 transform="matrix(1,0,0,1,162.500000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-437"
+                    id="g-svg-433"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4723,14 +4466,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-426"
+                id="g-svg-422"
                 fill="none"
                 transform="matrix(1,0,0,1,125,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-438"
+                    id="g-svg-434"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4751,14 +4494,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-427"
+                id="g-svg-423"
                 fill="none"
                 transform="matrix(1,0,0,1,87.500000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-439"
+                    id="g-svg-435"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4780,229 +4523,188 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-440"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-436" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-2136" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-441"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-442"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-443"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,500,500)">
+        <g id="g-svg-2136" fill="none">
+          <g id="g-svg-437" fill="none" class="axis-grid-group">
+            <g id="g-svg-438" fill="none" class="axis-grid">
+              <g id="g-svg-439" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-445"
+                    id="g-svg-441"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,500 L 500,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,500)">
+                <g>
                   <path
-                    id="g-svg-446"
+                    id="g-svg-442"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,500 L 462.5,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,500)">
+                <g>
                   <path
-                    id="g-svg-447"
+                    id="g-svg-443"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 425,500 L 425,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,500)">
+                <g>
                   <path
-                    id="g-svg-448"
+                    id="g-svg-444"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,500 L 387.5,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,500)">
+                <g>
                   <path
-                    id="g-svg-449"
+                    id="g-svg-445"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,500 L 350,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,500)">
+                <g>
                   <path
-                    id="g-svg-450"
+                    id="g-svg-446"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.5,500 L 312.5,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,500)">
+                <g>
                   <path
-                    id="g-svg-451"
+                    id="g-svg-447"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,500 L 275,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,500)">
+                <g>
                   <path
-                    id="g-svg-452"
+                    id="g-svg-448"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.50000000000006,500 L 237.50000000000006,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,500)">
+                <g>
                   <path
-                    id="g-svg-453"
+                    id="g-svg-449"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,500 L 200,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,500)">
+                <g>
                   <path
-                    id="g-svg-454"
+                    id="g-svg-450"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,500 L 162.5,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,500)">
+                <g>
                   <path
-                    id="g-svg-455"
+                    id="g-svg-451"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125.00000000000006,500 L 125.00000000000006,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,500)">
+                <g>
                   <path
-                    id="g-svg-456"
+                    id="g-svg-452"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,500 L 87.5,500"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-444"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-440" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-457"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-458"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,500)">
+          <g id="g-svg-453" fill="none" class="axis-main-group">
+            <g id="g-svg-454" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-459"
+                  id="g-svg-455"
                   fill="none"
-                  x1="450"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="500"
+                  y1="500"
+                  x2="35"
+                  y2="500"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,35,500)">
                   <path
-                    id="g-svg-461"
+                    id="g-svg-457"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-462"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-458" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-463"
+                id="g-svg-459"
                 fill="none"
                 transform="matrix(1,0,0,1,500,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-475"
+                    id="g-svg-471"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -5010,19 +4712,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-464"
+                id="g-svg-460"
                 fill="none"
                 transform="matrix(1,0,0,1,462.500000,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-476"
+                    id="g-svg-472"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -5030,19 +4732,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-465"
+                id="g-svg-461"
                 fill="none"
                 transform="matrix(1,0,0,1,425,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-477"
+                    id="g-svg-473"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -5050,19 +4752,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-466"
+                id="g-svg-462"
                 fill="none"
                 transform="matrix(1,0,0,1,387.500000,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-478"
+                    id="g-svg-474"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -5070,19 +4772,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-467"
+                id="g-svg-463"
                 fill="none"
                 transform="matrix(1,0,0,1,350,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-479"
+                    id="g-svg-475"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -5090,19 +4792,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-468"
+                id="g-svg-464"
                 fill="none"
                 transform="matrix(1,0,0,1,312.500000,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-480"
+                    id="g-svg-476"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -5110,19 +4812,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-469"
+                id="g-svg-465"
                 fill="none"
                 transform="matrix(1,0,0,1,275,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-481"
+                    id="g-svg-477"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -5130,19 +4832,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-470"
+                id="g-svg-466"
                 fill="none"
                 transform="matrix(1,0,0,1,237.500000,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-482"
+                    id="g-svg-478"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -5150,19 +4852,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-471"
+                id="g-svg-467"
                 fill="none"
                 transform="matrix(1,0,0,1,200,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-483"
+                    id="g-svg-479"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -5170,19 +4872,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-472"
+                id="g-svg-468"
                 fill="none"
                 transform="matrix(1,0,0,1,162.500000,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-484"
+                    id="g-svg-480"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -5190,19 +4892,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-473"
+                id="g-svg-469"
                 fill="none"
                 transform="matrix(1,0,0,1,125,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-485"
+                    id="g-svg-481"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -5210,19 +4912,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-474"
+                id="g-svg-470"
                 fill="none"
                 transform="matrix(1,0,0,1,87.500000,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-486"
+                    id="g-svg-482"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -5230,21 +4932,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-487"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-483" fill="none" class="axis-label-group">
               <g
-                id="g-svg-488"
+                id="g-svg-484"
                 fill="none"
                 transform="matrix(1,0,0,1,500,485)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-500"
+                    id="g-svg-496"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5264,14 +4961,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-489"
+                id="g-svg-485"
                 fill="none"
                 transform="matrix(1,0,0,1,462.500000,485)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-501"
+                    id="g-svg-497"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5291,14 +4988,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-490"
+                id="g-svg-486"
                 fill="none"
                 transform="matrix(1,0,0,1,425,485)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-502"
+                    id="g-svg-498"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5318,14 +5015,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-491"
+                id="g-svg-487"
                 fill="none"
                 transform="matrix(1,0,0,1,387.500000,485)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-503"
+                    id="g-svg-499"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5345,14 +5042,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-492"
+                id="g-svg-488"
                 fill="none"
                 transform="matrix(1,0,0,1,350,485)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-504"
+                    id="g-svg-500"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5372,14 +5069,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-493"
+                id="g-svg-489"
                 fill="none"
                 transform="matrix(1,0,0,1,312.500000,485)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-505"
+                    id="g-svg-501"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5399,14 +5096,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-494"
+                id="g-svg-490"
                 fill="none"
                 transform="matrix(1,0,0,1,275,485)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-506"
+                    id="g-svg-502"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5426,14 +5123,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-495"
+                id="g-svg-491"
                 fill="none"
                 transform="matrix(1,0,0,1,237.500000,485)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-507"
+                    id="g-svg-503"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5453,14 +5150,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-496"
+                id="g-svg-492"
                 fill="none"
                 transform="matrix(1,0,0,1,200,485)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-508"
+                    id="g-svg-504"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5480,14 +5177,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-497"
+                id="g-svg-493"
                 fill="none"
                 transform="matrix(1,0,0,1,162.500000,485)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-509"
+                    id="g-svg-505"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5507,14 +5204,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-498"
+                id="g-svg-494"
                 fill="none"
                 transform="matrix(1,0,0,1,125,485)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-510"
+                    id="g-svg-506"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5534,14 +5231,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-499"
+                id="g-svg-495"
                 fill="none"
                 transform="matrix(1,0,0,1,87.500000,485)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-511"
+                    id="g-svg-507"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5562,228 +5259,187 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-512"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-508" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-2137" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-513"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-514"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-515"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,575,50)">
+        <g id="g-svg-2137" fill="none">
+          <g id="g-svg-509" fill="none" class="axis-grid-group">
+            <g id="g-svg-510" fill="none" class="axis-grid">
+              <g id="g-svg-511" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-517"
+                    id="g-svg-513"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 575,50 L 575,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,575,83.333336)">
+                <g>
                   <path
-                    id="g-svg-518"
+                    id="g-svg-514"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 575,83.33333333333333 L 575,83.33333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,575,116.666664)">
+                <g>
                   <path
-                    id="g-svg-519"
+                    id="g-svg-515"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 575,116.66666666666666 L 575,116.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,575,150)">
+                <g>
                   <path
-                    id="g-svg-520"
+                    id="g-svg-516"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 575,150 L 575,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,575,183.333328)">
+                <g>
                   <path
-                    id="g-svg-521"
+                    id="g-svg-517"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 575,183.33333333333331 L 575,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,575,216.666672)">
+                <g>
                   <path
-                    id="g-svg-522"
+                    id="g-svg-518"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 575,216.66666666666666 L 575,216.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,575,250)">
+                <g>
                   <path
-                    id="g-svg-523"
+                    id="g-svg-519"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 575,250 L 575,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,575,283.333344)">
+                <g>
                   <path
-                    id="g-svg-524"
+                    id="g-svg-520"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 575,283.3333333333333 L 575,283.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,575,316.666656)">
+                <g>
                   <path
-                    id="g-svg-525"
+                    id="g-svg-521"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 575,316.66666666666663 L 575,316.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,575,350)">
+                <g>
                   <path
-                    id="g-svg-526"
+                    id="g-svg-522"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 575,350 L 575,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,575,383.333344)">
+                <g>
                   <path
-                    id="g-svg-527"
+                    id="g-svg-523"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 575,383.3333333333333 L 575,383.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,575,416.666656)">
+                <g>
                   <path
-                    id="g-svg-528"
+                    id="g-svg-524"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 575,416.66666666666663 L 575,416.66666666666663"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-516"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-512" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-529"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-530"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,575,50)">
+          <g id="g-svg-525" fill="none" class="axis-main-group">
+            <g id="g-svg-526" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-531"
+                  id="g-svg-527"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="415"
+                  x1="575"
+                  y1="50"
+                  x2="575"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,415)">
+                <g transform="matrix(0,-0.500000,0.500000,0,575,465)">
                   <path
-                    id="g-svg-533"
+                    id="g-svg-529"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-534"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-530" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-535"
+                id="g-svg-531"
                 fill="none"
                 transform="matrix(1,0,0,1,575,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-547"
+                    id="g-svg-543"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5792,18 +5448,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-536"
+                id="g-svg-532"
                 fill="none"
                 transform="matrix(1,0,0,1,575,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-548"
+                    id="g-svg-544"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5812,18 +5468,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-537"
+                id="g-svg-533"
                 fill="none"
                 transform="matrix(1,0,0,1,575,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-549"
+                    id="g-svg-545"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5832,18 +5488,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-538"
+                id="g-svg-534"
                 fill="none"
                 transform="matrix(1,0,0,1,575,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-550"
+                    id="g-svg-546"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5852,18 +5508,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-539"
+                id="g-svg-535"
                 fill="none"
                 transform="matrix(1,0,0,1,575,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-551"
+                    id="g-svg-547"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5872,18 +5528,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-540"
+                id="g-svg-536"
                 fill="none"
                 transform="matrix(1,0,0,1,575,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-552"
+                    id="g-svg-548"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5892,18 +5548,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-541"
+                id="g-svg-537"
                 fill="none"
                 transform="matrix(1,0,0,1,575,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-553"
+                    id="g-svg-549"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5912,18 +5568,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-542"
+                id="g-svg-538"
                 fill="none"
                 transform="matrix(1,0,0,1,575,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-554"
+                    id="g-svg-550"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5932,18 +5588,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-543"
+                id="g-svg-539"
                 fill="none"
                 transform="matrix(1,0,0,1,575,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-555"
+                    id="g-svg-551"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5952,18 +5608,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-544"
+                id="g-svg-540"
                 fill="none"
                 transform="matrix(1,0,0,1,575,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-556"
+                    id="g-svg-552"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5972,18 +5628,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-545"
+                id="g-svg-541"
                 fill="none"
                 transform="matrix(1,0,0,1,575,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-557"
+                    id="g-svg-553"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5992,18 +5648,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-546"
+                id="g-svg-542"
                 fill="none"
                 transform="matrix(1,0,0,1,575,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-558"
+                    id="g-svg-554"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6012,21 +5668,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-559"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-555" fill="none" class="axis-label-group">
               <g
-                id="g-svg-560"
+                id="g-svg-556"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,560,50)"
+                transform="matrix(1,0,0,1,560,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-572"
+                    id="g-svg-568"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6045,14 +5696,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-561"
+                id="g-svg-557"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,560,83.333336)"
+                transform="matrix(1,0,0,1,560,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-573"
+                    id="g-svg-569"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6071,14 +5722,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-562"
+                id="g-svg-558"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,560,116.666664)"
+                transform="matrix(1,0,0,1,560,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-574"
+                    id="g-svg-570"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6097,14 +5748,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-563"
+                id="g-svg-559"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,560,150)"
+                transform="matrix(1,0,0,1,560,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-575"
+                    id="g-svg-571"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6123,14 +5774,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-564"
+                id="g-svg-560"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,560,183.333328)"
+                transform="matrix(1,0,0,1,560,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-576"
+                    id="g-svg-572"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6149,14 +5800,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-565"
+                id="g-svg-561"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,560,216.666672)"
+                transform="matrix(1,0,0,1,560,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-577"
+                    id="g-svg-573"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6175,14 +5826,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-566"
+                id="g-svg-562"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,560,250)"
+                transform="matrix(1,0,0,1,560,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-578"
+                    id="g-svg-574"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6201,14 +5852,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-567"
+                id="g-svg-563"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,560,283.333344)"
+                transform="matrix(1,0,0,1,560,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-579"
+                    id="g-svg-575"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6227,14 +5878,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-568"
+                id="g-svg-564"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,560,316.666656)"
+                transform="matrix(1,0,0,1,560,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-580"
+                    id="g-svg-576"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6253,14 +5904,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-569"
+                id="g-svg-565"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,560,350)"
+                transform="matrix(1,0,0,1,560,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-581"
+                    id="g-svg-577"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6279,14 +5930,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-570"
+                id="g-svg-566"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,560,383.333344)"
+                transform="matrix(1,0,0,1,560,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-582"
+                    id="g-svg-578"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6305,14 +5956,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-571"
+                id="g-svg-567"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,560,416.666656)"
+                transform="matrix(1,0,0,1,560,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-583"
+                    id="g-svg-579"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6332,228 +5983,187 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-584"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-580" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-2138" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-585"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-586"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-587"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,650,50)">
+        <g id="g-svg-2138" fill="none">
+          <g id="g-svg-581" fill="none" class="axis-grid-group">
+            <g id="g-svg-582" fill="none" class="axis-grid">
+              <g id="g-svg-583" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-589"
+                    id="g-svg-585"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,50 L 650,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,83.333336)">
+                <g>
                   <path
-                    id="g-svg-590"
+                    id="g-svg-586"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,83.33333333333333 L 650,83.33333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,116.666664)">
+                <g>
                   <path
-                    id="g-svg-591"
+                    id="g-svg-587"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,116.66666666666666 L 650,116.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,150)">
+                <g>
                   <path
-                    id="g-svg-592"
+                    id="g-svg-588"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,150 L 650,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,183.333328)">
+                <g>
                   <path
-                    id="g-svg-593"
+                    id="g-svg-589"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,183.33333333333331 L 650,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,216.666672)">
+                <g>
                   <path
-                    id="g-svg-594"
+                    id="g-svg-590"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,216.66666666666666 L 650,216.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,250)">
+                <g>
                   <path
-                    id="g-svg-595"
+                    id="g-svg-591"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,250 L 650,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,283.333344)">
+                <g>
                   <path
-                    id="g-svg-596"
+                    id="g-svg-592"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,283.3333333333333 L 650,283.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,316.666656)">
+                <g>
                   <path
-                    id="g-svg-597"
+                    id="g-svg-593"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,316.66666666666663 L 650,316.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,350)">
+                <g>
                   <path
-                    id="g-svg-598"
+                    id="g-svg-594"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,350 L 650,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,383.333344)">
+                <g>
                   <path
-                    id="g-svg-599"
+                    id="g-svg-595"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,383.3333333333333 L 650,383.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,416.666656)">
+                <g>
                   <path
-                    id="g-svg-600"
+                    id="g-svg-596"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,416.66666666666663 L 650,416.66666666666663"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-588"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-584" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-601"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-602"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,650,50)">
+          <g id="g-svg-597" fill="none" class="axis-main-group">
+            <g id="g-svg-598" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-603"
+                  id="g-svg-599"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="415"
+                  x1="650"
+                  y1="50"
+                  x2="650"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,415)">
+                <g transform="matrix(0,-0.500000,0.500000,0,650,465)">
                   <path
-                    id="g-svg-605"
+                    id="g-svg-601"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-606"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-602" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-607"
+                id="g-svg-603"
                 fill="none"
                 transform="matrix(1,0,0,1,650,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-619"
+                    id="g-svg-615"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6562,18 +6172,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-608"
+                id="g-svg-604"
                 fill="none"
                 transform="matrix(1,0,0,1,650,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-620"
+                    id="g-svg-616"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6582,18 +6192,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-609"
+                id="g-svg-605"
                 fill="none"
                 transform="matrix(1,0,0,1,650,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-621"
+                    id="g-svg-617"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6602,18 +6212,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-610"
+                id="g-svg-606"
                 fill="none"
                 transform="matrix(1,0,0,1,650,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-622"
+                    id="g-svg-618"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6622,18 +6232,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-611"
+                id="g-svg-607"
                 fill="none"
                 transform="matrix(1,0,0,1,650,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-623"
+                    id="g-svg-619"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6642,18 +6252,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-612"
+                id="g-svg-608"
                 fill="none"
                 transform="matrix(1,0,0,1,650,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-624"
+                    id="g-svg-620"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6662,18 +6272,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-613"
+                id="g-svg-609"
                 fill="none"
                 transform="matrix(1,0,0,1,650,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-625"
+                    id="g-svg-621"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6682,18 +6292,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-614"
+                id="g-svg-610"
                 fill="none"
                 transform="matrix(1,0,0,1,650,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-626"
+                    id="g-svg-622"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6702,18 +6312,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-615"
+                id="g-svg-611"
                 fill="none"
                 transform="matrix(1,0,0,1,650,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-627"
+                    id="g-svg-623"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6722,18 +6332,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-616"
+                id="g-svg-612"
                 fill="none"
                 transform="matrix(1,0,0,1,650,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-628"
+                    id="g-svg-624"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6742,18 +6352,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-617"
+                id="g-svg-613"
                 fill="none"
                 transform="matrix(1,0,0,1,650,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-629"
+                    id="g-svg-625"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6762,18 +6372,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-618"
+                id="g-svg-614"
                 fill="none"
                 transform="matrix(1,0,0,1,650,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-630"
+                    id="g-svg-626"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6782,21 +6392,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-631"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-627" fill="none" class="axis-label-group">
               <g
-                id="g-svg-632"
+                id="g-svg-628"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,635,50)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-644"
+                    id="g-svg-640"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6815,14 +6420,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-633"
+                id="g-svg-629"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,635,83.333336)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-645"
+                    id="g-svg-641"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6841,14 +6446,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-634"
+                id="g-svg-630"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,635,116.666664)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-646"
+                    id="g-svg-642"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6867,14 +6472,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-635"
+                id="g-svg-631"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,635,150)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-647"
+                    id="g-svg-643"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6893,14 +6498,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-636"
+                id="g-svg-632"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,635,183.333328)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-648"
+                    id="g-svg-644"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6919,14 +6524,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-637"
+                id="g-svg-633"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,635,216.666672)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-649"
+                    id="g-svg-645"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6945,14 +6550,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-638"
+                id="g-svg-634"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,635,250)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-650"
+                    id="g-svg-646"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6971,14 +6576,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-639"
+                id="g-svg-635"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,635,283.333344)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-651"
+                    id="g-svg-647"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6997,14 +6602,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-640"
+                id="g-svg-636"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,635,316.666656)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-652"
+                    id="g-svg-648"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7023,14 +6628,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-641"
+                id="g-svg-637"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,635,350)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-653"
+                    id="g-svg-649"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7049,14 +6654,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-642"
+                id="g-svg-638"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,635,383.333344)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-654"
+                    id="g-svg-650"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7075,14 +6680,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-643"
+                id="g-svg-639"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,635,416.666656)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-655"
+                    id="g-svg-651"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7102,228 +6707,187 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-656"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-652" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-2139" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-657"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-658"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-659"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,700,50)">
+        <g id="g-svg-2139" fill="none">
+          <g id="g-svg-653" fill="none" class="axis-grid-group">
+            <g id="g-svg-654" fill="none" class="axis-grid">
+              <g id="g-svg-655" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-661"
+                    id="g-svg-657"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,50 L 700,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,83.333336)">
+                <g>
                   <path
-                    id="g-svg-662"
+                    id="g-svg-658"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,83.33333333333333 L 700,83.33333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,116.666664)">
+                <g>
                   <path
-                    id="g-svg-663"
+                    id="g-svg-659"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,116.66666666666666 L 700,116.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,150)">
+                <g>
                   <path
-                    id="g-svg-664"
+                    id="g-svg-660"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,150 L 700,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,183.333328)">
+                <g>
                   <path
-                    id="g-svg-665"
+                    id="g-svg-661"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,183.33333333333331 L 700,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,216.666672)">
+                <g>
                   <path
-                    id="g-svg-666"
+                    id="g-svg-662"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,216.66666666666666 L 700,216.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,250)">
+                <g>
                   <path
-                    id="g-svg-667"
+                    id="g-svg-663"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,250 L 700,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,283.333344)">
+                <g>
                   <path
-                    id="g-svg-668"
+                    id="g-svg-664"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,283.3333333333333 L 700,283.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,316.666656)">
+                <g>
                   <path
-                    id="g-svg-669"
+                    id="g-svg-665"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,316.66666666666663 L 700,316.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,350)">
+                <g>
                   <path
-                    id="g-svg-670"
+                    id="g-svg-666"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,350 L 700,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,383.333344)">
+                <g>
                   <path
-                    id="g-svg-671"
+                    id="g-svg-667"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,383.3333333333333 L 700,383.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,416.666656)">
+                <g>
                   <path
-                    id="g-svg-672"
+                    id="g-svg-668"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,416.66666666666663 L 700,416.66666666666663"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-660"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-656" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-673"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-674"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,700,50)">
+          <g id="g-svg-669" fill="none" class="axis-main-group">
+            <g id="g-svg-670" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-675"
+                  id="g-svg-671"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="415"
+                  x1="700"
+                  y1="50"
+                  x2="700"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,415)">
+                <g transform="matrix(0,-0.500000,0.500000,0,700,465)">
                   <path
-                    id="g-svg-677"
+                    id="g-svg-673"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-678"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-674" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-679"
+                id="g-svg-675"
                 fill="none"
                 transform="matrix(1,0,0,1,700,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-691"
+                    id="g-svg-687"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -7332,18 +6896,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-680"
+                id="g-svg-676"
                 fill="none"
                 transform="matrix(1,0,0,1,700,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-692"
+                    id="g-svg-688"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -7352,18 +6916,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-681"
+                id="g-svg-677"
                 fill="none"
                 transform="matrix(1,0,0,1,700,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-693"
+                    id="g-svg-689"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -7372,18 +6936,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-682"
+                id="g-svg-678"
                 fill="none"
                 transform="matrix(1,0,0,1,700,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-694"
+                    id="g-svg-690"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -7392,18 +6956,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-683"
+                id="g-svg-679"
                 fill="none"
                 transform="matrix(1,0,0,1,700,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-695"
+                    id="g-svg-691"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -7412,18 +6976,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-684"
+                id="g-svg-680"
                 fill="none"
                 transform="matrix(1,0,0,1,700,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-696"
+                    id="g-svg-692"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -7432,18 +6996,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-685"
+                id="g-svg-681"
                 fill="none"
                 transform="matrix(1,0,0,1,700,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-697"
+                    id="g-svg-693"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -7452,18 +7016,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-686"
+                id="g-svg-682"
                 fill="none"
                 transform="matrix(1,0,0,1,700,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-698"
+                    id="g-svg-694"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -7472,18 +7036,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-687"
+                id="g-svg-683"
                 fill="none"
                 transform="matrix(1,0,0,1,700,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-699"
+                    id="g-svg-695"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -7492,18 +7056,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-688"
+                id="g-svg-684"
                 fill="none"
                 transform="matrix(1,0,0,1,700,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-700"
+                    id="g-svg-696"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -7512,18 +7076,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-689"
+                id="g-svg-685"
                 fill="none"
                 transform="matrix(1,0,0,1,700,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-701"
+                    id="g-svg-697"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -7532,18 +7096,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-690"
+                id="g-svg-686"
                 fill="none"
                 transform="matrix(1,0,0,1,700,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-702"
+                    id="g-svg-698"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -7552,21 +7116,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-703"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-699" fill="none" class="axis-label-group">
               <g
-                id="g-svg-704"
+                id="g-svg-700"
                 fill="none"
-                transform="matrix(0,-1,1,0,685,50)"
+                transform="matrix(1,0,0,1,685,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-716"
+                    id="g-svg-712"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7586,14 +7145,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-705"
+                id="g-svg-701"
                 fill="none"
-                transform="matrix(0,-1,1,0,685,83.333336)"
+                transform="matrix(1,0,0,1,685,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-717"
+                    id="g-svg-713"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7613,14 +7172,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-706"
+                id="g-svg-702"
                 fill="none"
-                transform="matrix(0,-1,1,0,685,116.666664)"
+                transform="matrix(1,0,0,1,685,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-718"
+                    id="g-svg-714"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7640,14 +7199,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-707"
+                id="g-svg-703"
                 fill="none"
-                transform="matrix(0,-1,1,0,685,150)"
+                transform="matrix(1,0,0,1,685,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-719"
+                    id="g-svg-715"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7667,14 +7226,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-708"
+                id="g-svg-704"
                 fill="none"
-                transform="matrix(0,-1,1,0,685,183.333328)"
+                transform="matrix(1,0,0,1,685,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-720"
+                    id="g-svg-716"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7694,14 +7253,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-709"
+                id="g-svg-705"
                 fill="none"
-                transform="matrix(0,-1,1,0,685,216.666672)"
+                transform="matrix(1,0,0,1,685,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-721"
+                    id="g-svg-717"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7721,14 +7280,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-710"
+                id="g-svg-706"
                 fill="none"
-                transform="matrix(0,-1,1,0,685,250)"
+                transform="matrix(1,0,0,1,685,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-722"
+                    id="g-svg-718"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7748,14 +7307,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-711"
+                id="g-svg-707"
                 fill="none"
-                transform="matrix(0,-1,1,0,685,283.333344)"
+                transform="matrix(1,0,0,1,685,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-723"
+                    id="g-svg-719"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7775,14 +7334,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-712"
+                id="g-svg-708"
                 fill="none"
-                transform="matrix(0,-1,1,0,685,316.666656)"
+                transform="matrix(1,0,0,1,685,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-724"
+                    id="g-svg-720"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7802,14 +7361,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-713"
+                id="g-svg-709"
                 fill="none"
-                transform="matrix(0,-1,1,0,685,350)"
+                transform="matrix(1,0,0,1,685,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-725"
+                    id="g-svg-721"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7829,14 +7388,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-714"
+                id="g-svg-710"
                 fill="none"
-                transform="matrix(0,-1,1,0,685,383.333344)"
+                transform="matrix(1,0,0,1,685,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-726"
+                    id="g-svg-722"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7856,14 +7415,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-715"
+                id="g-svg-711"
                 fill="none"
-                transform="matrix(0,-1,1,0,685,416.666656)"
+                transform="matrix(1,0,0,1,685,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-727"
+                    id="g-svg-723"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7884,228 +7443,187 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-728"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-724" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-2140" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-729"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-730"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-731"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,750,50)">
+        <g id="g-svg-2140" fill="none">
+          <g id="g-svg-725" fill="none" class="axis-grid-group">
+            <g id="g-svg-726" fill="none" class="axis-grid">
+              <g id="g-svg-727" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-733"
+                    id="g-svg-729"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,50 L 750,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,83.333336)">
+                <g>
                   <path
-                    id="g-svg-734"
+                    id="g-svg-730"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,83.33333333333333 L 750,83.33333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,116.666664)">
+                <g>
                   <path
-                    id="g-svg-735"
+                    id="g-svg-731"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,116.66666666666666 L 750,116.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,150)">
+                <g>
                   <path
-                    id="g-svg-736"
+                    id="g-svg-732"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,150 L 750,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,183.333328)">
+                <g>
                   <path
-                    id="g-svg-737"
+                    id="g-svg-733"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,183.33333333333331 L 750,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,216.666672)">
+                <g>
                   <path
-                    id="g-svg-738"
+                    id="g-svg-734"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,216.66666666666666 L 750,216.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,250)">
+                <g>
                   <path
-                    id="g-svg-739"
+                    id="g-svg-735"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,250 L 750,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,283.333344)">
+                <g>
                   <path
-                    id="g-svg-740"
+                    id="g-svg-736"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,283.3333333333333 L 750,283.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,316.666656)">
+                <g>
                   <path
-                    id="g-svg-741"
+                    id="g-svg-737"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,316.66666666666663 L 750,316.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,350)">
+                <g>
                   <path
-                    id="g-svg-742"
+                    id="g-svg-738"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,350 L 750,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,383.333344)">
+                <g>
                   <path
-                    id="g-svg-743"
+                    id="g-svg-739"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,383.3333333333333 L 750,383.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,416.666656)">
+                <g>
                   <path
-                    id="g-svg-744"
+                    id="g-svg-740"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,416.66666666666663 L 750,416.66666666666663"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-732"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-728" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-745"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-746"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,750,50)">
+          <g id="g-svg-741" fill="none" class="axis-main-group">
+            <g id="g-svg-742" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-747"
+                  id="g-svg-743"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="415"
+                  x1="750"
+                  y1="50"
+                  x2="750"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,415)">
+                <g transform="matrix(0,-0.500000,0.500000,0,750,465)">
                   <path
-                    id="g-svg-749"
+                    id="g-svg-745"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-750"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-746" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-751"
+                id="g-svg-747"
                 fill="none"
                 transform="matrix(1,0,0,1,750,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-763"
+                    id="g-svg-759"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -8114,18 +7632,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-752"
+                id="g-svg-748"
                 fill="none"
                 transform="matrix(1,0,0,1,750,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-764"
+                    id="g-svg-760"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -8134,18 +7652,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-753"
+                id="g-svg-749"
                 fill="none"
                 transform="matrix(1,0,0,1,750,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-765"
+                    id="g-svg-761"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -8154,18 +7672,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-754"
+                id="g-svg-750"
                 fill="none"
                 transform="matrix(1,0,0,1,750,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-766"
+                    id="g-svg-762"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -8174,18 +7692,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-755"
+                id="g-svg-751"
                 fill="none"
                 transform="matrix(1,0,0,1,750,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-767"
+                    id="g-svg-763"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -8194,18 +7712,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-756"
+                id="g-svg-752"
                 fill="none"
                 transform="matrix(1,0,0,1,750,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-768"
+                    id="g-svg-764"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -8214,18 +7732,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-757"
+                id="g-svg-753"
                 fill="none"
                 transform="matrix(1,0,0,1,750,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-769"
+                    id="g-svg-765"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -8234,18 +7752,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-758"
+                id="g-svg-754"
                 fill="none"
                 transform="matrix(1,0,0,1,750,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-770"
+                    id="g-svg-766"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -8254,18 +7772,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-759"
+                id="g-svg-755"
                 fill="none"
                 transform="matrix(1,0,0,1,750,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-771"
+                    id="g-svg-767"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -8274,18 +7792,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-760"
+                id="g-svg-756"
                 fill="none"
                 transform="matrix(1,0,0,1,750,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-772"
+                    id="g-svg-768"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -8294,18 +7812,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-761"
+                id="g-svg-757"
                 fill="none"
                 transform="matrix(1,0,0,1,750,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-773"
+                    id="g-svg-769"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -8314,18 +7832,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-762"
+                id="g-svg-758"
                 fill="none"
                 transform="matrix(1,0,0,1,750,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-774"
+                    id="g-svg-770"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -8334,21 +7852,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-775"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-771" fill="none" class="axis-label-group">
               <g
-                id="g-svg-776"
+                id="g-svg-772"
                 fill="none"
-                transform="matrix(0,-1,1,0,735,50)"
+                transform="matrix(1,0,0,1,735,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-788"
+                    id="g-svg-784"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -8367,14 +7880,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-777"
+                id="g-svg-773"
                 fill="none"
-                transform="matrix(0,-1,1,0,735,83.333336)"
+                transform="matrix(1,0,0,1,735,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-789"
+                    id="g-svg-785"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -8393,14 +7906,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-778"
+                id="g-svg-774"
                 fill="none"
-                transform="matrix(0,-1,1,0,735,116.666664)"
+                transform="matrix(1,0,0,1,735,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-790"
+                    id="g-svg-786"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -8419,14 +7932,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-779"
+                id="g-svg-775"
                 fill="none"
-                transform="matrix(0,-1,1,0,735,150)"
+                transform="matrix(1,0,0,1,735,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-791"
+                    id="g-svg-787"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -8445,14 +7958,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-780"
+                id="g-svg-776"
                 fill="none"
-                transform="matrix(0,-1,1,0,735,183.333328)"
+                transform="matrix(1,0,0,1,735,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-792"
+                    id="g-svg-788"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -8471,14 +7984,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-781"
+                id="g-svg-777"
                 fill="none"
-                transform="matrix(0,-1,1,0,735,216.666672)"
+                transform="matrix(1,0,0,1,735,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-793"
+                    id="g-svg-789"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -8497,14 +8010,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-782"
+                id="g-svg-778"
                 fill="none"
-                transform="matrix(0,-1,1,0,735,250)"
+                transform="matrix(1,0,0,1,735,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-794"
+                    id="g-svg-790"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -8523,14 +8036,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-783"
+                id="g-svg-779"
                 fill="none"
-                transform="matrix(0,-1,1,0,735,283.333344)"
+                transform="matrix(1,0,0,1,735,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-795"
+                    id="g-svg-791"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -8549,14 +8062,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-784"
+                id="g-svg-780"
                 fill="none"
-                transform="matrix(0,-1,1,0,735,316.666656)"
+                transform="matrix(1,0,0,1,735,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-796"
+                    id="g-svg-792"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -8575,14 +8088,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-785"
+                id="g-svg-781"
                 fill="none"
-                transform="matrix(0,-1,1,0,735,350)"
+                transform="matrix(1,0,0,1,735,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-797"
+                    id="g-svg-793"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -8601,14 +8114,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-786"
+                id="g-svg-782"
                 fill="none"
-                transform="matrix(0,-1,1,0,735,383.333344)"
+                transform="matrix(1,0,0,1,735,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-798"
+                    id="g-svg-794"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -8627,14 +8140,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-787"
+                id="g-svg-783"
                 fill="none"
-                transform="matrix(0,-1,1,0,735,416.666656)"
+                transform="matrix(1,0,0,1,735,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-799"
+                    id="g-svg-795"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -8654,224 +8167,183 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-800"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-796" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-2141" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-801"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-802"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-803"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,800,450)">
+        <g id="g-svg-2141" fill="none">
+          <g id="g-svg-797" fill="none" class="axis-grid-group">
+            <g id="g-svg-798" fill="none" class="axis-grid">
+              <g id="g-svg-799" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-805"
+                    id="g-svg-801"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,450 L 800,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,416.666656)">
+                <g>
                   <path
-                    id="g-svg-806"
+                    id="g-svg-802"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,416.6666666666667 L 800,416.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,383.333344)">
+                <g>
                   <path
-                    id="g-svg-807"
+                    id="g-svg-803"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,383.33333333333337 L 800,383.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,350)">
+                <g>
                   <path
-                    id="g-svg-808"
+                    id="g-svg-804"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,350 L 800,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,316.666656)">
+                <g>
                   <path
-                    id="g-svg-809"
+                    id="g-svg-805"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,316.6666666666667 L 800,316.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,283.333344)">
+                <g>
                   <path
-                    id="g-svg-810"
+                    id="g-svg-806"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,283.33333333333337 L 800,283.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,250)">
+                <g>
                   <path
-                    id="g-svg-811"
+                    id="g-svg-807"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,250 L 800,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,216.666672)">
+                <g>
                   <path
-                    id="g-svg-812"
+                    id="g-svg-808"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,216.66666666666669 L 800,216.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,183.333328)">
+                <g>
                   <path
-                    id="g-svg-813"
+                    id="g-svg-809"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,183.33333333333337 L 800,183.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,150)">
+                <g>
                   <path
-                    id="g-svg-814"
+                    id="g-svg-810"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,150 L 800,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,116.666664)">
+                <g>
                   <path
-                    id="g-svg-815"
+                    id="g-svg-811"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,116.66666666666669 L 800,116.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,83.333336)">
+                <g>
                   <path
-                    id="g-svg-816"
+                    id="g-svg-812"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,83.33333333333337 L 800,83.33333333333337"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-804"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-800" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-817"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-818"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,800,50)">
+          <g id="g-svg-813" fill="none" class="axis-main-group">
+            <g id="g-svg-814" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-819"
+                  id="g-svg-815"
                   fill="none"
-                  x1="0"
-                  y1="400"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="800"
+                  y1="450"
+                  x2="800"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,800,35)">
                   <path
-                    id="g-svg-821"
+                    id="g-svg-817"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-822"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-818" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-823"
+                id="g-svg-819"
                 fill="none"
                 transform="matrix(1,0,0,1,800,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-835"
+                    id="g-svg-831"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -8884,14 +8356,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-824"
+                id="g-svg-820"
                 fill="none"
                 transform="matrix(1,0,0,1,800,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-836"
+                    id="g-svg-832"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -8904,14 +8376,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-825"
+                id="g-svg-821"
                 fill="none"
                 transform="matrix(1,0,0,1,800,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-837"
+                    id="g-svg-833"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -8924,14 +8396,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-826"
+                id="g-svg-822"
                 fill="none"
                 transform="matrix(1,0,0,1,800,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-838"
+                    id="g-svg-834"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -8944,14 +8416,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-827"
+                id="g-svg-823"
                 fill="none"
                 transform="matrix(1,0,0,1,800,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-839"
+                    id="g-svg-835"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -8964,14 +8436,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-828"
+                id="g-svg-824"
                 fill="none"
                 transform="matrix(1,0,0,1,800,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-840"
+                    id="g-svg-836"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -8984,14 +8456,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-829"
+                id="g-svg-825"
                 fill="none"
                 transform="matrix(1,0,0,1,800,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-841"
+                    id="g-svg-837"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9004,14 +8476,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-830"
+                id="g-svg-826"
                 fill="none"
                 transform="matrix(1,0,0,1,800,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-842"
+                    id="g-svg-838"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9024,14 +8496,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-831"
+                id="g-svg-827"
                 fill="none"
                 transform="matrix(1,0,0,1,800,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-843"
+                    id="g-svg-839"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9044,14 +8516,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-832"
+                id="g-svg-828"
                 fill="none"
                 transform="matrix(1,0,0,1,800,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-844"
+                    id="g-svg-840"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9064,14 +8536,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-833"
+                id="g-svg-829"
                 fill="none"
                 transform="matrix(1,0,0,1,800,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-845"
+                    id="g-svg-841"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9084,14 +8556,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-834"
+                id="g-svg-830"
                 fill="none"
                 transform="matrix(1,0,0,1,800,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-846"
+                    id="g-svg-842"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9104,21 +8576,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-847"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-843" fill="none" class="axis-label-group">
               <g
-                id="g-svg-848"
+                id="g-svg-844"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,815,450)"
+                transform="matrix(1,0,0,1,815,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-860"
+                    id="g-svg-856"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9137,14 +8604,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-849"
+                id="g-svg-845"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,815,416.666656)"
+                transform="matrix(1,0,0,1,815,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-861"
+                    id="g-svg-857"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9163,14 +8630,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-850"
+                id="g-svg-846"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,815,383.333344)"
+                transform="matrix(1,0,0,1,815,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-862"
+                    id="g-svg-858"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9189,14 +8656,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-851"
+                id="g-svg-847"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,815,350)"
+                transform="matrix(1,0,0,1,815,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-863"
+                    id="g-svg-859"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9215,14 +8682,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-852"
+                id="g-svg-848"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,815,316.666656)"
+                transform="matrix(1,0,0,1,815,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-864"
+                    id="g-svg-860"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9241,14 +8708,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-853"
+                id="g-svg-849"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,815,283.333344)"
+                transform="matrix(1,0,0,1,815,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-865"
+                    id="g-svg-861"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9267,14 +8734,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-854"
+                id="g-svg-850"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,815,250)"
+                transform="matrix(1,0,0,1,815,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-866"
+                    id="g-svg-862"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9293,14 +8760,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-855"
+                id="g-svg-851"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,815,216.666672)"
+                transform="matrix(1,0,0,1,815,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-867"
+                    id="g-svg-863"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9319,14 +8786,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-856"
+                id="g-svg-852"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,815,183.333328)"
+                transform="matrix(1,0,0,1,815,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-868"
+                    id="g-svg-864"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9345,14 +8812,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-857"
+                id="g-svg-853"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,815,150)"
+                transform="matrix(1,0,0,1,815,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-869"
+                    id="g-svg-865"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9371,14 +8838,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-858"
+                id="g-svg-854"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,815,116.666664)"
+                transform="matrix(1,0,0,1,815,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-870"
+                    id="g-svg-866"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9397,14 +8864,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-859"
+                id="g-svg-855"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,815,83.333336)"
+                transform="matrix(1,0,0,1,815,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-871"
+                    id="g-svg-867"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9424,224 +8891,183 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-872"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-868" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-2142" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-873"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-874"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-875"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,850,450)">
+        <g id="g-svg-2142" fill="none">
+          <g id="g-svg-869" fill="none" class="axis-grid-group">
+            <g id="g-svg-870" fill="none" class="axis-grid">
+              <g id="g-svg-871" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-877"
+                    id="g-svg-873"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,450 L 850,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,416.666656)">
+                <g>
                   <path
-                    id="g-svg-878"
+                    id="g-svg-874"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,416.6666666666667 L 850,416.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,383.333344)">
+                <g>
                   <path
-                    id="g-svg-879"
+                    id="g-svg-875"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,383.33333333333337 L 850,383.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,350)">
+                <g>
                   <path
-                    id="g-svg-880"
+                    id="g-svg-876"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,350 L 850,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,316.666656)">
+                <g>
                   <path
-                    id="g-svg-881"
+                    id="g-svg-877"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,316.6666666666667 L 850,316.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,283.333344)">
+                <g>
                   <path
-                    id="g-svg-882"
+                    id="g-svg-878"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,283.33333333333337 L 850,283.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,250)">
+                <g>
                   <path
-                    id="g-svg-883"
+                    id="g-svg-879"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,250 L 850,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,216.666672)">
+                <g>
                   <path
-                    id="g-svg-884"
+                    id="g-svg-880"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,216.66666666666669 L 850,216.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,183.333328)">
+                <g>
                   <path
-                    id="g-svg-885"
+                    id="g-svg-881"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,183.33333333333337 L 850,183.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,150)">
+                <g>
                   <path
-                    id="g-svg-886"
+                    id="g-svg-882"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,150 L 850,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,116.666664)">
+                <g>
                   <path
-                    id="g-svg-887"
+                    id="g-svg-883"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,116.66666666666669 L 850,116.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,83.333336)">
+                <g>
                   <path
-                    id="g-svg-888"
+                    id="g-svg-884"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,83.33333333333337 L 850,83.33333333333337"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-876"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-872" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-889"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-890"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,850,50)">
+          <g id="g-svg-885" fill="none" class="axis-main-group">
+            <g id="g-svg-886" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-891"
+                  id="g-svg-887"
                   fill="none"
-                  x1="0"
-                  y1="400"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="850"
+                  y1="450"
+                  x2="850"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,850,35)">
                   <path
-                    id="g-svg-893"
+                    id="g-svg-889"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-894"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-890" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-895"
+                id="g-svg-891"
                 fill="none"
                 transform="matrix(1,0,0,1,850,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-907"
+                    id="g-svg-903"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9654,14 +9080,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-896"
+                id="g-svg-892"
                 fill="none"
                 transform="matrix(1,0,0,1,850,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-908"
+                    id="g-svg-904"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9674,14 +9100,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-897"
+                id="g-svg-893"
                 fill="none"
                 transform="matrix(1,0,0,1,850,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-909"
+                    id="g-svg-905"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9694,14 +9120,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-898"
+                id="g-svg-894"
                 fill="none"
                 transform="matrix(1,0,0,1,850,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-910"
+                    id="g-svg-906"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9714,14 +9140,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-899"
+                id="g-svg-895"
                 fill="none"
                 transform="matrix(1,0,0,1,850,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-911"
+                    id="g-svg-907"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9734,14 +9160,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-900"
+                id="g-svg-896"
                 fill="none"
                 transform="matrix(1,0,0,1,850,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-912"
+                    id="g-svg-908"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9754,14 +9180,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-901"
+                id="g-svg-897"
                 fill="none"
                 transform="matrix(1,0,0,1,850,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-913"
+                    id="g-svg-909"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9774,14 +9200,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-902"
+                id="g-svg-898"
                 fill="none"
                 transform="matrix(1,0,0,1,850,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-914"
+                    id="g-svg-910"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9794,14 +9220,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-903"
+                id="g-svg-899"
                 fill="none"
                 transform="matrix(1,0,0,1,850,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-915"
+                    id="g-svg-911"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9814,14 +9240,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-904"
+                id="g-svg-900"
                 fill="none"
                 transform="matrix(1,0,0,1,850,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-916"
+                    id="g-svg-912"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9834,14 +9260,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-905"
+                id="g-svg-901"
                 fill="none"
                 transform="matrix(1,0,0,1,850,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-917"
+                    id="g-svg-913"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9854,14 +9280,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-906"
+                id="g-svg-902"
                 fill="none"
                 transform="matrix(1,0,0,1,850,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-918"
+                    id="g-svg-914"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -9874,21 +9300,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-919"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-915" fill="none" class="axis-label-group">
               <g
-                id="g-svg-920"
+                id="g-svg-916"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,865,450)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-932"
+                    id="g-svg-928"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9907,14 +9328,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-921"
+                id="g-svg-917"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,865,416.666656)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-933"
+                    id="g-svg-929"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9933,14 +9354,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-922"
+                id="g-svg-918"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,865,383.333344)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-934"
+                    id="g-svg-930"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9959,14 +9380,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-923"
+                id="g-svg-919"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,865,350)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-935"
+                    id="g-svg-931"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -9985,14 +9406,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-924"
+                id="g-svg-920"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,865,316.666656)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-936"
+                    id="g-svg-932"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10011,14 +9432,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-925"
+                id="g-svg-921"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,865,283.333344)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-937"
+                    id="g-svg-933"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10037,14 +9458,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-926"
+                id="g-svg-922"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,865,250)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-938"
+                    id="g-svg-934"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10063,14 +9484,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-927"
+                id="g-svg-923"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,865,216.666672)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-939"
+                    id="g-svg-935"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10089,14 +9510,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-928"
+                id="g-svg-924"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,865,183.333328)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-940"
+                    id="g-svg-936"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10115,14 +9536,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-929"
+                id="g-svg-925"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,865,150)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-941"
+                    id="g-svg-937"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10141,14 +9562,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-930"
+                id="g-svg-926"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,865,116.666664)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-942"
+                    id="g-svg-938"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10167,14 +9588,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-931"
+                id="g-svg-927"
                 fill="none"
-                transform="matrix(0.965926,0.258819,-0.258819,0.965926,865,83.333336)"
+                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-943"
+                    id="g-svg-939"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10194,224 +9615,183 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-944"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-940" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-2143" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-945"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-946"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-947"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,925,450)">
+        <g id="g-svg-2143" fill="none">
+          <g id="g-svg-941" fill="none" class="axis-grid-group">
+            <g id="g-svg-942" fill="none" class="axis-grid">
+              <g id="g-svg-943" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-949"
+                    id="g-svg-945"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 925,450 L 925,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,925,416.666656)">
+                <g>
                   <path
-                    id="g-svg-950"
+                    id="g-svg-946"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 925,416.6666666666667 L 925,416.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,925,383.333344)">
+                <g>
                   <path
-                    id="g-svg-951"
+                    id="g-svg-947"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 925,383.33333333333337 L 925,383.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,925,350)">
+                <g>
                   <path
-                    id="g-svg-952"
+                    id="g-svg-948"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 925,350 L 925,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,925,316.666656)">
+                <g>
                   <path
-                    id="g-svg-953"
+                    id="g-svg-949"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 925,316.6666666666667 L 925,316.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,925,283.333344)">
+                <g>
                   <path
-                    id="g-svg-954"
+                    id="g-svg-950"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 925,283.33333333333337 L 925,283.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,925,250)">
+                <g>
                   <path
-                    id="g-svg-955"
+                    id="g-svg-951"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 925,250 L 925,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,925,216.666672)">
+                <g>
                   <path
-                    id="g-svg-956"
+                    id="g-svg-952"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 925,216.66666666666669 L 925,216.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,925,183.333328)">
+                <g>
                   <path
-                    id="g-svg-957"
+                    id="g-svg-953"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 925,183.33333333333337 L 925,183.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,925,150)">
+                <g>
                   <path
-                    id="g-svg-958"
+                    id="g-svg-954"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 925,150 L 925,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,925,116.666664)">
+                <g>
                   <path
-                    id="g-svg-959"
+                    id="g-svg-955"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 925,116.66666666666669 L 925,116.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,925,83.333336)">
+                <g>
                   <path
-                    id="g-svg-960"
+                    id="g-svg-956"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 925,83.33333333333337 L 925,83.33333333333337"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-948"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-944" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-961"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-962"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,925,50)">
+          <g id="g-svg-957" fill="none" class="axis-main-group">
+            <g id="g-svg-958" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-963"
+                  id="g-svg-959"
                   fill="none"
-                  x1="0"
-                  y1="400"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="925"
+                  y1="450"
+                  x2="925"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,925,35)">
                   <path
-                    id="g-svg-965"
+                    id="g-svg-961"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-966"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-962" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-967"
+                id="g-svg-963"
                 fill="none"
                 transform="matrix(1,0,0,1,925,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-979"
+                    id="g-svg-975"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -10424,14 +9804,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-968"
+                id="g-svg-964"
                 fill="none"
                 transform="matrix(1,0,0,1,925,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-980"
+                    id="g-svg-976"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -10444,14 +9824,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-969"
+                id="g-svg-965"
                 fill="none"
                 transform="matrix(1,0,0,1,925,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-981"
+                    id="g-svg-977"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -10464,14 +9844,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-970"
+                id="g-svg-966"
                 fill="none"
                 transform="matrix(1,0,0,1,925,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-982"
+                    id="g-svg-978"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -10484,14 +9864,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-971"
+                id="g-svg-967"
                 fill="none"
                 transform="matrix(1,0,0,1,925,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-983"
+                    id="g-svg-979"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -10504,14 +9884,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-972"
+                id="g-svg-968"
                 fill="none"
                 transform="matrix(1,0,0,1,925,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-984"
+                    id="g-svg-980"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -10524,14 +9904,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-973"
+                id="g-svg-969"
                 fill="none"
                 transform="matrix(1,0,0,1,925,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-985"
+                    id="g-svg-981"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -10544,14 +9924,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-974"
+                id="g-svg-970"
                 fill="none"
                 transform="matrix(1,0,0,1,925,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-986"
+                    id="g-svg-982"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -10564,14 +9944,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-975"
+                id="g-svg-971"
                 fill="none"
                 transform="matrix(1,0,0,1,925,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-987"
+                    id="g-svg-983"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -10584,14 +9964,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-976"
+                id="g-svg-972"
                 fill="none"
                 transform="matrix(1,0,0,1,925,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-988"
+                    id="g-svg-984"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -10604,14 +9984,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-977"
+                id="g-svg-973"
                 fill="none"
                 transform="matrix(1,0,0,1,925,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-989"
+                    id="g-svg-985"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -10624,14 +10004,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-978"
+                id="g-svg-974"
                 fill="none"
                 transform="matrix(1,0,0,1,925,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-990"
+                    id="g-svg-986"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -10644,21 +10024,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-991"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-987" fill="none" class="axis-label-group">
               <g
-                id="g-svg-992"
+                id="g-svg-988"
                 fill="none"
-                transform="matrix(0,-1,1,0,940,450)"
+                transform="matrix(1,0,0,1,940,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1004"
+                    id="g-svg-1000"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10678,14 +10053,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-993"
+                id="g-svg-989"
                 fill="none"
-                transform="matrix(0,-1,1,0,940,416.666656)"
+                transform="matrix(1,0,0,1,940,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1005"
+                    id="g-svg-1001"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10705,14 +10080,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-994"
+                id="g-svg-990"
                 fill="none"
-                transform="matrix(0,-1,1,0,940,383.333344)"
+                transform="matrix(1,0,0,1,940,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1006"
+                    id="g-svg-1002"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10732,14 +10107,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-995"
+                id="g-svg-991"
                 fill="none"
-                transform="matrix(0,-1,1,0,940,350)"
+                transform="matrix(1,0,0,1,940,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1007"
+                    id="g-svg-1003"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10759,14 +10134,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-996"
+                id="g-svg-992"
                 fill="none"
-                transform="matrix(0,-1,1,0,940,316.666656)"
+                transform="matrix(1,0,0,1,940,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1008"
+                    id="g-svg-1004"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10786,14 +10161,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-997"
+                id="g-svg-993"
                 fill="none"
-                transform="matrix(0,-1,1,0,940,283.333344)"
+                transform="matrix(1,0,0,1,940,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1009"
+                    id="g-svg-1005"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10813,14 +10188,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-998"
+                id="g-svg-994"
                 fill="none"
-                transform="matrix(0,-1,1,0,940,250)"
+                transform="matrix(1,0,0,1,940,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1010"
+                    id="g-svg-1006"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10840,14 +10215,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-999"
+                id="g-svg-995"
                 fill="none"
-                transform="matrix(0,-1,1,0,940,216.666672)"
+                transform="matrix(1,0,0,1,940,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1011"
+                    id="g-svg-1007"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10867,14 +10242,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1000"
+                id="g-svg-996"
                 fill="none"
-                transform="matrix(0,-1,1,0,940,183.333328)"
+                transform="matrix(1,0,0,1,940,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1012"
+                    id="g-svg-1008"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10894,14 +10269,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1001"
+                id="g-svg-997"
                 fill="none"
-                transform="matrix(0,-1,1,0,940,150)"
+                transform="matrix(1,0,0,1,940,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1013"
+                    id="g-svg-1009"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10921,14 +10296,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1002"
+                id="g-svg-998"
                 fill="none"
-                transform="matrix(0,-1,1,0,940,116.666664)"
+                transform="matrix(1,0,0,1,940,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1014"
+                    id="g-svg-1010"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10948,14 +10323,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1003"
+                id="g-svg-999"
                 fill="none"
-                transform="matrix(0,-1,1,0,940,83.333336)"
+                transform="matrix(1,0,0,1,940,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1015"
+                    id="g-svg-1011"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -10976,224 +10351,183 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-1016"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-1012" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-2144" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1017"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-1018"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-1019"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,975,450)">
+        <g id="g-svg-2144" fill="none">
+          <g id="g-svg-1013" fill="none" class="axis-grid-group">
+            <g id="g-svg-1014" fill="none" class="axis-grid">
+              <g id="g-svg-1015" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-1021"
+                    id="g-svg-1017"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 975,450 L 975,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,975,416.666656)">
+                <g>
                   <path
-                    id="g-svg-1022"
+                    id="g-svg-1018"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 975,416.6666666666667 L 975,416.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,975,383.333344)">
+                <g>
                   <path
-                    id="g-svg-1023"
+                    id="g-svg-1019"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 975,383.33333333333337 L 975,383.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,975,350)">
+                <g>
                   <path
-                    id="g-svg-1024"
+                    id="g-svg-1020"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 975,350 L 975,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,975,316.666656)">
+                <g>
                   <path
-                    id="g-svg-1025"
+                    id="g-svg-1021"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 975,316.6666666666667 L 975,316.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,975,283.333344)">
+                <g>
                   <path
-                    id="g-svg-1026"
+                    id="g-svg-1022"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 975,283.33333333333337 L 975,283.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,975,250)">
+                <g>
                   <path
-                    id="g-svg-1027"
+                    id="g-svg-1023"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 975,250 L 975,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,975,216.666672)">
+                <g>
                   <path
-                    id="g-svg-1028"
+                    id="g-svg-1024"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 975,216.66666666666669 L 975,216.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,975,183.333328)">
+                <g>
                   <path
-                    id="g-svg-1029"
+                    id="g-svg-1025"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 975,183.33333333333337 L 975,183.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,975,150)">
+                <g>
                   <path
-                    id="g-svg-1030"
+                    id="g-svg-1026"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 975,150 L 975,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,975,116.666664)">
+                <g>
                   <path
-                    id="g-svg-1031"
+                    id="g-svg-1027"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 975,116.66666666666669 L 975,116.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,975,83.333336)">
+                <g>
                   <path
-                    id="g-svg-1032"
+                    id="g-svg-1028"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 975,83.33333333333337 L 975,83.33333333333337"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-1020"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-1016" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-1033"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-1034"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,975,50)">
+          <g id="g-svg-1029" fill="none" class="axis-main-group">
+            <g id="g-svg-1030" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-1035"
+                  id="g-svg-1031"
                   fill="none"
-                  x1="0"
-                  y1="400"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="975"
+                  y1="450"
+                  x2="975"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,975,35)">
                   <path
-                    id="g-svg-1037"
+                    id="g-svg-1033"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1038"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-1034" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-1039"
+                id="g-svg-1035"
                 fill="none"
                 transform="matrix(1,0,0,1,975,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-1051"
+                    id="g-svg-1047"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -11206,14 +10540,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1040"
+                id="g-svg-1036"
                 fill="none"
                 transform="matrix(1,0,0,1,975,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-1052"
+                    id="g-svg-1048"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -11226,14 +10560,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1041"
+                id="g-svg-1037"
                 fill="none"
                 transform="matrix(1,0,0,1,975,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-1053"
+                    id="g-svg-1049"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -11246,14 +10580,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1042"
+                id="g-svg-1038"
                 fill="none"
                 transform="matrix(1,0,0,1,975,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-1054"
+                    id="g-svg-1050"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -11266,14 +10600,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1043"
+                id="g-svg-1039"
                 fill="none"
                 transform="matrix(1,0,0,1,975,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-1055"
+                    id="g-svg-1051"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -11286,14 +10620,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1044"
+                id="g-svg-1040"
                 fill="none"
                 transform="matrix(1,0,0,1,975,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-1056"
+                    id="g-svg-1052"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -11306,14 +10640,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1045"
+                id="g-svg-1041"
                 fill="none"
                 transform="matrix(1,0,0,1,975,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-1057"
+                    id="g-svg-1053"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -11326,14 +10660,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1046"
+                id="g-svg-1042"
                 fill="none"
                 transform="matrix(1,0,0,1,975,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-1058"
+                    id="g-svg-1054"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -11346,14 +10680,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1047"
+                id="g-svg-1043"
                 fill="none"
                 transform="matrix(1,0,0,1,975,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-1059"
+                    id="g-svg-1055"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -11366,14 +10700,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1048"
+                id="g-svg-1044"
                 fill="none"
                 transform="matrix(1,0,0,1,975,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-1060"
+                    id="g-svg-1056"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -11386,14 +10720,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1049"
+                id="g-svg-1045"
                 fill="none"
                 transform="matrix(1,0,0,1,975,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-1061"
+                    id="g-svg-1057"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -11406,14 +10740,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1050"
+                id="g-svg-1046"
                 fill="none"
                 transform="matrix(1,0,0,1,975,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-1062"
+                    id="g-svg-1058"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -11426,21 +10760,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1063"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-1059" fill="none" class="axis-label-group">
               <g
-                id="g-svg-1064"
+                id="g-svg-1060"
                 fill="none"
-                transform="matrix(0,-1,1,0,990,450)"
+                transform="matrix(1,0,0,1,990,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1076"
+                    id="g-svg-1072"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -11459,14 +10788,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1065"
+                id="g-svg-1061"
                 fill="none"
-                transform="matrix(0,-1,1,0,990,416.666656)"
+                transform="matrix(1,0,0,1,990,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1077"
+                    id="g-svg-1073"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -11485,14 +10814,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1066"
+                id="g-svg-1062"
                 fill="none"
-                transform="matrix(0,-1,1,0,990,383.333344)"
+                transform="matrix(1,0,0,1,990,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1078"
+                    id="g-svg-1074"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -11511,14 +10840,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1067"
+                id="g-svg-1063"
                 fill="none"
-                transform="matrix(0,-1,1,0,990,350)"
+                transform="matrix(1,0,0,1,990,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1079"
+                    id="g-svg-1075"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -11537,14 +10866,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1068"
+                id="g-svg-1064"
                 fill="none"
-                transform="matrix(0,-1,1,0,990,316.666656)"
+                transform="matrix(1,0,0,1,990,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1080"
+                    id="g-svg-1076"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -11563,14 +10892,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1069"
+                id="g-svg-1065"
                 fill="none"
-                transform="matrix(0,-1,1,0,990,283.333344)"
+                transform="matrix(1,0,0,1,990,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1081"
+                    id="g-svg-1077"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -11589,14 +10918,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1070"
+                id="g-svg-1066"
                 fill="none"
-                transform="matrix(0,-1,1,0,990,250)"
+                transform="matrix(1,0,0,1,990,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1082"
+                    id="g-svg-1078"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -11615,14 +10944,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1071"
+                id="g-svg-1067"
                 fill="none"
-                transform="matrix(0,-1,1,0,990,216.666672)"
+                transform="matrix(1,0,0,1,990,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1083"
+                    id="g-svg-1079"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -11641,14 +10970,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1072"
+                id="g-svg-1068"
                 fill="none"
-                transform="matrix(0,-1,1,0,990,183.333328)"
+                transform="matrix(1,0,0,1,990,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1084"
+                    id="g-svg-1080"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -11667,14 +10996,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1073"
+                id="g-svg-1069"
                 fill="none"
-                transform="matrix(0,-1,1,0,990,150)"
+                transform="matrix(1,0,0,1,990,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1085"
+                    id="g-svg-1081"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -11693,14 +11022,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1074"
+                id="g-svg-1070"
                 fill="none"
-                transform="matrix(0,-1,1,0,990,116.666664)"
+                transform="matrix(1,0,0,1,990,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1086"
+                    id="g-svg-1082"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -11719,14 +11048,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-1075"
+                id="g-svg-1071"
                 fill="none"
-                transform="matrix(0,-1,1,0,990,83.333336)"
+                transform="matrix(1,0,0,1,990,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
-                    id="g-svg-1087"
+                    id="g-svg-1083"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -11746,12 +11075,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-1088"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-1084" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelOverlap2.svg b/__tests__/integration/snapshots/AxisLinearLabelOverlap2.svg
index f7b47e415..182fea885 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelOverlap2.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelOverlap2.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-225"
-        fill="none"
-        width="550"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-226" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-225" fill="none" width="550" height="150">
+        <g id="g-svg-226" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,50 L 87.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,50 L 125,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,50 L 162.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,50 L 200,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,50 L 237.49999999999997,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,50 L 275,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,50 L 312.49999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,50 L 350,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,50 L 387.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,50 L 424.99999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,67 +142,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,50 L 462.5,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
@@ -243,7 +201,7 @@
                 transform="matrix(1,0,0,1,87.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
@@ -263,7 +221,7 @@
                 transform="matrix(1,0,0,1,125,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -283,7 +241,7 @@
                 transform="matrix(1,0,0,1,162.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -303,7 +261,7 @@
                 transform="matrix(1,0,0,1,200,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -323,7 +281,7 @@
                 transform="matrix(1,0,0,1,237.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -343,7 +301,7 @@
                 transform="matrix(1,0,0,1,275,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
@@ -363,7 +321,7 @@
                 transform="matrix(1,0,0,1,312.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
@@ -383,7 +341,7 @@
                 transform="matrix(1,0,0,1,350,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
@@ -403,7 +361,7 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -423,7 +381,7 @@
                 transform="matrix(1,0,0,1,425,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -443,7 +401,7 @@
                 transform="matrix(1,0,0,1,462.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(0,-1,1,0,50,65)"
+                transform="matrix(0.965926,0.258819,-0.258819,0.965926,50,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -483,7 +436,7 @@
                     font-variant="normal"
                     font-weight="normal"
                     stroke-width="1"
-                    text-anchor="end"
+                    text-anchor="left"
                     class="axis-label-item"
                   >
                     ABCDEF
@@ -493,10 +446,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(0,-1,1,0,87.500000,65)"
+                transform="matrix(0.965926,0.258819,-0.258819,0.965926,87.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -509,7 +462,7 @@
                     font-variant="normal"
                     font-weight="normal"
                     stroke-width="1"
-                    text-anchor="end"
+                    text-anchor="left"
                     class="axis-label-item"
                   >
                     ABCDEF
@@ -519,10 +472,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(0,-1,1,0,125,65)"
+                transform="matrix(0.965926,0.258819,-0.258819,0.965926,125,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -535,7 +488,7 @@
                     font-variant="normal"
                     font-weight="normal"
                     stroke-width="1"
-                    text-anchor="end"
+                    text-anchor="left"
                     class="axis-label-item"
                   >
                     ABCDEF
@@ -545,10 +498,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(0,-1,1,0,162.500000,65)"
+                transform="matrix(0.965926,0.258819,-0.258819,0.965926,162.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -561,7 +514,7 @@
                     font-variant="normal"
                     font-weight="normal"
                     stroke-width="1"
-                    text-anchor="end"
+                    text-anchor="left"
                     class="axis-label-item"
                   >
                     ABCDEF
@@ -571,10 +524,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(0,-1,1,0,200,65)"
+                transform="matrix(0.965926,0.258819,-0.258819,0.965926,200,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -587,7 +540,7 @@
                     font-variant="normal"
                     font-weight="normal"
                     stroke-width="1"
-                    text-anchor="end"
+                    text-anchor="left"
                     class="axis-label-item"
                   >
                     ABCDEF
@@ -597,10 +550,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(0,-1,1,0,237.500000,65)"
+                transform="matrix(0.965926,0.258819,-0.258819,0.965926,237.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -613,7 +566,7 @@
                     font-variant="normal"
                     font-weight="normal"
                     stroke-width="1"
-                    text-anchor="end"
+                    text-anchor="left"
                     class="axis-label-item"
                   >
                     ABCDEF
@@ -623,10 +576,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(0,-1,1,0,275,65)"
+                transform="matrix(0.965926,0.258819,-0.258819,0.965926,275,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -639,7 +592,7 @@
                     font-variant="normal"
                     font-weight="normal"
                     stroke-width="1"
-                    text-anchor="end"
+                    text-anchor="left"
                     class="axis-label-item"
                   >
                     ABCDEF
@@ -649,10 +602,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(0,-1,1,0,312.500000,65)"
+                transform="matrix(0.965926,0.258819,-0.258819,0.965926,312.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -665,7 +618,7 @@
                     font-variant="normal"
                     font-weight="normal"
                     stroke-width="1"
-                    text-anchor="end"
+                    text-anchor="left"
                     class="axis-label-item"
                   >
                     ABCDEF
@@ -675,10 +628,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(0,-1,1,0,350,65)"
+                transform="matrix(0.965926,0.258819,-0.258819,0.965926,350,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -691,7 +644,7 @@
                     font-variant="normal"
                     font-weight="normal"
                     stroke-width="1"
-                    text-anchor="end"
+                    text-anchor="left"
                     class="axis-label-item"
                   >
                     ABCDEF
@@ -701,10 +654,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(0,-1,1,0,387.500000,65)"
+                transform="matrix(0.965926,0.258819,-0.258819,0.965926,387.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -717,7 +670,7 @@
                     font-variant="normal"
                     font-weight="normal"
                     stroke-width="1"
-                    text-anchor="end"
+                    text-anchor="left"
                     class="axis-label-item"
                   >
                     ABCDEF
@@ -727,10 +680,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(0,-1,1,0,425,65)"
+                transform="matrix(0.965926,0.258819,-0.258819,0.965926,425,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -743,7 +696,7 @@
                     font-variant="normal"
                     font-weight="normal"
                     stroke-width="1"
-                    text-anchor="end"
+                    text-anchor="left"
                     class="axis-label-item"
                   >
                     ABCDEF
@@ -753,10 +706,10 @@
               <g
                 id="g-svg-59"
                 fill="none"
-                transform="matrix(0,-1,1,0,462.500000,65)"
+                transform="matrix(0.965926,0.258819,-0.258819,0.965926,462.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -769,7 +722,7 @@
                     font-variant="normal"
                     font-weight="normal"
                     stroke-width="1"
-                    text-anchor="end"
+                    text-anchor="left"
                     class="axis-label-item"
                   >
                     ABCDEF
@@ -781,10 +734,10 @@
           <g
             id="g-svg-72"
             fill="none"
-            transform="matrix(1,0,0,1,-3.060001,136.240005)"
+            transform="matrix(1,0,0,1,18.111853,79.476418)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-73"
                 fill="rgba(0,0,0,1)"
diff --git a/__tests__/integration/snapshots/AxisLinearLabelOverlapCrossSize.svg b/__tests__/integration/snapshots/AxisLinearLabelOverlapCrossSize.svg
index f4c6de40e..d653ecd69 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelOverlapCrossSize.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelOverlapCrossSize.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-113"
-        fill="none"
-        width="550"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-114" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-113" fill="none" width="550" height="150">
+        <g id="g-svg-114" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,72.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 72.5,50 L 72.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,95,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 95,50 L 95,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,117.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 117.50000000000001,50 L 117.50000000000001,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,140,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 140,50 L 140,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,50 L 162.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,185,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 185.00000000000003,50 L 185.00000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,207.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 207.50000000000003,50 L 207.50000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,50 L 230,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,50 L 252.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,50 L 275,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,297.500000,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 297.5,50 L 297.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 320.00000000000006,50 L 320.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,342.500000,50)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 342.5,50 L 342.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,365,50)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 365.00000000000006,50 L 365.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,50 L 387.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,50)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 410,50 L 410,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,432.500000,50)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 432.50000000000006,50 L 432.50000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,455,50)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 455,50 L 455,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,477.500000,50)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,67 +230,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 477.50000000000006,50 L 477.50000000000006,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="2"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="2"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-30" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -331,7 +289,7 @@
                 transform="matrix(1,0,0,1,72.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -351,7 +309,7 @@
                 transform="matrix(1,0,0,1,95,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -371,7 +329,7 @@
                 transform="matrix(1,0,0,1,117.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -391,7 +349,7 @@
                 transform="matrix(1,0,0,1,140,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
@@ -411,7 +369,7 @@
                 transform="matrix(1,0,0,1,162.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
@@ -431,7 +389,7 @@
                 transform="matrix(1,0,0,1,185,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
@@ -451,7 +409,7 @@
                 transform="matrix(1,0,0,1,207.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
@@ -471,7 +429,7 @@
                 transform="matrix(1,0,0,1,230,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -491,7 +449,7 @@
                 transform="matrix(1,0,0,1,252.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -511,7 +469,7 @@
                 transform="matrix(1,0,0,1,275,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -531,7 +489,7 @@
                 transform="matrix(1,0,0,1,297.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -551,7 +509,7 @@
                 transform="matrix(1,0,0,1,320,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
@@ -571,7 +529,7 @@
                 transform="matrix(1,0,0,1,342.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
@@ -591,7 +549,7 @@
                 transform="matrix(1,0,0,1,365,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
@@ -611,7 +569,7 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
@@ -631,7 +589,7 @@
                 transform="matrix(1,0,0,1,410,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="none"
@@ -651,7 +609,7 @@
                 transform="matrix(1,0,0,1,432.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-68"
                     fill="none"
@@ -671,7 +629,7 @@
                 transform="matrix(1,0,0,1,455,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="none"
@@ -691,7 +649,7 @@
                 transform="matrix(1,0,0,1,477.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-70"
                     fill="none"
@@ -706,19 +664,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-71"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-label-group">
               <g
                 id="g-svg-72"
                 fill="none"
-                transform="matrix(0,1,-1,0,50,65)"
+                transform="matrix(1,0,0,1,50,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -734,17 +687,17 @@
                     text-anchor="left"
                     class="axis-label-item"
                   >
-                    蚂蚁技术...
+                    蚂...
                   </text>
                 </g>
               </g>
               <g
                 id="g-svg-73"
                 fill="none"
-                transform="matrix(0,1,-1,0,72.500000,65)"
+                transform="matrix(1,0,0,1,72.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -767,10 +720,10 @@
               <g
                 id="g-svg-74"
                 fill="none"
-                transform="matrix(0,1,-1,0,95,65)"
+                transform="matrix(1,0,0,1,95,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -793,10 +746,10 @@
               <g
                 id="g-svg-75"
                 fill="none"
-                transform="matrix(0,1,-1,0,117.500000,65)"
+                transform="matrix(1,0,0,1,117.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -819,10 +772,10 @@
               <g
                 id="g-svg-76"
                 fill="none"
-                transform="matrix(0,1,-1,0,140,65)"
+                transform="matrix(1,0,0,1,140,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -845,10 +798,10 @@
               <g
                 id="g-svg-77"
                 fill="none"
-                transform="matrix(0,1,-1,0,162.500000,65)"
+                transform="matrix(1,0,0,1,162.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -871,10 +824,10 @@
               <g
                 id="g-svg-78"
                 fill="none"
-                transform="matrix(0,1,-1,0,185,65)"
+                transform="matrix(1,0,0,1,185,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-98"
                     fill="rgba(0,0,0,1)"
@@ -897,10 +850,10 @@
               <g
                 id="g-svg-79"
                 fill="none"
-                transform="matrix(0,1,-1,0,207.500000,65)"
+                transform="matrix(1,0,0,1,207.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-99"
                     fill="rgba(0,0,0,1)"
@@ -923,10 +876,10 @@
               <g
                 id="g-svg-80"
                 fill="none"
-                transform="matrix(0,1,-1,0,230,65)"
+                transform="matrix(1,0,0,1,230,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-100"
                     fill="rgba(0,0,0,1)"
@@ -949,10 +902,10 @@
               <g
                 id="g-svg-81"
                 fill="none"
-                transform="matrix(0,1,-1,0,252.500000,65)"
+                transform="matrix(1,0,0,1,252.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-101"
                     fill="rgba(0,0,0,1)"
@@ -975,10 +928,10 @@
               <g
                 id="g-svg-82"
                 fill="none"
-                transform="matrix(0,1,-1,0,275,65)"
+                transform="matrix(1,0,0,1,275,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-102"
                     fill="rgba(0,0,0,1)"
@@ -1001,10 +954,10 @@
               <g
                 id="g-svg-83"
                 fill="none"
-                transform="matrix(0,1,-1,0,297.500000,65)"
+                transform="matrix(1,0,0,1,297.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-103"
                     fill="rgba(0,0,0,1)"
@@ -1027,10 +980,10 @@
               <g
                 id="g-svg-84"
                 fill="none"
-                transform="matrix(0,1,-1,0,320,65)"
+                transform="matrix(1,0,0,1,320,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-104"
                     fill="rgba(0,0,0,1)"
@@ -1053,10 +1006,10 @@
               <g
                 id="g-svg-85"
                 fill="none"
-                transform="matrix(0,1,-1,0,342.500000,65)"
+                transform="matrix(1,0,0,1,342.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-105"
                     fill="rgba(0,0,0,1)"
@@ -1079,10 +1032,10 @@
               <g
                 id="g-svg-86"
                 fill="none"
-                transform="matrix(0,1,-1,0,365,65)"
+                transform="matrix(1,0,0,1,365,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-106"
                     fill="rgba(0,0,0,1)"
@@ -1105,10 +1058,10 @@
               <g
                 id="g-svg-87"
                 fill="none"
-                transform="matrix(0,1,-1,0,387.500000,65)"
+                transform="matrix(1,0,0,1,387.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-107"
                     fill="rgba(0,0,0,1)"
@@ -1131,10 +1084,10 @@
               <g
                 id="g-svg-88"
                 fill="none"
-                transform="matrix(0,1,-1,0,410,65)"
+                transform="matrix(1,0,0,1,410,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-108"
                     fill="rgba(0,0,0,1)"
@@ -1150,17 +1103,17 @@
                     text-anchor="left"
                     class="axis-label-item"
                   >
-                    OceanBa...
+                    OceanBase
                   </text>
                 </g>
               </g>
               <g
                 id="g-svg-89"
                 fill="none"
-                transform="matrix(0,1,-1,0,432.500000,65)"
+                transform="matrix(1,0,0,1,432.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-109"
                     fill="rgba(0,0,0,1)"
@@ -1183,10 +1136,10 @@
               <g
                 id="g-svg-90"
                 fill="none"
-                transform="matrix(0,1,-1,0,455,65)"
+                transform="matrix(1,0,0,1,455,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-110"
                     fill="rgba(0,0,0,1)"
@@ -1209,10 +1162,10 @@
               <g
                 id="g-svg-91"
                 fill="none"
-                transform="matrix(0,1,-1,0,477.500000,65)"
+                transform="matrix(1,0,0,1,477.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-111"
                     fill="rgba(0,0,0,1)"
@@ -1234,12 +1187,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-112"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-112" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelOverlapCrossSizeVertical.svg b/__tests__/integration/snapshots/AxisLinearLabelOverlapCrossSizeVertical.svg
index 4764b13df..2b0b0aedd 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelOverlapCrossSizeVertical.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelOverlapCrossSizeVertical.svg
@@ -6,45 +6,17 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-113"
-        fill="none"
-        width="280"
-        height="550"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
-          <circle
-            id="g-svg-114"
-            fill="rgba(255,0,0,1)"
-            transform="translate(-5,-5)"
-            cx="5"
-            cy="5"
-            r="5"
-          />
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-113" fill="none" width="280" height="550">
+        <g>
+          <circle id="g-svg-114" fill="rgba(255,0,0,1)" r="5" />
         </g>
-        <g id="g-svg-115" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,100,500)">
+        <g id="g-svg-115" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -52,10 +24,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,500 L 100,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,477.500000)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -63,10 +35,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,477.5 L 100,477.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,455)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -74,10 +46,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,455 L 100,455"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,432.500000)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -85,10 +57,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,432.5 L 100,432.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,410)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -96,10 +68,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,410 L 100,410"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,387.500000)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -107,10 +79,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,387.5 L 100,387.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,365)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -118,10 +90,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,365 L 100,365"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,342.500000)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -129,10 +101,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,342.5 L 100,342.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,320)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -140,10 +112,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,320 L 100,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,297.500000)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -151,10 +123,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,297.5 L 100,297.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,275)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -162,10 +134,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,275 L 100,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,252.500000)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -173,10 +145,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,252.49999999999997 L 100,252.49999999999997"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,230)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -184,10 +156,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,229.99999999999994 L 100,229.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,207.500000)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -195,10 +167,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,207.5 L 100,207.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,185)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -206,10 +178,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,184.99999999999994 L 100,184.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,162.500000)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -217,10 +189,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,162.5 L 100,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,140)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -228,10 +200,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,140 L 100,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,117.500000)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -239,10 +211,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,117.49999999999994 L 100,117.49999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,95)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -250,10 +222,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,95 L 100,95"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,72.500000)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -261,67 +233,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,72.49999999999994 L 100,72.49999999999994"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,100,50)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
-                  x1="0"
-                  y1="450"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="100"
+                  y1="500"
+                  x2="100"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="2"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,100,35)">
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="2"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-30" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,100,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -341,7 +292,7 @@
                 transform="matrix(1,0,0,1,100,477.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -361,7 +312,7 @@
                 transform="matrix(1,0,0,1,100,455)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -381,7 +332,7 @@
                 transform="matrix(1,0,0,1,100,432.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -401,7 +352,7 @@
                 transform="matrix(1,0,0,1,100,410)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
@@ -421,7 +372,7 @@
                 transform="matrix(1,0,0,1,100,387.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
@@ -441,7 +392,7 @@
                 transform="matrix(1,0,0,1,100,365)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
@@ -461,7 +412,7 @@
                 transform="matrix(1,0,0,1,100,342.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
@@ -481,7 +432,7 @@
                 transform="matrix(1,0,0,1,100,320)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -501,7 +452,7 @@
                 transform="matrix(1,0,0,1,100,297.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -521,7 +472,7 @@
                 transform="matrix(1,0,0,1,100,275)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -541,7 +492,7 @@
                 transform="matrix(1,0,0,1,100,252.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -561,7 +512,7 @@
                 transform="matrix(1,0,0,1,100,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
@@ -581,7 +532,7 @@
                 transform="matrix(1,0,0,1,100,207.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
@@ -601,7 +552,7 @@
                 transform="matrix(1,0,0,1,100,185)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
@@ -621,7 +572,7 @@
                 transform="matrix(1,0,0,1,100,162.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
@@ -641,7 +592,7 @@
                 transform="matrix(1,0,0,1,100,140)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="none"
@@ -661,7 +612,7 @@
                 transform="matrix(1,0,0,1,100,117.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-68"
                     fill="none"
@@ -681,7 +632,7 @@
                 transform="matrix(1,0,0,1,100,95)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="none"
@@ -701,7 +652,7 @@
                 transform="matrix(1,0,0,1,100,72.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-70"
                     fill="none"
@@ -716,19 +667,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-71"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-label-group">
               <g
                 id="g-svg-72"
                 fill="none"
                 transform="matrix(1,0,0,1,90,500)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -754,7 +700,7 @@
                 transform="matrix(1,0,0,1,90,477.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -780,7 +726,7 @@
                 transform="matrix(1,0,0,1,90,455)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -806,7 +752,7 @@
                 transform="matrix(1,0,0,1,90,432.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -832,7 +778,7 @@
                 transform="matrix(1,0,0,1,90,410)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -858,7 +804,7 @@
                 transform="matrix(1,0,0,1,90,387.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -884,7 +830,7 @@
                 transform="matrix(1,0,0,1,90,365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-98"
                     fill="rgba(0,0,0,1)"
@@ -910,7 +856,7 @@
                 transform="matrix(1,0,0,1,90,342.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-99"
                     fill="rgba(0,0,0,1)"
@@ -936,7 +882,7 @@
                 transform="matrix(1,0,0,1,90,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-100"
                     fill="rgba(0,0,0,1)"
@@ -962,7 +908,7 @@
                 transform="matrix(1,0,0,1,90,297.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-101"
                     fill="rgba(0,0,0,1)"
@@ -988,7 +934,7 @@
                 transform="matrix(1,0,0,1,90,275)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-102"
                     fill="rgba(0,0,0,1)"
@@ -1014,7 +960,7 @@
                 transform="matrix(1,0,0,1,90,252.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-103"
                     fill="rgba(0,0,0,1)"
@@ -1040,7 +986,7 @@
                 transform="matrix(1,0,0,1,90,230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-104"
                     fill="rgba(0,0,0,1)"
@@ -1066,7 +1012,7 @@
                 transform="matrix(1,0,0,1,90,207.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-105"
                     fill="rgba(0,0,0,1)"
@@ -1092,7 +1038,7 @@
                 transform="matrix(1,0,0,1,90,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-106"
                     fill="rgba(0,0,0,1)"
@@ -1118,7 +1064,7 @@
                 transform="matrix(1,0,0,1,90,162.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-107"
                     fill="rgba(0,0,0,1)"
@@ -1144,7 +1090,7 @@
                 transform="matrix(1,0,0,1,90,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-108"
                     fill="rgba(0,0,0,1)"
@@ -1170,7 +1116,7 @@
                 transform="matrix(1,0,0,1,90,117.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-109"
                     fill="rgba(0,0,0,1)"
@@ -1196,7 +1142,7 @@
                 transform="matrix(1,0,0,1,90,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-110"
                     fill="rgba(0,0,0,1)"
@@ -1222,7 +1168,7 @@
                 transform="matrix(1,0,0,1,90,72.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-111"
                     fill="rgba(0,0,0,1)"
@@ -1244,33 +1190,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-112"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-112" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-116" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-113"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-114"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-115"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,250,50)">
+        <g id="g-svg-116" fill="none">
+          <g id="g-svg-113" fill="none" class="axis-grid-group">
+            <g id="g-svg-114" fill="none" class="axis-grid">
+              <g id="g-svg-115" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-117"
                     fill="none"
@@ -1278,10 +1204,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,50 L 250,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,72.500000)">
+                <g>
                   <path
                     id="g-svg-118"
                     fill="none"
@@ -1289,10 +1215,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,72.5 L 250,72.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,95)">
+                <g>
                   <path
                     id="g-svg-119"
                     fill="none"
@@ -1300,10 +1226,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,95 L 250,95"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,117.500000)">
+                <g>
                   <path
                     id="g-svg-120"
                     fill="none"
@@ -1311,10 +1237,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,117.50000000000001 L 250,117.50000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,140)">
+                <g>
                   <path
                     id="g-svg-121"
                     fill="none"
@@ -1322,10 +1248,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,140 L 250,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,162.500000)">
+                <g>
                   <path
                     id="g-svg-122"
                     fill="none"
@@ -1333,10 +1259,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,162.5 L 250,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,185)">
+                <g>
                   <path
                     id="g-svg-123"
                     fill="none"
@@ -1344,10 +1270,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,185.00000000000003 L 250,185.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,207.500000)">
+                <g>
                   <path
                     id="g-svg-124"
                     fill="none"
@@ -1355,10 +1281,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,207.50000000000003 L 250,207.50000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,230)">
+                <g>
                   <path
                     id="g-svg-125"
                     fill="none"
@@ -1366,10 +1292,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,230 L 250,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,252.500000)">
+                <g>
                   <path
                     id="g-svg-126"
                     fill="none"
@@ -1377,10 +1303,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,252.5 L 250,252.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,275)">
+                <g>
                   <path
                     id="g-svg-127"
                     fill="none"
@@ -1388,10 +1314,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,275 L 250,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,297.500000)">
+                <g>
                   <path
                     id="g-svg-128"
                     fill="none"
@@ -1399,10 +1325,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,297.5 L 250,297.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,320)">
+                <g>
                   <path
                     id="g-svg-129"
                     fill="none"
@@ -1410,10 +1336,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,320.00000000000006 L 250,320.00000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,342.500000)">
+                <g>
                   <path
                     id="g-svg-130"
                     fill="none"
@@ -1421,10 +1347,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,342.5 L 250,342.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,365)">
+                <g>
                   <path
                     id="g-svg-131"
                     fill="none"
@@ -1432,10 +1358,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,365.00000000000006 L 250,365.00000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,387.500000)">
+                <g>
                   <path
                     id="g-svg-132"
                     fill="none"
@@ -1443,10 +1369,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,387.5 L 250,387.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,410)">
+                <g>
                   <path
                     id="g-svg-133"
                     fill="none"
@@ -1454,10 +1380,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,410 L 250,410"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,432.500000)">
+                <g>
                   <path
                     id="g-svg-134"
                     fill="none"
@@ -1465,10 +1391,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,432.50000000000006 L 250,432.50000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,455)">
+                <g>
                   <path
                     id="g-svg-135"
                     fill="none"
@@ -1476,10 +1402,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,455 L 250,455"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,477.500000)">
+                <g>
                   <path
                     id="g-svg-136"
                     fill="none"
@@ -1487,73 +1413,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,477.50000000000006 L 250,477.50000000000006"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-116"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-116" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-137"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-138"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,250,50)">
+          <g id="g-svg-137" fill="none" class="axis-main-group">
+            <g id="g-svg-138" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-139"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="465"
+                  x1="250"
+                  y1="50"
+                  x2="250"
+                  y2="515"
                   class="axis-line axis-line"
                   stroke-width="2"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,465)">
+                <g transform="matrix(0,-0.500000,0.500000,0,250,515)">
                   <path
                     id="g-svg-141"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="2"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-142"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-142" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-143"
                 fill="none"
                 transform="matrix(1,0,0,1,250,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-163"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1567,13 +1472,13 @@
                 transform="matrix(1,0,0,1,250,72.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-164"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1587,13 +1492,13 @@
                 transform="matrix(1,0,0,1,250,95)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-165"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1607,13 +1512,13 @@
                 transform="matrix(1,0,0,1,250,117.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-166"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1627,13 +1532,13 @@
                 transform="matrix(1,0,0,1,250,140)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-167"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1647,13 +1552,13 @@
                 transform="matrix(1,0,0,1,250,162.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-168"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1667,13 +1572,13 @@
                 transform="matrix(1,0,0,1,250,185)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-169"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1687,13 +1592,13 @@
                 transform="matrix(1,0,0,1,250,207.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-170"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1707,13 +1612,13 @@
                 transform="matrix(1,0,0,1,250,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-171"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1727,13 +1632,13 @@
                 transform="matrix(1,0,0,1,250,252.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-172"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1747,13 +1652,13 @@
                 transform="matrix(1,0,0,1,250,275)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-173"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1767,13 +1672,13 @@
                 transform="matrix(1,0,0,1,250,297.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-174"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1787,13 +1692,13 @@
                 transform="matrix(1,0,0,1,250,320)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-175"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1807,13 +1712,13 @@
                 transform="matrix(1,0,0,1,250,342.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-176"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1827,13 +1732,13 @@
                 transform="matrix(1,0,0,1,250,365)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-177"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1847,13 +1752,13 @@
                 transform="matrix(1,0,0,1,250,387.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-178"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1867,13 +1772,13 @@
                 transform="matrix(1,0,0,1,250,410)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-179"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1887,13 +1792,13 @@
                 transform="matrix(1,0,0,1,250,432.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-180"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1907,13 +1812,13 @@
                 transform="matrix(1,0,0,1,250,455)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-181"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1927,13 +1832,13 @@
                 transform="matrix(1,0,0,1,250,477.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-182"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="2"
@@ -1942,19 +1847,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-183"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-183" fill="none" class="axis-label-group">
               <g
                 id="g-svg-184"
                 fill="none"
                 transform="matrix(1,0,0,1,235,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-204"
                     fill="rgba(0,0,0,1)"
@@ -1980,7 +1880,7 @@
                 transform="matrix(1,0,0,1,235,72.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-205"
                     fill="rgba(0,0,0,1)"
@@ -2006,7 +1906,7 @@
                 transform="matrix(1,0,0,1,235,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-206"
                     fill="rgba(0,0,0,1)"
@@ -2032,7 +1932,7 @@
                 transform="matrix(1,0,0,1,235,117.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-207"
                     fill="rgba(0,0,0,1)"
@@ -2058,7 +1958,7 @@
                 transform="matrix(1,0,0,1,235,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-208"
                     fill="rgba(0,0,0,1)"
@@ -2084,7 +1984,7 @@
                 transform="matrix(1,0,0,1,235,162.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-209"
                     fill="rgba(0,0,0,1)"
@@ -2110,7 +2010,7 @@
                 transform="matrix(1,0,0,1,235,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-210"
                     fill="rgba(0,0,0,1)"
@@ -2136,7 +2036,7 @@
                 transform="matrix(1,0,0,1,235,207.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-211"
                     fill="rgba(0,0,0,1)"
@@ -2162,7 +2062,7 @@
                 transform="matrix(1,0,0,1,235,230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-212"
                     fill="rgba(0,0,0,1)"
@@ -2188,7 +2088,7 @@
                 transform="matrix(1,0,0,1,235,252.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-213"
                     fill="rgba(0,0,0,1)"
@@ -2214,7 +2114,7 @@
                 transform="matrix(1,0,0,1,235,275)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-214"
                     fill="rgba(0,0,0,1)"
@@ -2240,7 +2140,7 @@
                 transform="matrix(1,0,0,1,235,297.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-215"
                     fill="rgba(0,0,0,1)"
@@ -2266,7 +2166,7 @@
                 transform="matrix(1,0,0,1,235,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-216"
                     fill="rgba(0,0,0,1)"
@@ -2292,7 +2192,7 @@
                 transform="matrix(1,0,0,1,235,342.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-217"
                     fill="rgba(0,0,0,1)"
@@ -2318,7 +2218,7 @@
                 transform="matrix(1,0,0,1,235,365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-218"
                     fill="rgba(0,0,0,1)"
@@ -2344,7 +2244,7 @@
                 transform="matrix(1,0,0,1,235,387.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-219"
                     fill="rgba(0,0,0,1)"
@@ -2370,7 +2270,7 @@
                 transform="matrix(1,0,0,1,235,410)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-220"
                     fill="rgba(0,0,0,1)"
@@ -2396,7 +2296,7 @@
                 transform="matrix(1,0,0,1,235,432.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-221"
                     fill="rgba(0,0,0,1)"
@@ -2422,7 +2322,7 @@
                 transform="matrix(1,0,0,1,235,455)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-222"
                     fill="rgba(0,0,0,1)"
@@ -2448,7 +2348,7 @@
                 transform="matrix(1,0,0,1,235,477.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-223"
                     fill="rgba(0,0,0,1)"
@@ -2470,12 +2370,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-224"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-224" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelOverlapMultiple.svg b/__tests__/integration/snapshots/AxisLinearLabelOverlapMultiple.svg
index 59a189ff6..ccd2a8090 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelOverlapMultiple.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelOverlapMultiple.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-75"
-        fill="none"
-        width="1000"
-        height="550"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-76" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-74" fill="none" width="1000" height="550">
+        <g id="g-svg-75" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,50 L 87.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,50 L 125,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,50 L 162.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,50 L 200,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,50 L 237.49999999999997,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,50 L 275,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,50 L 312.49999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,50 L 350,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,50 L 387.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,50 L 424.99999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,67 +142,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,50 L 462.5,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
@@ -243,7 +201,7 @@
                 transform="matrix(1,0,0,1,87.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
@@ -263,7 +221,7 @@
                 transform="matrix(1,0,0,1,125,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -283,7 +241,7 @@
                 transform="matrix(1,0,0,1,162.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -303,7 +261,7 @@
                 transform="matrix(1,0,0,1,200,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -323,7 +281,7 @@
                 transform="matrix(1,0,0,1,237.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -343,7 +301,7 @@
                 transform="matrix(1,0,0,1,275,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
@@ -363,7 +321,7 @@
                 transform="matrix(1,0,0,1,312.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
@@ -383,7 +341,7 @@
                 transform="matrix(1,0,0,1,350,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
@@ -403,7 +361,7 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -423,7 +381,7 @@
                 transform="matrix(1,0,0,1,425,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-45"
                     fill="none"
@@ -443,7 +401,7 @@
                 transform="matrix(1,0,0,1,462.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-46"
                     fill="none"
@@ -458,19 +416,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-47"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-47" fill="none" class="axis-label-group">
               <g
                 id="g-svg-48"
                 fill="none"
                 transform="matrix(1,0,0,1,50,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -497,7 +450,7 @@
                 transform="matrix(1,0,0,1,87.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -524,7 +477,7 @@
                 transform="matrix(1,0,0,1,125,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -551,7 +504,7 @@
                 transform="matrix(1,0,0,1,162.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -578,7 +531,7 @@
                 transform="matrix(1,0,0,1,200,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -605,7 +558,7 @@
                 transform="matrix(1,0,0,1,237.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -632,7 +585,7 @@
                 transform="matrix(1,0,0,1,275,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -659,7 +612,7 @@
                 transform="matrix(1,0,0,1,312.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -686,7 +639,7 @@
                 transform="matrix(1,0,0,1,350,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -713,7 +666,7 @@
                 transform="matrix(1,0,0,1,387.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -740,7 +693,7 @@
                 transform="matrix(1,0,0,1,425,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -767,7 +720,7 @@
                 transform="matrix(1,0,0,1,462.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -793,7 +746,7 @@
           <g
             id="g-svg-72"
             fill="none"
-            transform="matrix(1,0,0,1,-37.220001,111)"
+            transform="matrix(1,0,0,1,-16.440001,99.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,41.560001,0)">
@@ -817,26 +770,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-77" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-74"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-75"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-76"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,100)">
+        <g id="g-svg-76" fill="none">
+          <g id="g-svg-74" fill="none" class="axis-grid-group">
+            <g id="g-svg-75" fill="none" class="axis-grid">
+              <g id="g-svg-76" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-78"
                     fill="none"
@@ -844,10 +782,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,100 L 50,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,100)">
+                <g>
                   <path
                     id="g-svg-79"
                     fill="none"
@@ -855,10 +793,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,100 L 87.5,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,100)">
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
@@ -866,10 +804,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,100 L 125,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,100)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
@@ -877,10 +815,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,100 L 162.5,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,100)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
@@ -888,10 +826,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,100 L 200,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,100)">
+                <g>
                   <path
                     id="g-svg-83"
                     fill="none"
@@ -899,10 +837,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,100 L 237.49999999999997,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,100)">
+                <g>
                   <path
                     id="g-svg-84"
                     fill="none"
@@ -910,10 +848,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,100 L 275,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,100)">
+                <g>
                   <path
                     id="g-svg-85"
                     fill="none"
@@ -921,10 +859,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,100 L 312.49999999999994,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,100)">
+                <g>
                   <path
                     id="g-svg-86"
                     fill="none"
@@ -932,10 +870,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,100 L 350,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,100)">
+                <g>
                   <path
                     id="g-svg-87"
                     fill="none"
@@ -943,10 +881,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,100 L 387.5,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,100)">
+                <g>
                   <path
                     id="g-svg-88"
                     fill="none"
@@ -954,10 +892,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,100 L 424.99999999999994,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,100)">
+                <g>
                   <path
                     id="g-svg-89"
                     fill="none"
@@ -965,67 +903,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,100 L 462.5,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-77"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-77" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-90"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-91"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,100)">
+          <g id="g-svg-90" fill="none" class="axis-main-group">
+            <g id="g-svg-91" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-92"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="100"
+                  x2="515"
+                  y2="100"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,100)">
                   <path
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-95"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-95" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-96"
                 fill="none"
                 transform="matrix(1,0,0,1,50,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-108"
                     fill="none"
@@ -1045,7 +962,7 @@
                 transform="matrix(1,0,0,1,87.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-109"
                     fill="none"
@@ -1065,7 +982,7 @@
                 transform="matrix(1,0,0,1,125,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-110"
                     fill="none"
@@ -1085,7 +1002,7 @@
                 transform="matrix(1,0,0,1,162.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-111"
                     fill="none"
@@ -1105,7 +1022,7 @@
                 transform="matrix(1,0,0,1,200,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-112"
                     fill="none"
@@ -1125,7 +1042,7 @@
                 transform="matrix(1,0,0,1,237.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-113"
                     fill="none"
@@ -1145,7 +1062,7 @@
                 transform="matrix(1,0,0,1,275,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-114"
                     fill="none"
@@ -1165,7 +1082,7 @@
                 transform="matrix(1,0,0,1,312.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-115"
                     fill="none"
@@ -1185,7 +1102,7 @@
                 transform="matrix(1,0,0,1,350,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-116"
                     fill="none"
@@ -1205,7 +1122,7 @@
                 transform="matrix(1,0,0,1,387.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-117"
                     fill="none"
@@ -1225,7 +1142,7 @@
                 transform="matrix(1,0,0,1,425,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-118"
                     fill="none"
@@ -1245,7 +1162,7 @@
                 transform="matrix(1,0,0,1,462.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-119"
                     fill="none"
@@ -1260,19 +1177,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-120"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-120" fill="none" class="axis-label-group">
               <g
                 id="g-svg-121"
                 fill="none"
                 transform="matrix(1,0,0,1,50,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-133"
                     fill="rgba(0,0,0,1)"
@@ -1299,7 +1211,7 @@
                 transform="matrix(1,0,0,1,87.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-134"
                     fill="rgba(0,0,0,1)"
@@ -1326,7 +1238,7 @@
                 transform="matrix(1,0,0,1,125,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-135"
                     fill="rgba(0,0,0,1)"
@@ -1353,7 +1265,7 @@
                 transform="matrix(1,0,0,1,162.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-136"
                     fill="rgba(0,0,0,1)"
@@ -1380,7 +1292,7 @@
                 transform="matrix(1,0,0,1,200,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-137"
                     fill="rgba(0,0,0,1)"
@@ -1407,7 +1319,7 @@
                 transform="matrix(1,0,0,1,237.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-138"
                     fill="rgba(0,0,0,1)"
@@ -1434,7 +1346,7 @@
                 transform="matrix(1,0,0,1,275,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-139"
                     fill="rgba(0,0,0,1)"
@@ -1461,7 +1373,7 @@
                 transform="matrix(1,0,0,1,312.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-140"
                     fill="rgba(0,0,0,1)"
@@ -1488,7 +1400,7 @@
                 transform="matrix(1,0,0,1,350,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-141"
                     fill="rgba(0,0,0,1)"
@@ -1515,7 +1427,7 @@
                 transform="matrix(1,0,0,1,387.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-142"
                     fill="rgba(0,0,0,1)"
@@ -1542,7 +1454,7 @@
                 transform="matrix(1,0,0,1,425,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-143"
                     fill="rgba(0,0,0,1)"
@@ -1569,7 +1481,7 @@
                 transform="matrix(1,0,0,1,462.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-144"
                     fill="rgba(0,0,0,1)"
@@ -1595,7 +1507,7 @@
           <g
             id="g-svg-145"
             fill="none"
-            transform="matrix(1,0,0,1,-90.139999,161)"
+            transform="matrix(1,0,0,1,-42.900002,149.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,94.480003,0)">
@@ -1619,26 +1531,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-78" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-147"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-148"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-149"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,200)">
+        <g id="g-svg-77" fill="none">
+          <g id="g-svg-147" fill="none" class="axis-grid-group">
+            <g id="g-svg-148" fill="none" class="axis-grid">
+              <g id="g-svg-149" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-151"
                     fill="none"
@@ -1646,10 +1543,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,200 L 50,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,200)">
+                <g>
                   <path
                     id="g-svg-152"
                     fill="none"
@@ -1657,10 +1554,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,200 L 87.5,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,200)">
+                <g>
                   <path
                     id="g-svg-153"
                     fill="none"
@@ -1668,10 +1565,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,200 L 125,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,200)">
+                <g>
                   <path
                     id="g-svg-154"
                     fill="none"
@@ -1679,10 +1576,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,200 L 162.5,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,200)">
+                <g>
                   <path
                     id="g-svg-155"
                     fill="none"
@@ -1690,10 +1587,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,200)">
+                <g>
                   <path
                     id="g-svg-156"
                     fill="none"
@@ -1701,10 +1598,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,200 L 237.49999999999997,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,200)">
+                <g>
                   <path
                     id="g-svg-157"
                     fill="none"
@@ -1712,10 +1609,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,200 L 275,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,200)">
+                <g>
                   <path
                     id="g-svg-158"
                     fill="none"
@@ -1723,10 +1620,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,200 L 312.49999999999994,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,200)">
+                <g>
                   <path
                     id="g-svg-159"
                     fill="none"
@@ -1734,10 +1631,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,200 L 350,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,200)">
+                <g>
                   <path
                     id="g-svg-160"
                     fill="none"
@@ -1745,10 +1642,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,200 L 387.5,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,200)">
+                <g>
                   <path
                     id="g-svg-161"
                     fill="none"
@@ -1756,10 +1653,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,200 L 424.99999999999994,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,200)">
+                <g>
                   <path
                     id="g-svg-162"
                     fill="none"
@@ -1767,67 +1664,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,200 L 462.5,200"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-150"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-150" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-163"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-164"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,200)">
+          <g id="g-svg-163" fill="none" class="axis-main-group">
+            <g id="g-svg-164" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-165"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="200"
+                  x2="515"
+                  y2="200"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,200)">
                   <path
                     id="g-svg-167"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-168"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-168" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-169"
                 fill="none"
                 transform="matrix(1,0,0,1,50,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-181"
                     fill="none"
@@ -1847,7 +1723,7 @@
                 transform="matrix(1,0,0,1,87.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-182"
                     fill="none"
@@ -1867,7 +1743,7 @@
                 transform="matrix(1,0,0,1,125,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-183"
                     fill="none"
@@ -1887,7 +1763,7 @@
                 transform="matrix(1,0,0,1,162.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-184"
                     fill="none"
@@ -1907,7 +1783,7 @@
                 transform="matrix(1,0,0,1,200,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-185"
                     fill="none"
@@ -1927,7 +1803,7 @@
                 transform="matrix(1,0,0,1,237.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-186"
                     fill="none"
@@ -1947,7 +1823,7 @@
                 transform="matrix(1,0,0,1,275,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-187"
                     fill="none"
@@ -1967,7 +1843,7 @@
                 transform="matrix(1,0,0,1,312.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-188"
                     fill="none"
@@ -1987,7 +1863,7 @@
                 transform="matrix(1,0,0,1,350,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-189"
                     fill="none"
@@ -2007,7 +1883,7 @@
                 transform="matrix(1,0,0,1,387.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-190"
                     fill="none"
@@ -2027,7 +1903,7 @@
                 transform="matrix(1,0,0,1,425,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-191"
                     fill="none"
@@ -2047,7 +1923,7 @@
                 transform="matrix(1,0,0,1,462.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-192"
                     fill="none"
@@ -2062,19 +1938,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-193"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-193" fill="none" class="axis-label-group">
               <g
                 id="g-svg-194"
                 fill="none"
                 transform="matrix(1,0,0,1,50,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-206"
                     fill="rgba(0,0,0,1)"
@@ -2101,7 +1972,7 @@
                 transform="matrix(1,0,0,1,87.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-207"
                     fill="rgba(0,0,0,1)"
@@ -2128,7 +1999,7 @@
                 transform="matrix(1,0,0,1,125,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-208"
                     fill="rgba(0,0,0,1)"
@@ -2155,7 +2026,7 @@
                 transform="matrix(1,0,0,1,162.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-209"
                     fill="rgba(0,0,0,1)"
@@ -2182,7 +2053,7 @@
                 transform="matrix(1,0,0,1,200,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-210"
                     fill="rgba(0,0,0,1)"
@@ -2209,7 +2080,7 @@
                 transform="matrix(1,0,0,1,237.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-211"
                     fill="rgba(0,0,0,1)"
@@ -2236,7 +2107,7 @@
                 transform="matrix(1,0,0,1,275,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-212"
                     fill="rgba(0,0,0,1)"
@@ -2263,7 +2134,7 @@
                 transform="matrix(1,0,0,1,312.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-213"
                     fill="rgba(0,0,0,1)"
@@ -2290,7 +2161,7 @@
                 transform="matrix(1,0,0,1,350,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-214"
                     fill="rgba(0,0,0,1)"
@@ -2317,7 +2188,7 @@
                 transform="matrix(1,0,0,1,387.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-215"
                     fill="rgba(0,0,0,1)"
@@ -2344,7 +2215,7 @@
                 transform="matrix(1,0,0,1,425,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-216"
                     fill="rgba(0,0,0,1)"
@@ -2371,7 +2242,7 @@
                 transform="matrix(1,0,0,1,462.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-217"
                     fill="rgba(0,0,0,1)"
@@ -2397,7 +2268,7 @@
           <g
             id="g-svg-218"
             fill="none"
-            transform="matrix(1,0,0,1,-80.300003,261)"
+            transform="matrix(1,0,0,1,-37.980000,249.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,84.639999,0)">
@@ -2421,26 +2292,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-79" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-220"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-221"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-222"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,300)">
+        <g id="g-svg-78" fill="none">
+          <g id="g-svg-220" fill="none" class="axis-grid-group">
+            <g id="g-svg-221" fill="none" class="axis-grid">
+              <g id="g-svg-222" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-224"
                     fill="none"
@@ -2448,10 +2304,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,300 L 50,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,300)">
+                <g>
                   <path
                     id="g-svg-225"
                     fill="none"
@@ -2459,10 +2315,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,300 L 87.5,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,300)">
+                <g>
                   <path
                     id="g-svg-226"
                     fill="none"
@@ -2470,10 +2326,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,300 L 125,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,300)">
+                <g>
                   <path
                     id="g-svg-227"
                     fill="none"
@@ -2481,10 +2337,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,300 L 162.5,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,300)">
+                <g>
                   <path
                     id="g-svg-228"
                     fill="none"
@@ -2492,10 +2348,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,300 L 200,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,300)">
+                <g>
                   <path
                     id="g-svg-229"
                     fill="none"
@@ -2503,10 +2359,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,300 L 237.49999999999997,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,300)">
+                <g>
                   <path
                     id="g-svg-230"
                     fill="none"
@@ -2514,10 +2370,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,300 L 275,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,300)">
+                <g>
                   <path
                     id="g-svg-231"
                     fill="none"
@@ -2525,10 +2381,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,300 L 312.49999999999994,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,300)">
+                <g>
                   <path
                     id="g-svg-232"
                     fill="none"
@@ -2536,10 +2392,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,300 L 350,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,300)">
+                <g>
                   <path
                     id="g-svg-233"
                     fill="none"
@@ -2547,10 +2403,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,300 L 387.5,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,300)">
+                <g>
                   <path
                     id="g-svg-234"
                     fill="none"
@@ -2558,10 +2414,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,300 L 424.99999999999994,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,300)">
+                <g>
                   <path
                     id="g-svg-235"
                     fill="none"
@@ -2569,67 +2425,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,300 L 462.5,300"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-223"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-223" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-236"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-237"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,300)">
+          <g id="g-svg-236" fill="none" class="axis-main-group">
+            <g id="g-svg-237" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-238"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="300"
+                  x2="515"
+                  y2="300"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,300)">
                   <path
                     id="g-svg-240"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-241"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-241" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-242"
                 fill="none"
                 transform="matrix(1,0,0,1,50,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-254"
                     fill="none"
@@ -2649,7 +2484,7 @@
                 transform="matrix(1,0,0,1,87.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-255"
                     fill="none"
@@ -2669,7 +2504,7 @@
                 transform="matrix(1,0,0,1,125,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-256"
                     fill="none"
@@ -2689,7 +2524,7 @@
                 transform="matrix(1,0,0,1,162.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-257"
                     fill="none"
@@ -2709,7 +2544,7 @@
                 transform="matrix(1,0,0,1,200,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-258"
                     fill="none"
@@ -2729,7 +2564,7 @@
                 transform="matrix(1,0,0,1,237.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-259"
                     fill="none"
@@ -2749,7 +2584,7 @@
                 transform="matrix(1,0,0,1,275,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-260"
                     fill="none"
@@ -2769,7 +2604,7 @@
                 transform="matrix(1,0,0,1,312.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-261"
                     fill="none"
@@ -2789,7 +2624,7 @@
                 transform="matrix(1,0,0,1,350,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-262"
                     fill="none"
@@ -2809,7 +2644,7 @@
                 transform="matrix(1,0,0,1,387.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-263"
                     fill="none"
@@ -2829,7 +2664,7 @@
                 transform="matrix(1,0,0,1,425,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-264"
                     fill="none"
@@ -2849,7 +2684,7 @@
                 transform="matrix(1,0,0,1,462.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-265"
                     fill="none"
@@ -2864,19 +2699,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-266"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-266" fill="none" class="axis-label-group">
               <g
                 id="g-svg-267"
                 fill="none"
                 transform="matrix(1,0,0,1,50,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-279"
                     fill="rgba(0,0,0,1)"
@@ -2903,7 +2733,7 @@
                 transform="matrix(1,0,0,1,87.500000,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-280"
                     fill="rgba(0,0,0,1)"
@@ -2930,7 +2760,7 @@
                 transform="matrix(1,0,0,1,125,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-281"
                     fill="rgba(0,0,0,1)"
@@ -2957,7 +2787,7 @@
                 transform="matrix(1,0,0,1,162.500000,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-282"
                     fill="rgba(0,0,0,1)"
@@ -2984,7 +2814,7 @@
                 transform="matrix(1,0,0,1,200,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-283"
                     fill="rgba(0,0,0,1)"
@@ -3011,7 +2841,7 @@
                 transform="matrix(1,0,0,1,237.500000,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-284"
                     fill="rgba(0,0,0,1)"
@@ -3038,7 +2868,7 @@
                 transform="matrix(1,0,0,1,275,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-285"
                     fill="rgba(0,0,0,1)"
@@ -3065,7 +2895,7 @@
                 transform="matrix(1,0,0,1,312.500000,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-286"
                     fill="rgba(0,0,0,1)"
@@ -3092,7 +2922,7 @@
                 transform="matrix(1,0,0,1,350,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-287"
                     fill="rgba(0,0,0,1)"
@@ -3119,7 +2949,7 @@
                 transform="matrix(1,0,0,1,387.500000,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-288"
                     fill="rgba(0,0,0,1)"
@@ -3146,7 +2976,7 @@
                 transform="matrix(1,0,0,1,425,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-289"
                     fill="rgba(0,0,0,1)"
@@ -3173,7 +3003,7 @@
                 transform="matrix(1,0,0,1,462.500000,315)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-290"
                     fill="rgba(0,0,0,1)"
@@ -3199,7 +3029,7 @@
           <g
             id="g-svg-291"
             fill="none"
-            transform="matrix(1,0,0,1,-181.699997,361)"
+            transform="matrix(1,0,0,1,-88.680000,349.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,186.039993,0)">
@@ -3223,26 +3053,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-80" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-293"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-294"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-295"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,400)">
+        <g id="g-svg-79" fill="none">
+          <g id="g-svg-293" fill="none" class="axis-grid-group">
+            <g id="g-svg-294" fill="none" class="axis-grid">
+              <g id="g-svg-295" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-297"
                     fill="none"
@@ -3250,10 +3065,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,400 L 50,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,400)">
+                <g>
                   <path
                     id="g-svg-298"
                     fill="none"
@@ -3261,10 +3076,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,400 L 87.5,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,400)">
+                <g>
                   <path
                     id="g-svg-299"
                     fill="none"
@@ -3272,10 +3087,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,400 L 125,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,400)">
+                <g>
                   <path
                     id="g-svg-300"
                     fill="none"
@@ -3283,10 +3098,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,400 L 162.5,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,400)">
+                <g>
                   <path
                     id="g-svg-301"
                     fill="none"
@@ -3294,10 +3109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,400 L 200,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,400)">
+                <g>
                   <path
                     id="g-svg-302"
                     fill="none"
@@ -3305,10 +3120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,400 L 237.49999999999997,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,400)">
+                <g>
                   <path
                     id="g-svg-303"
                     fill="none"
@@ -3316,10 +3131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,400 L 275,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,400)">
+                <g>
                   <path
                     id="g-svg-304"
                     fill="none"
@@ -3327,10 +3142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,400 L 312.49999999999994,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,400)">
+                <g>
                   <path
                     id="g-svg-305"
                     fill="none"
@@ -3338,10 +3153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,400 L 350,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,400)">
+                <g>
                   <path
                     id="g-svg-306"
                     fill="none"
@@ -3349,10 +3164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,400 L 387.5,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,400)">
+                <g>
                   <path
                     id="g-svg-307"
                     fill="none"
@@ -3360,10 +3175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,400 L 424.99999999999994,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,400)">
+                <g>
                   <path
                     id="g-svg-308"
                     fill="none"
@@ -3371,67 +3186,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,400 L 462.5,400"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-296"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-296" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-309"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-310"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,400)">
+          <g id="g-svg-309" fill="none" class="axis-main-group">
+            <g id="g-svg-310" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-311"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="400"
+                  x2="515"
+                  y2="400"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,400)">
                   <path
                     id="g-svg-313"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-314"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-314" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-315"
                 fill="none"
                 transform="matrix(1,0,0,1,50,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-327"
                     fill="none"
@@ -3451,7 +3245,7 @@
                 transform="matrix(1,0,0,1,87.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-328"
                     fill="none"
@@ -3471,7 +3265,7 @@
                 transform="matrix(1,0,0,1,125,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-329"
                     fill="none"
@@ -3491,7 +3285,7 @@
                 transform="matrix(1,0,0,1,162.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-330"
                     fill="none"
@@ -3511,7 +3305,7 @@
                 transform="matrix(1,0,0,1,200,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-331"
                     fill="none"
@@ -3531,7 +3325,7 @@
                 transform="matrix(1,0,0,1,237.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-332"
                     fill="none"
@@ -3551,7 +3345,7 @@
                 transform="matrix(1,0,0,1,275,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-333"
                     fill="none"
@@ -3571,7 +3365,7 @@
                 transform="matrix(1,0,0,1,312.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-334"
                     fill="none"
@@ -3591,7 +3385,7 @@
                 transform="matrix(1,0,0,1,350,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-335"
                     fill="none"
@@ -3611,7 +3405,7 @@
                 transform="matrix(1,0,0,1,387.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-336"
                     fill="none"
@@ -3631,7 +3425,7 @@
                 transform="matrix(1,0,0,1,425,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-337"
                     fill="none"
@@ -3651,7 +3445,7 @@
                 transform="matrix(1,0,0,1,462.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-338"
                     fill="none"
@@ -3666,19 +3460,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-339"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-339" fill="none" class="axis-label-group">
               <g
                 id="g-svg-340"
                 fill="none"
                 transform="matrix(1,0,0,1,50,415)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-352"
                     fill="rgba(0,0,0,1)"
@@ -3705,7 +3494,7 @@
                 transform="matrix(1,0,0,1,87.500000,415)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-353"
                     fill="rgba(0,0,0,1)"
@@ -3732,7 +3521,7 @@
                 transform="matrix(1,0,0,1,125,415)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-354"
                     fill="rgba(0,0,0,1)"
@@ -3759,7 +3548,7 @@
                 transform="matrix(1,0,0,1,162.500000,415)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-355"
                     fill="rgba(0,0,0,1)"
@@ -3786,7 +3575,7 @@
                 transform="matrix(1,0,0,1,200,415)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-356"
                     fill="rgba(0,0,0,1)"
@@ -3813,7 +3602,7 @@
                 transform="matrix(1,0,0,1,237.500000,415)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-357"
                     fill="rgba(0,0,0,1)"
@@ -3840,7 +3629,7 @@
                 transform="matrix(1,0,0,1,275,415)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-358"
                     fill="rgba(0,0,0,1)"
@@ -3867,7 +3656,7 @@
                 transform="matrix(1,0,0,1,312.500000,415)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-359"
                     fill="rgba(0,0,0,1)"
@@ -3894,7 +3683,7 @@
                 transform="matrix(1,0,0,1,350,415)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-360"
                     fill="rgba(0,0,0,1)"
@@ -3921,7 +3710,7 @@
                 transform="matrix(1,0,0,1,387.500000,415)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-361"
                     fill="rgba(0,0,0,1)"
@@ -3948,7 +3737,7 @@
                 transform="matrix(1,0,0,1,425,415)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-362"
                     fill="rgba(0,0,0,1)"
@@ -3975,7 +3764,7 @@
                 transform="matrix(1,0,0,1,462.500000,415)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-363"
                     fill="rgba(0,0,0,1)"
@@ -4001,7 +3790,7 @@
           <g
             id="g-svg-364"
             fill="none"
-            transform="matrix(1,0,0,1,-137.660004,461)"
+            transform="matrix(1,0,0,1,-66.660004,449.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,142,0)">
@@ -4025,26 +3814,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-81" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-366"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-367"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-368"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,500)">
+        <g id="g-svg-80" fill="none">
+          <g id="g-svg-366" fill="none" class="axis-grid-group">
+            <g id="g-svg-367" fill="none" class="axis-grid">
+              <g id="g-svg-368" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-370"
                     fill="none"
@@ -4052,10 +3826,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,500 L 50,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,500)">
+                <g>
                   <path
                     id="g-svg-371"
                     fill="none"
@@ -4063,10 +3837,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,500 L 87.5,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,500)">
+                <g>
                   <path
                     id="g-svg-372"
                     fill="none"
@@ -4074,10 +3848,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,500 L 125,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,500)">
+                <g>
                   <path
                     id="g-svg-373"
                     fill="none"
@@ -4085,10 +3859,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,500 L 162.5,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,500)">
+                <g>
                   <path
                     id="g-svg-374"
                     fill="none"
@@ -4096,10 +3870,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,500 L 200,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,500)">
+                <g>
                   <path
                     id="g-svg-375"
                     fill="none"
@@ -4107,10 +3881,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,500 L 237.49999999999997,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,500)">
+                <g>
                   <path
                     id="g-svg-376"
                     fill="none"
@@ -4118,10 +3892,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,500 L 275,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,500)">
+                <g>
                   <path
                     id="g-svg-377"
                     fill="none"
@@ -4129,10 +3903,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,500 L 312.49999999999994,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,500)">
+                <g>
                   <path
                     id="g-svg-378"
                     fill="none"
@@ -4140,10 +3914,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,500 L 350,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,500)">
+                <g>
                   <path
                     id="g-svg-379"
                     fill="none"
@@ -4151,10 +3925,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,500 L 387.5,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,500)">
+                <g>
                   <path
                     id="g-svg-380"
                     fill="none"
@@ -4162,10 +3936,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,500 L 424.99999999999994,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,500)">
+                <g>
                   <path
                     id="g-svg-381"
                     fill="none"
@@ -4173,67 +3947,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,500 L 462.5,500"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-369"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-369" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-382"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-383"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,500)">
+          <g id="g-svg-382" fill="none" class="axis-main-group">
+            <g id="g-svg-383" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-384"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="500"
+                  x2="515"
+                  y2="500"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,500)">
                   <path
                     id="g-svg-386"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-387"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-387" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-388"
                 fill="none"
                 transform="matrix(1,0,0,1,50,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-400"
                     fill="none"
@@ -4253,7 +4006,7 @@
                 transform="matrix(1,0,0,1,87.500000,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-401"
                     fill="none"
@@ -4273,7 +4026,7 @@
                 transform="matrix(1,0,0,1,125,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-402"
                     fill="none"
@@ -4293,7 +4046,7 @@
                 transform="matrix(1,0,0,1,162.500000,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-403"
                     fill="none"
@@ -4313,7 +4066,7 @@
                 transform="matrix(1,0,0,1,200,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-404"
                     fill="none"
@@ -4333,7 +4086,7 @@
                 transform="matrix(1,0,0,1,237.500000,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-405"
                     fill="none"
@@ -4353,7 +4106,7 @@
                 transform="matrix(1,0,0,1,275,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-406"
                     fill="none"
@@ -4373,7 +4126,7 @@
                 transform="matrix(1,0,0,1,312.500000,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-407"
                     fill="none"
@@ -4393,7 +4146,7 @@
                 transform="matrix(1,0,0,1,350,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-408"
                     fill="none"
@@ -4413,7 +4166,7 @@
                 transform="matrix(1,0,0,1,387.500000,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-409"
                     fill="none"
@@ -4433,7 +4186,7 @@
                 transform="matrix(1,0,0,1,425,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-410"
                     fill="none"
@@ -4453,7 +4206,7 @@
                 transform="matrix(1,0,0,1,462.500000,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-411"
                     fill="none"
@@ -4468,19 +4221,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-412"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-412" fill="none" class="axis-label-group">
               <g
                 id="g-svg-413"
                 fill="none"
                 transform="matrix(1,0,0,1,50,515)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-425"
                     fill="rgba(0,0,0,1)"
@@ -4507,7 +4255,7 @@
                 transform="matrix(1,0,0,1,87.500000,515)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-426"
                     fill="rgba(0,0,0,1)"
@@ -4534,7 +4282,7 @@
                 transform="matrix(1,0,0,1,125,515)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-427"
                     fill="rgba(0,0,0,1)"
@@ -4561,7 +4309,7 @@
                 transform="matrix(1,0,0,1,162.500000,515)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-428"
                     fill="rgba(0,0,0,1)"
@@ -4588,7 +4336,7 @@
                 transform="matrix(1,0,0,1,200,515)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-429"
                     fill="rgba(0,0,0,1)"
@@ -4615,7 +4363,7 @@
                 transform="matrix(1,0,0,1,237.500000,515)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-430"
                     fill="rgba(0,0,0,1)"
@@ -4642,7 +4390,7 @@
                 transform="matrix(1,0,0,1,275,515)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-431"
                     fill="rgba(0,0,0,1)"
@@ -4669,7 +4417,7 @@
                 transform="matrix(1,0,0,1,312.500000,515)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-432"
                     fill="rgba(0,0,0,1)"
@@ -4696,7 +4444,7 @@
                 transform="matrix(1,0,0,1,350,515)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-433"
                     fill="rgba(0,0,0,1)"
@@ -4723,7 +4471,7 @@
                 transform="matrix(1,0,0,1,387.500000,515)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-434"
                     fill="rgba(0,0,0,1)"
@@ -4750,7 +4498,7 @@
                 transform="matrix(1,0,0,1,425,515)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-435"
                     fill="rgba(0,0,0,1)"
@@ -4777,7 +4525,7 @@
                 transform="matrix(1,0,0,1,462.500000,515)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-436"
                     fill="rgba(0,0,0,1)"
@@ -4803,7 +4551,7 @@
           <g
             id="g-svg-437"
             fill="none"
-            transform="matrix(1,0,0,1,-90.139999,561)"
+            transform="matrix(1,0,0,1,-42.900002,549.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,94.480003,0)">
@@ -4827,26 +4575,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-82" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-439"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-440"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-441"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,550,50)">
+        <g id="g-svg-81" fill="none">
+          <g id="g-svg-439" fill="none" class="axis-grid-group">
+            <g id="g-svg-440" fill="none" class="axis-grid">
+              <g id="g-svg-441" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-443"
                     fill="none"
@@ -4854,10 +4587,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,50 L 550,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,579.166687,50)">
+                <g>
                   <path
                     id="g-svg-444"
                     fill="none"
@@ -4865,10 +4598,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 579.1666666666666,50 L 579.1666666666666,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,608.333313,50)">
+                <g>
                   <path
                     id="g-svg-445"
                     fill="none"
@@ -4876,10 +4609,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 608.3333333333334,50 L 608.3333333333334,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,637.500000,50)">
+                <g>
                   <path
                     id="g-svg-446"
                     fill="none"
@@ -4887,10 +4620,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 637.5,50 L 637.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,666.666687,50)">
+                <g>
                   <path
                     id="g-svg-447"
                     fill="none"
@@ -4898,10 +4631,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 666.6666666666666,50 L 666.6666666666666,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,695.833313,50)">
+                <g>
                   <path
                     id="g-svg-448"
                     fill="none"
@@ -4909,10 +4642,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 695.8333333333333,50 L 695.8333333333333,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,725,50)">
+                <g>
                   <path
                     id="g-svg-449"
                     fill="none"
@@ -4920,10 +4653,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 725,50 L 725,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,754.166687,50)">
+                <g>
                   <path
                     id="g-svg-450"
                     fill="none"
@@ -4931,10 +4664,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 754.1666666666666,50 L 754.1666666666666,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,783.333313,50)">
+                <g>
                   <path
                     id="g-svg-451"
                     fill="none"
@@ -4942,10 +4675,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 783.3333333333333,50 L 783.3333333333333,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,812.500000,50)">
+                <g>
                   <path
                     id="g-svg-452"
                     fill="none"
@@ -4953,10 +4686,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 812.5,50 L 812.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,841.666687,50)">
+                <g>
                   <path
                     id="g-svg-453"
                     fill="none"
@@ -4964,10 +4697,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 841.6666666666666,50 L 841.6666666666666,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,870.833313,50)">
+                <g>
                   <path
                     id="g-svg-454"
                     fill="none"
@@ -4975,67 +4708,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 870.8333333333333,50 L 870.8333333333333,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-442"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-442" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-455"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-456"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,550,50)">
+          <g id="g-svg-455" fill="none" class="axis-main-group">
+            <g id="g-svg-456" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-457"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="365"
-                  y2="-1.83697019872103e-15"
+                  x1="550"
+                  y1="50"
+                  x2="915"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,365,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,915,50)">
                   <path
                     id="g-svg-459"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-460"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-460" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-461"
                 fill="none"
                 transform="matrix(1,0,0,1,550,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-473"
                     fill="none"
@@ -5055,7 +4767,7 @@
                 transform="matrix(1,0,0,1,579.166687,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-474"
                     fill="none"
@@ -5075,7 +4787,7 @@
                 transform="matrix(1,0,0,1,608.333313,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-475"
                     fill="none"
@@ -5095,7 +4807,7 @@
                 transform="matrix(1,0,0,1,637.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-476"
                     fill="none"
@@ -5115,7 +4827,7 @@
                 transform="matrix(1,0,0,1,666.666687,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-477"
                     fill="none"
@@ -5135,7 +4847,7 @@
                 transform="matrix(1,0,0,1,695.833313,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-478"
                     fill="none"
@@ -5155,7 +4867,7 @@
                 transform="matrix(1,0,0,1,725,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-479"
                     fill="none"
@@ -5175,7 +4887,7 @@
                 transform="matrix(1,0,0,1,754.166687,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-480"
                     fill="none"
@@ -5195,7 +4907,7 @@
                 transform="matrix(1,0,0,1,783.333313,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-481"
                     fill="none"
@@ -5215,7 +4927,7 @@
                 transform="matrix(1,0,0,1,812.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-482"
                     fill="none"
@@ -5235,7 +4947,7 @@
                 transform="matrix(1,0,0,1,841.666687,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-483"
                     fill="none"
@@ -5255,7 +4967,7 @@
                 transform="matrix(1,0,0,1,870.833313,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-484"
                     fill="none"
@@ -5270,19 +4982,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-485"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-485" fill="none" class="axis-label-group">
               <g
                 id="g-svg-486"
                 fill="none"
                 transform="matrix(1,0,0,1,550,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-498"
                     fill="rgba(0,0,0,1)"
@@ -5309,7 +5016,7 @@
                 transform="matrix(1,0,0,1,579.166687,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-499"
                     fill="rgba(0,0,0,1)"
@@ -5336,7 +5043,7 @@
                 transform="matrix(1,0,0,1,608.333313,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-500"
                     fill="rgba(0,0,0,1)"
@@ -5363,7 +5070,7 @@
                 transform="matrix(1,0,0,1,637.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-501"
                     fill="rgba(0,0,0,1)"
@@ -5390,7 +5097,7 @@
                 transform="matrix(1,0,0,1,666.666687,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-502"
                     fill="rgba(0,0,0,1)"
@@ -5417,7 +5124,7 @@
                 transform="matrix(1,0,0,1,695.833313,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-503"
                     fill="rgba(0,0,0,1)"
@@ -5444,7 +5151,7 @@
                 transform="matrix(1,0,0,1,725,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-504"
                     fill="rgba(0,0,0,1)"
@@ -5471,7 +5178,7 @@
                 transform="matrix(1,0,0,1,754.166687,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-505"
                     fill="rgba(0,0,0,1)"
@@ -5498,7 +5205,7 @@
                 transform="matrix(1,0,0,1,783.333313,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-506"
                     fill="rgba(0,0,0,1)"
@@ -5525,7 +5232,7 @@
                 transform="matrix(1,0,0,1,812.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-507"
                     fill="rgba(0,0,0,1)"
@@ -5552,7 +5259,7 @@
                 transform="matrix(1,0,0,1,841.666687,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-508"
                     fill="rgba(0,0,0,1)"
@@ -5579,7 +5286,7 @@
                 transform="matrix(1,0,0,1,870.833313,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-509"
                     fill="rgba(0,0,0,1)"
@@ -5605,7 +5312,7 @@
           <g
             id="g-svg-510"
             fill="none"
-            transform="matrix(1,0,0,1,366.059998,111)"
+            transform="matrix(1,0,0,1,435.200012,99.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,138.279999,0)">
diff --git a/__tests__/integration/snapshots/AxisLinearLabelOverlapWrap.svg b/__tests__/integration/snapshots/AxisLinearLabelOverlapWrap.svg
index 0980cba2d..d5af58e92 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelOverlapWrap.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelOverlapWrap.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-1089"
-        fill="none"
-        width="550"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-1090" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1085" fill="none" width="550" height="150">
+        <g id="g-svg-1086" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,72.500000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 72.5,50 L 72.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,95,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 95,50 L 95,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,117.500000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 117.50000000000001,50 L 117.50000000000001,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,140,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 140,50 L 140,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,50 L 162.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,185,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 185.00000000000003,50 L 185.00000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,207.500000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 207.50000000000003,50 L 207.50000000000003,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,230,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 230,50 L 230,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,50 L 252.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,50 L 275,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,297.500000,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 297.5,50 L 297.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 320.00000000000006,50 L 320.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,342.500000,50)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 342.5,50 L 342.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,365,50)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 365.00000000000006,50 L 365.00000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,50 L 387.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,410,50)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 410,50 L 410,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,432.500000,50)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 432.50000000000006,50 L 432.50000000000006,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,455,50)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 455,50 L 455,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,477.500000,50)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,67 +230,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 477.50000000000006,50 L 477.50000000000006,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="2"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="2"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-30" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -331,7 +289,7 @@
                 transform="matrix(1,0,0,1,72.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -351,7 +309,7 @@
                 transform="matrix(1,0,0,1,95,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -371,7 +329,7 @@
                 transform="matrix(1,0,0,1,117.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -391,7 +349,7 @@
                 transform="matrix(1,0,0,1,140,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
@@ -411,7 +369,7 @@
                 transform="matrix(1,0,0,1,162.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
@@ -431,7 +389,7 @@
                 transform="matrix(1,0,0,1,185,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
@@ -451,7 +409,7 @@
                 transform="matrix(1,0,0,1,207.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
@@ -471,7 +429,7 @@
                 transform="matrix(1,0,0,1,230,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -491,7 +449,7 @@
                 transform="matrix(1,0,0,1,252.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -511,7 +469,7 @@
                 transform="matrix(1,0,0,1,275,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -531,7 +489,7 @@
                 transform="matrix(1,0,0,1,297.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -551,7 +509,7 @@
                 transform="matrix(1,0,0,1,320,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
@@ -571,7 +529,7 @@
                 transform="matrix(1,0,0,1,342.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
@@ -591,7 +549,7 @@
                 transform="matrix(1,0,0,1,365,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
@@ -611,7 +569,7 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
@@ -631,7 +589,7 @@
                 transform="matrix(1,0,0,1,410,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="none"
@@ -651,7 +609,7 @@
                 transform="matrix(1,0,0,1,432.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-68"
                     fill="none"
@@ -671,7 +629,7 @@
                 transform="matrix(1,0,0,1,455,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="none"
@@ -691,7 +649,7 @@
                 transform="matrix(1,0,0,1,477.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-70"
                     fill="none"
@@ -706,19 +664,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-71"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-label-group">
               <g
                 id="g-svg-72"
                 fill="none"
                 transform="matrix(1,0,0,1,50,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -756,7 +709,7 @@
                 transform="matrix(1,0,0,1,72.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -788,7 +741,7 @@
                 transform="matrix(1,0,0,1,95,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -820,7 +773,7 @@
                 transform="matrix(1,0,0,1,117.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -852,7 +805,7 @@
                 transform="matrix(1,0,0,1,140,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -884,7 +837,7 @@
                 transform="matrix(1,0,0,1,162.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -919,7 +872,7 @@
                 transform="matrix(1,0,0,1,185,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-98"
                     fill="rgba(0,0,0,1)"
@@ -951,7 +904,7 @@
                 transform="matrix(1,0,0,1,207.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-99"
                     fill="rgba(0,0,0,1)"
@@ -983,7 +936,7 @@
                 transform="matrix(1,0,0,1,230,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-100"
                     fill="rgba(0,0,0,1)"
@@ -1015,7 +968,7 @@
                 transform="matrix(1,0,0,1,252.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-101"
                     fill="rgba(0,0,0,1)"
@@ -1043,7 +996,7 @@
                 transform="matrix(1,0,0,1,275,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-102"
                     fill="rgba(0,0,0,1)"
@@ -1084,7 +1037,7 @@
                 transform="matrix(1,0,0,1,297.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-103"
                     fill="rgba(0,0,0,1)"
@@ -1122,7 +1075,7 @@
                 transform="matrix(1,0,0,1,320,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-104"
                     fill="rgba(0,0,0,1)"
@@ -1154,7 +1107,7 @@
                 transform="matrix(1,0,0,1,342.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-105"
                     fill="rgba(0,0,0,1)"
@@ -1186,7 +1139,7 @@
                 transform="matrix(1,0,0,1,365,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-106"
                     fill="rgba(0,0,0,1)"
@@ -1221,7 +1174,7 @@
                 transform="matrix(1,0,0,1,387.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-107"
                     fill="rgba(0,0,0,1)"
@@ -1249,7 +1202,7 @@
                 transform="matrix(1,0,0,1,410,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-108"
                     fill="rgba(0,0,0,1)"
@@ -1284,7 +1237,7 @@
                 transform="matrix(1,0,0,1,432.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-109"
                     fill="rgba(0,0,0,1)"
@@ -1319,7 +1272,7 @@
                 transform="matrix(1,0,0,1,455,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-110"
                     fill="rgba(0,0,0,1)"
@@ -1351,7 +1304,7 @@
                 transform="matrix(1,0,0,1,477.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-111"
                     fill="rgba(0,0,0,1)"
@@ -1385,12 +1338,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-112"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-112" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelOverlapWrapVertical.svg b/__tests__/integration/snapshots/AxisLinearLabelOverlapWrapVertical.svg
index 54b19b0c5..fc5c199ea 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelOverlapWrapVertical.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelOverlapWrapVertical.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-113"
-        fill="none"
-        width="200"
-        height="550"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-114" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,100,500)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-113" fill="none" width="200" height="550">
+        <g id="g-svg-114" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,500 L 100,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,477.500000)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,477.5 L 100,477.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,455)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,455 L 100,455"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,432.500000)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,432.5 L 100,432.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,410)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,410 L 100,410"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,387.500000)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,387.5 L 100,387.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,365)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,365 L 100,365"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,342.500000)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,342.5 L 100,342.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,320)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,320 L 100,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,297.500000)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,297.5 L 100,297.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,275)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,275 L 100,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,252.500000)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,252.49999999999997 L 100,252.49999999999997"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,230)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,229.99999999999994 L 100,229.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,207.500000)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,207.5 L 100,207.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,185)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,184.99999999999994 L 100,184.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,162.500000)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,162.5 L 100,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,140)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,140 L 100,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,117.500000)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,117.49999999999994 L 100,117.49999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,95)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,95 L 100,95"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,72.500000)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,67 +230,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,72.49999999999994 L 100,72.49999999999994"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,100,50)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
-                  x1="0"
-                  y1="450"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="100"
+                  y1="500"
+                  x2="100"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="2"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,100,35)">
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="2"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-30" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,100,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -331,7 +289,7 @@
                 transform="matrix(1,0,0,1,100,477.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -351,7 +309,7 @@
                 transform="matrix(1,0,0,1,100,455)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -371,7 +329,7 @@
                 transform="matrix(1,0,0,1,100,432.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -391,7 +349,7 @@
                 transform="matrix(1,0,0,1,100,410)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
@@ -411,7 +369,7 @@
                 transform="matrix(1,0,0,1,100,387.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
@@ -431,7 +389,7 @@
                 transform="matrix(1,0,0,1,100,365)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
@@ -451,7 +409,7 @@
                 transform="matrix(1,0,0,1,100,342.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
@@ -471,7 +429,7 @@
                 transform="matrix(1,0,0,1,100,320)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -491,7 +449,7 @@
                 transform="matrix(1,0,0,1,100,297.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -511,7 +469,7 @@
                 transform="matrix(1,0,0,1,100,275)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -531,7 +489,7 @@
                 transform="matrix(1,0,0,1,100,252.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -551,7 +509,7 @@
                 transform="matrix(1,0,0,1,100,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
@@ -571,7 +529,7 @@
                 transform="matrix(1,0,0,1,100,207.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
@@ -591,7 +549,7 @@
                 transform="matrix(1,0,0,1,100,185)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
@@ -611,7 +569,7 @@
                 transform="matrix(1,0,0,1,100,162.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
@@ -631,7 +589,7 @@
                 transform="matrix(1,0,0,1,100,140)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="none"
@@ -651,7 +609,7 @@
                 transform="matrix(1,0,0,1,100,117.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-68"
                     fill="none"
@@ -671,7 +629,7 @@
                 transform="matrix(1,0,0,1,100,95)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="none"
@@ -691,7 +649,7 @@
                 transform="matrix(1,0,0,1,100,72.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-70"
                     fill="none"
@@ -706,19 +664,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-71"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-label-group">
               <g
                 id="g-svg-72"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,500)"
+                transform="matrix(1,0,0,1,115,500)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -753,10 +706,10 @@
               <g
                 id="g-svg-73"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,477.500000)"
+                transform="matrix(1,0,0,1,115,477.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -785,10 +738,10 @@
               <g
                 id="g-svg-74"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,455)"
+                transform="matrix(1,0,0,1,115,455)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -817,10 +770,10 @@
               <g
                 id="g-svg-75"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,432.500000)"
+                transform="matrix(1,0,0,1,115,432.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -849,10 +802,10 @@
               <g
                 id="g-svg-76"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,410)"
+                transform="matrix(1,0,0,1,115,410)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -881,10 +834,10 @@
               <g
                 id="g-svg-77"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,387.500000)"
+                transform="matrix(1,0,0,1,115,387.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -916,10 +869,10 @@
               <g
                 id="g-svg-78"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,365)"
+                transform="matrix(1,0,0,1,115,365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-98"
                     fill="rgba(0,0,0,1)"
@@ -948,10 +901,10 @@
               <g
                 id="g-svg-79"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,342.500000)"
+                transform="matrix(1,0,0,1,115,342.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-99"
                     fill="rgba(0,0,0,1)"
@@ -980,10 +933,10 @@
               <g
                 id="g-svg-80"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,320)"
+                transform="matrix(1,0,0,1,115,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-100"
                     fill="rgba(0,0,0,1)"
@@ -1012,10 +965,10 @@
               <g
                 id="g-svg-81"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,297.500000)"
+                transform="matrix(1,0,0,1,115,297.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-101"
                     fill="rgba(0,0,0,1)"
@@ -1040,10 +993,10 @@
               <g
                 id="g-svg-82"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,275)"
+                transform="matrix(1,0,0,1,115,275)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-102"
                     fill="rgba(0,0,0,1)"
@@ -1081,10 +1034,10 @@
               <g
                 id="g-svg-83"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,252.500000)"
+                transform="matrix(1,0,0,1,115,252.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-103"
                     fill="rgba(0,0,0,1)"
@@ -1119,10 +1072,10 @@
               <g
                 id="g-svg-84"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,230)"
+                transform="matrix(1,0,0,1,115,230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-104"
                     fill="rgba(0,0,0,1)"
@@ -1151,10 +1104,10 @@
               <g
                 id="g-svg-85"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,207.500000)"
+                transform="matrix(1,0,0,1,115,207.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-105"
                     fill="rgba(0,0,0,1)"
@@ -1183,10 +1136,10 @@
               <g
                 id="g-svg-86"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,185)"
+                transform="matrix(1,0,0,1,115,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-106"
                     fill="rgba(0,0,0,1)"
@@ -1218,10 +1171,10 @@
               <g
                 id="g-svg-87"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,162.500000)"
+                transform="matrix(1,0,0,1,115,162.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-107"
                     fill="rgba(0,0,0,1)"
@@ -1246,10 +1199,10 @@
               <g
                 id="g-svg-88"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,140)"
+                transform="matrix(1,0,0,1,115,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-108"
                     fill="rgba(0,0,0,1)"
@@ -1281,10 +1234,10 @@
               <g
                 id="g-svg-89"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,117.500000)"
+                transform="matrix(1,0,0,1,115,117.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-109"
                     fill="rgba(0,0,0,1)"
@@ -1316,10 +1269,10 @@
               <g
                 id="g-svg-90"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,95)"
+                transform="matrix(1,0,0,1,115,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-110"
                     fill="rgba(0,0,0,1)"
@@ -1348,10 +1301,10 @@
               <g
                 id="g-svg-91"
                 fill="none"
-                transform="matrix(0,-1,1,0,115,72.500000)"
+                transform="matrix(1,0,0,1,115,72.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,-1,1,0,0,0)">
                   <text
                     id="g-svg-111"
                     fill="rgba(0,0,0,1)"
@@ -1385,12 +1338,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-112"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-112" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearLabelRotate.svg b/__tests__/integration/snapshots/AxisLinearLabelRotate.svg
index 43a0a5c7a..87abcf0cb 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelRotate.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelRotate.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-85"
-        fill="none"
-        width="1000"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-86" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-85" fill="none" width="1000" height="500">
+        <g id="g-svg-86" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,68.750000,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 68.75,50 L 68.75,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,50 L 87.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,106.250000,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 106.25,50 L 106.25,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,50 L 125,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,143.750000,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 143.75,50 L 143.75,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,50 L 162.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,181.250000,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 181.24999999999997,50 L 181.24999999999997,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,50 L 200,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,218.750000,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 218.75,50 L 218.75,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,50)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,50 L 237.49999999999997,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,256.250000,50)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 256.25,50 L 256.25,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,50)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,50 L 275,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,50)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,50 L 293.75,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,50)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,50 L 312.49999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,331.250000,50)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 331.25,50 L 331.25,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,50 L 350,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,368.750000,50)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 368.74999999999994,50 L 368.74999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,50)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,50 L 387.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,406.250000,50)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,10 +230,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 406.25,50 L 406.25,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,50)">
+                <g>
                   <path
                     id="g-svg-25"
                     fill="none"
@@ -262,10 +241,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,50 L 424.99999999999994,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,443.750000,50)">
+                <g>
                   <path
                     id="g-svg-26"
                     fill="none"
@@ -273,10 +252,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 443.75,50 L 443.75,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,50)">
+                <g>
                   <path
                     id="g-svg-27"
                     fill="none"
@@ -284,10 +263,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,50 L 462.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,481.250000,50)">
+                <g>
                   <path
                     id="g-svg-28"
                     fill="none"
@@ -295,67 +274,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 481.24999999999994,50 L 481.24999999999994,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-29"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-29" fill="none" class="axis-main-group">
+            <g id="g-svg-30" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-31"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-33"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-34" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-35"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -375,7 +333,7 @@
                 transform="matrix(1,0,0,1,68.750000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -395,7 +353,7 @@
                 transform="matrix(1,0,0,1,87.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -415,7 +373,7 @@
                 transform="matrix(1,0,0,1,106.250000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -435,7 +393,7 @@
                 transform="matrix(1,0,0,1,125,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
@@ -455,7 +413,7 @@
                 transform="matrix(1,0,0,1,143.750000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
@@ -475,7 +433,7 @@
                 transform="matrix(1,0,0,1,162.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
@@ -495,7 +453,7 @@
                 transform="matrix(1,0,0,1,181.250000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
@@ -515,7 +473,7 @@
                 transform="matrix(1,0,0,1,200,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="none"
@@ -535,7 +493,7 @@
                 transform="matrix(1,0,0,1,218.750000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-68"
                     fill="none"
@@ -555,7 +513,7 @@
                 transform="matrix(1,0,0,1,237.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="none"
@@ -575,7 +533,7 @@
                 transform="matrix(1,0,0,1,256.250000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-70"
                     fill="none"
@@ -595,7 +553,7 @@
                 transform="matrix(1,0,0,1,275,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-71"
                     fill="none"
@@ -615,7 +573,7 @@
                 transform="matrix(1,0,0,1,293.750000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-72"
                     fill="none"
@@ -635,7 +593,7 @@
                 transform="matrix(1,0,0,1,312.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-73"
                     fill="none"
@@ -655,7 +613,7 @@
                 transform="matrix(1,0,0,1,331.250000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-74"
                     fill="none"
@@ -675,7 +633,7 @@
                 transform="matrix(1,0,0,1,350,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-75"
                     fill="none"
@@ -695,7 +653,7 @@
                 transform="matrix(1,0,0,1,368.750000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-76"
                     fill="none"
@@ -715,7 +673,7 @@
                 transform="matrix(1,0,0,1,387.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-77"
                     fill="none"
@@ -735,7 +693,7 @@
                 transform="matrix(1,0,0,1,406.250000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-78"
                     fill="none"
@@ -755,7 +713,7 @@
                 transform="matrix(1,0,0,1,425,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-79"
                     fill="none"
@@ -775,7 +733,7 @@
                 transform="matrix(1,0,0,1,443.750000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-80"
                     fill="none"
@@ -795,7 +753,7 @@
                 transform="matrix(1,0,0,1,462.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-81"
                     fill="none"
@@ -815,7 +773,7 @@
                 transform="matrix(1,0,0,1,481.250000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-82"
                     fill="none"
@@ -830,19 +788,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-83"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-83" fill="none" class="axis-label-group">
               <g
                 id="g-svg-84"
                 fill="none"
                 transform="matrix(1,0,0,1,50,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-108"
                     fill="rgba(0,0,0,1)"
@@ -869,7 +822,7 @@
                 transform="matrix(1,0,0,1,68.750000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-109"
                     fill="rgba(0,0,0,1)"
@@ -896,7 +849,7 @@
                 transform="matrix(1,0,0,1,87.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-110"
                     fill="rgba(0,0,0,1)"
@@ -923,7 +876,7 @@
                 transform="matrix(1,0,0,1,106.250000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-111"
                     fill="rgba(0,0,0,1)"
@@ -950,7 +903,7 @@
                 transform="matrix(1,0,0,1,125,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-112"
                     fill="rgba(0,0,0,1)"
@@ -977,7 +930,7 @@
                 transform="matrix(1,0,0,1,143.750000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-113"
                     fill="rgba(0,0,0,1)"
@@ -1004,7 +957,7 @@
                 transform="matrix(1,0,0,1,162.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-114"
                     fill="rgba(0,0,0,1)"
@@ -1031,7 +984,7 @@
                 transform="matrix(1,0,0,1,181.250000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-115"
                     fill="rgba(0,0,0,1)"
@@ -1058,7 +1011,7 @@
                 transform="matrix(1,0,0,1,200,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-116"
                     fill="rgba(0,0,0,1)"
@@ -1085,7 +1038,7 @@
                 transform="matrix(1,0,0,1,218.750000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-117"
                     fill="rgba(0,0,0,1)"
@@ -1112,7 +1065,7 @@
                 transform="matrix(1,0,0,1,237.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-118"
                     fill="rgba(0,0,0,1)"
@@ -1139,7 +1092,7 @@
                 transform="matrix(1,0,0,1,256.250000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-119"
                     fill="rgba(0,0,0,1)"
@@ -1166,7 +1119,7 @@
                 transform="matrix(1,0,0,1,275,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-120"
                     fill="rgba(0,0,0,1)"
@@ -1193,7 +1146,7 @@
                 transform="matrix(1,0,0,1,293.750000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-121"
                     fill="rgba(0,0,0,1)"
@@ -1220,7 +1173,7 @@
                 transform="matrix(1,0,0,1,312.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-122"
                     fill="rgba(0,0,0,1)"
@@ -1247,7 +1200,7 @@
                 transform="matrix(1,0,0,1,331.250000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-123"
                     fill="rgba(0,0,0,1)"
@@ -1274,7 +1227,7 @@
                 transform="matrix(1,0,0,1,350,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-124"
                     fill="rgba(0,0,0,1)"
@@ -1301,7 +1254,7 @@
                 transform="matrix(1,0,0,1,368.750000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-125"
                     fill="rgba(0,0,0,1)"
@@ -1328,7 +1281,7 @@
                 transform="matrix(1,0,0,1,387.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-126"
                     fill="rgba(0,0,0,1)"
@@ -1355,7 +1308,7 @@
                 transform="matrix(1,0,0,1,406.250000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-127"
                     fill="rgba(0,0,0,1)"
@@ -1382,7 +1335,7 @@
                 transform="matrix(1,0,0,1,425,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-128"
                     fill="rgba(0,0,0,1)"
@@ -1409,7 +1362,7 @@
                 transform="matrix(1,0,0,1,443.750000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-129"
                     fill="rgba(0,0,0,1)"
@@ -1436,7 +1389,7 @@
                 transform="matrix(1,0,0,1,462.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-130"
                     fill="rgba(0,0,0,1)"
@@ -1463,7 +1416,7 @@
                 transform="matrix(1,0,0,1,481.250000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-131"
                     fill="rgba(0,0,0,1)"
@@ -1489,7 +1442,7 @@
           <g
             id="g-svg-132"
             fill="none"
-            transform="matrix(1,0,0,1,23.260000,111)"
+            transform="matrix(1,0,0,1,30.360001,99.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -1513,26 +1466,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-87" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-134"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-135"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-136"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,100)">
+        <g id="g-svg-87" fill="none">
+          <g id="g-svg-134" fill="none" class="axis-grid-group">
+            <g id="g-svg-135" fill="none" class="axis-grid">
+              <g id="g-svg-136" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-138"
                     fill="none"
@@ -1540,10 +1478,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,100 L 50,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,68.750000,100)">
+                <g>
                   <path
                     id="g-svg-139"
                     fill="none"
@@ -1551,10 +1489,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 68.75,100 L 68.75,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,100)">
+                <g>
                   <path
                     id="g-svg-140"
                     fill="none"
@@ -1562,10 +1500,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,100 L 87.5,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,106.250000,100)">
+                <g>
                   <path
                     id="g-svg-141"
                     fill="none"
@@ -1573,10 +1511,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 106.25,100 L 106.25,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,100)">
+                <g>
                   <path
                     id="g-svg-142"
                     fill="none"
@@ -1584,10 +1522,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,100 L 125,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,143.750000,100)">
+                <g>
                   <path
                     id="g-svg-143"
                     fill="none"
@@ -1595,10 +1533,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 143.75,100 L 143.75,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,100)">
+                <g>
                   <path
                     id="g-svg-144"
                     fill="none"
@@ -1606,10 +1544,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,100 L 162.5,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,181.250000,100)">
+                <g>
                   <path
                     id="g-svg-145"
                     fill="none"
@@ -1617,10 +1555,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 181.24999999999997,100 L 181.24999999999997,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,100)">
+                <g>
                   <path
                     id="g-svg-146"
                     fill="none"
@@ -1628,10 +1566,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,100 L 200,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,218.750000,100)">
+                <g>
                   <path
                     id="g-svg-147"
                     fill="none"
@@ -1639,10 +1577,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 218.75,100 L 218.75,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,100)">
+                <g>
                   <path
                     id="g-svg-148"
                     fill="none"
@@ -1650,10 +1588,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,100 L 237.49999999999997,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,256.250000,100)">
+                <g>
                   <path
                     id="g-svg-149"
                     fill="none"
@@ -1661,10 +1599,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 256.25,100 L 256.25,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,100)">
+                <g>
                   <path
                     id="g-svg-150"
                     fill="none"
@@ -1672,10 +1610,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,100 L 275,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,100)">
+                <g>
                   <path
                     id="g-svg-151"
                     fill="none"
@@ -1683,10 +1621,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,100 L 293.75,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,100)">
+                <g>
                   <path
                     id="g-svg-152"
                     fill="none"
@@ -1694,10 +1632,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,100 L 312.49999999999994,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,331.250000,100)">
+                <g>
                   <path
                     id="g-svg-153"
                     fill="none"
@@ -1705,10 +1643,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 331.25,100 L 331.25,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,100)">
+                <g>
                   <path
                     id="g-svg-154"
                     fill="none"
@@ -1716,10 +1654,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,100 L 350,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,368.750000,100)">
+                <g>
                   <path
                     id="g-svg-155"
                     fill="none"
@@ -1727,10 +1665,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 368.74999999999994,100 L 368.74999999999994,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,100)">
+                <g>
                   <path
                     id="g-svg-156"
                     fill="none"
@@ -1738,10 +1676,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,100 L 387.5,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,406.250000,100)">
+                <g>
                   <path
                     id="g-svg-157"
                     fill="none"
@@ -1749,10 +1687,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 406.25,100 L 406.25,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,100)">
+                <g>
                   <path
                     id="g-svg-158"
                     fill="none"
@@ -1760,10 +1698,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,100 L 424.99999999999994,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,443.750000,100)">
+                <g>
                   <path
                     id="g-svg-159"
                     fill="none"
@@ -1771,10 +1709,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 443.75,100 L 443.75,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,100)">
+                <g>
                   <path
                     id="g-svg-160"
                     fill="none"
@@ -1782,10 +1720,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,100 L 462.5,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,481.250000,100)">
+                <g>
                   <path
                     id="g-svg-161"
                     fill="none"
@@ -1793,67 +1731,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 481.24999999999994,100 L 481.24999999999994,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-137"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-137" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-162"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-163"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,100)">
+          <g id="g-svg-162" fill="none" class="axis-main-group">
+            <g id="g-svg-163" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-164"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="100"
+                  x2="515"
+                  y2="100"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,100)">
                   <path
                     id="g-svg-166"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-167"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-167" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-168"
                 fill="none"
                 transform="matrix(1,0,0,1,50,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-192"
                     fill="none"
@@ -1873,7 +1790,7 @@
                 transform="matrix(1,0,0,1,68.750000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-193"
                     fill="none"
@@ -1893,7 +1810,7 @@
                 transform="matrix(1,0,0,1,87.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-194"
                     fill="none"
@@ -1913,7 +1830,7 @@
                 transform="matrix(1,0,0,1,106.250000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-195"
                     fill="none"
@@ -1933,7 +1850,7 @@
                 transform="matrix(1,0,0,1,125,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-196"
                     fill="none"
@@ -1953,7 +1870,7 @@
                 transform="matrix(1,0,0,1,143.750000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-197"
                     fill="none"
@@ -1973,7 +1890,7 @@
                 transform="matrix(1,0,0,1,162.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-198"
                     fill="none"
@@ -1993,7 +1910,7 @@
                 transform="matrix(1,0,0,1,181.250000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-199"
                     fill="none"
@@ -2013,7 +1930,7 @@
                 transform="matrix(1,0,0,1,200,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-200"
                     fill="none"
@@ -2033,7 +1950,7 @@
                 transform="matrix(1,0,0,1,218.750000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-201"
                     fill="none"
@@ -2053,7 +1970,7 @@
                 transform="matrix(1,0,0,1,237.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-202"
                     fill="none"
@@ -2073,7 +1990,7 @@
                 transform="matrix(1,0,0,1,256.250000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-203"
                     fill="none"
@@ -2093,7 +2010,7 @@
                 transform="matrix(1,0,0,1,275,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-204"
                     fill="none"
@@ -2113,7 +2030,7 @@
                 transform="matrix(1,0,0,1,293.750000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-205"
                     fill="none"
@@ -2133,7 +2050,7 @@
                 transform="matrix(1,0,0,1,312.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-206"
                     fill="none"
@@ -2153,7 +2070,7 @@
                 transform="matrix(1,0,0,1,331.250000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-207"
                     fill="none"
@@ -2173,7 +2090,7 @@
                 transform="matrix(1,0,0,1,350,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-208"
                     fill="none"
@@ -2193,7 +2110,7 @@
                 transform="matrix(1,0,0,1,368.750000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-209"
                     fill="none"
@@ -2213,7 +2130,7 @@
                 transform="matrix(1,0,0,1,387.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-210"
                     fill="none"
@@ -2233,7 +2150,7 @@
                 transform="matrix(1,0,0,1,406.250000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-211"
                     fill="none"
@@ -2253,7 +2170,7 @@
                 transform="matrix(1,0,0,1,425,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-212"
                     fill="none"
@@ -2273,7 +2190,7 @@
                 transform="matrix(1,0,0,1,443.750000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-213"
                     fill="none"
@@ -2293,7 +2210,7 @@
                 transform="matrix(1,0,0,1,462.500000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-214"
                     fill="none"
@@ -2313,7 +2230,7 @@
                 transform="matrix(1,0,0,1,481.250000,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-215"
                     fill="none"
@@ -2328,19 +2245,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-216"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-216" fill="none" class="axis-label-group">
               <g
                 id="g-svg-217"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,50,115)"
+                transform="matrix(1,0,0,1,50,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-241"
                     fill="rgba(0,0,0,1)"
@@ -2363,10 +2275,10 @@
               <g
                 id="g-svg-218"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,68.750000,115)"
+                transform="matrix(1,0,0,1,68.750000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-242"
                     fill="rgba(0,0,0,1)"
@@ -2389,10 +2301,10 @@
               <g
                 id="g-svg-219"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,87.500000,115)"
+                transform="matrix(1,0,0,1,87.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-243"
                     fill="rgba(0,0,0,1)"
@@ -2415,10 +2327,10 @@
               <g
                 id="g-svg-220"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,106.250000,115)"
+                transform="matrix(1,0,0,1,106.250000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-244"
                     fill="rgba(0,0,0,1)"
@@ -2441,10 +2353,10 @@
               <g
                 id="g-svg-221"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,125,115)"
+                transform="matrix(1,0,0,1,125,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-245"
                     fill="rgba(0,0,0,1)"
@@ -2467,10 +2379,10 @@
               <g
                 id="g-svg-222"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,143.750000,115)"
+                transform="matrix(1,0,0,1,143.750000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-246"
                     fill="rgba(0,0,0,1)"
@@ -2493,10 +2405,10 @@
               <g
                 id="g-svg-223"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,162.500000,115)"
+                transform="matrix(1,0,0,1,162.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-247"
                     fill="rgba(0,0,0,1)"
@@ -2519,10 +2431,10 @@
               <g
                 id="g-svg-224"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,181.250000,115)"
+                transform="matrix(1,0,0,1,181.250000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-248"
                     fill="rgba(0,0,0,1)"
@@ -2545,10 +2457,10 @@
               <g
                 id="g-svg-225"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,200,115)"
+                transform="matrix(1,0,0,1,200,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-249"
                     fill="rgba(0,0,0,1)"
@@ -2571,10 +2483,10 @@
               <g
                 id="g-svg-226"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,218.750000,115)"
+                transform="matrix(1,0,0,1,218.750000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-250"
                     fill="rgba(0,0,0,1)"
@@ -2597,10 +2509,10 @@
               <g
                 id="g-svg-227"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,237.500000,115)"
+                transform="matrix(1,0,0,1,237.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-251"
                     fill="rgba(0,0,0,1)"
@@ -2623,10 +2535,10 @@
               <g
                 id="g-svg-228"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,256.250000,115)"
+                transform="matrix(1,0,0,1,256.250000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-252"
                     fill="rgba(0,0,0,1)"
@@ -2649,10 +2561,10 @@
               <g
                 id="g-svg-229"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,275,115)"
+                transform="matrix(1,0,0,1,275,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-253"
                     fill="rgba(0,0,0,1)"
@@ -2675,10 +2587,10 @@
               <g
                 id="g-svg-230"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,293.750000,115)"
+                transform="matrix(1,0,0,1,293.750000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-254"
                     fill="rgba(0,0,0,1)"
@@ -2701,10 +2613,10 @@
               <g
                 id="g-svg-231"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,312.500000,115)"
+                transform="matrix(1,0,0,1,312.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-255"
                     fill="rgba(0,0,0,1)"
@@ -2727,10 +2639,10 @@
               <g
                 id="g-svg-232"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,331.250000,115)"
+                transform="matrix(1,0,0,1,331.250000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-256"
                     fill="rgba(0,0,0,1)"
@@ -2753,10 +2665,10 @@
               <g
                 id="g-svg-233"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,350,115)"
+                transform="matrix(1,0,0,1,350,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-257"
                     fill="rgba(0,0,0,1)"
@@ -2779,10 +2691,10 @@
               <g
                 id="g-svg-234"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,368.750000,115)"
+                transform="matrix(1,0,0,1,368.750000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-258"
                     fill="rgba(0,0,0,1)"
@@ -2805,10 +2717,10 @@
               <g
                 id="g-svg-235"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,387.500000,115)"
+                transform="matrix(1,0,0,1,387.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-259"
                     fill="rgba(0,0,0,1)"
@@ -2831,10 +2743,10 @@
               <g
                 id="g-svg-236"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,406.250000,115)"
+                transform="matrix(1,0,0,1,406.250000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-260"
                     fill="rgba(0,0,0,1)"
@@ -2857,10 +2769,10 @@
               <g
                 id="g-svg-237"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,425,115)"
+                transform="matrix(1,0,0,1,425,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-261"
                     fill="rgba(0,0,0,1)"
@@ -2883,10 +2795,10 @@
               <g
                 id="g-svg-238"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,443.750000,115)"
+                transform="matrix(1,0,0,1,443.750000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-262"
                     fill="rgba(0,0,0,1)"
@@ -2909,10 +2821,10 @@
               <g
                 id="g-svg-239"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,462.500000,115)"
+                transform="matrix(1,0,0,1,462.500000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-263"
                     fill="rgba(0,0,0,1)"
@@ -2935,10 +2847,10 @@
               <g
                 id="g-svg-240"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,481.250000,115)"
+                transform="matrix(1,0,0,1,481.250000,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-264"
                     fill="rgba(0,0,0,1)"
@@ -2963,7 +2875,7 @@
           <g
             id="g-svg-265"
             fill="none"
-            transform="matrix(1,0,0,1,27.668272,164.573074)"
+            transform="matrix(1,0,0,1,34.768272,153.073074)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -2987,26 +2899,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-267"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-268"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-269"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,150)">
+        <g id="g-svg-88" fill="none">
+          <g id="g-svg-267" fill="none" class="axis-grid-group">
+            <g id="g-svg-268" fill="none" class="axis-grid">
+              <g id="g-svg-269" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-271"
                     fill="none"
@@ -3014,10 +2911,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,150 L 50,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,68.750000,150)">
+                <g>
                   <path
                     id="g-svg-272"
                     fill="none"
@@ -3025,10 +2922,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 68.75,150 L 68.75,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,150)">
+                <g>
                   <path
                     id="g-svg-273"
                     fill="none"
@@ -3036,10 +2933,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,150 L 87.5,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,106.250000,150)">
+                <g>
                   <path
                     id="g-svg-274"
                     fill="none"
@@ -3047,10 +2944,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 106.25,150 L 106.25,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,150)">
+                <g>
                   <path
                     id="g-svg-275"
                     fill="none"
@@ -3058,10 +2955,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,150 L 125,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,143.750000,150)">
+                <g>
                   <path
                     id="g-svg-276"
                     fill="none"
@@ -3069,10 +2966,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 143.75,150 L 143.75,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,150)">
+                <g>
                   <path
                     id="g-svg-277"
                     fill="none"
@@ -3080,10 +2977,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,150 L 162.5,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,181.250000,150)">
+                <g>
                   <path
                     id="g-svg-278"
                     fill="none"
@@ -3091,10 +2988,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 181.24999999999997,150 L 181.24999999999997,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,150)">
+                <g>
                   <path
                     id="g-svg-279"
                     fill="none"
@@ -3102,10 +2999,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,150 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,218.750000,150)">
+                <g>
                   <path
                     id="g-svg-280"
                     fill="none"
@@ -3113,10 +3010,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 218.75,150 L 218.75,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,150)">
+                <g>
                   <path
                     id="g-svg-281"
                     fill="none"
@@ -3124,10 +3021,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,150 L 237.49999999999997,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,256.250000,150)">
+                <g>
                   <path
                     id="g-svg-282"
                     fill="none"
@@ -3135,10 +3032,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 256.25,150 L 256.25,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,150)">
+                <g>
                   <path
                     id="g-svg-283"
                     fill="none"
@@ -3146,10 +3043,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,150 L 275,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,150)">
+                <g>
                   <path
                     id="g-svg-284"
                     fill="none"
@@ -3157,10 +3054,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,150 L 293.75,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,150)">
+                <g>
                   <path
                     id="g-svg-285"
                     fill="none"
@@ -3168,10 +3065,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,150 L 312.49999999999994,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,331.250000,150)">
+                <g>
                   <path
                     id="g-svg-286"
                     fill="none"
@@ -3179,10 +3076,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 331.25,150 L 331.25,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,150)">
+                <g>
                   <path
                     id="g-svg-287"
                     fill="none"
@@ -3190,10 +3087,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,150 L 350,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,368.750000,150)">
+                <g>
                   <path
                     id="g-svg-288"
                     fill="none"
@@ -3201,10 +3098,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 368.74999999999994,150 L 368.74999999999994,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,150)">
+                <g>
                   <path
                     id="g-svg-289"
                     fill="none"
@@ -3212,10 +3109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,150 L 387.5,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,406.250000,150)">
+                <g>
                   <path
                     id="g-svg-290"
                     fill="none"
@@ -3223,10 +3120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 406.25,150 L 406.25,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,150)">
+                <g>
                   <path
                     id="g-svg-291"
                     fill="none"
@@ -3234,10 +3131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,150 L 424.99999999999994,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,443.750000,150)">
+                <g>
                   <path
                     id="g-svg-292"
                     fill="none"
@@ -3245,10 +3142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 443.75,150 L 443.75,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,150)">
+                <g>
                   <path
                     id="g-svg-293"
                     fill="none"
@@ -3256,10 +3153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,150 L 462.5,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,481.250000,150)">
+                <g>
                   <path
                     id="g-svg-294"
                     fill="none"
@@ -3267,67 +3164,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 481.24999999999994,150 L 481.24999999999994,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-270"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-270" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-295"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-296"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,150)">
+          <g id="g-svg-295" fill="none" class="axis-main-group">
+            <g id="g-svg-296" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-297"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="150"
+                  x2="515"
+                  y2="150"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,150)">
                   <path
                     id="g-svg-299"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-300"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-300" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-301"
                 fill="none"
                 transform="matrix(1,0,0,1,50,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-325"
                     fill="none"
@@ -3347,7 +3223,7 @@
                 transform="matrix(1,0,0,1,68.750000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-326"
                     fill="none"
@@ -3367,7 +3243,7 @@
                 transform="matrix(1,0,0,1,87.500000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-327"
                     fill="none"
@@ -3387,7 +3263,7 @@
                 transform="matrix(1,0,0,1,106.250000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-328"
                     fill="none"
@@ -3407,7 +3283,7 @@
                 transform="matrix(1,0,0,1,125,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-329"
                     fill="none"
@@ -3427,7 +3303,7 @@
                 transform="matrix(1,0,0,1,143.750000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-330"
                     fill="none"
@@ -3447,7 +3323,7 @@
                 transform="matrix(1,0,0,1,162.500000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-331"
                     fill="none"
@@ -3467,7 +3343,7 @@
                 transform="matrix(1,0,0,1,181.250000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-332"
                     fill="none"
@@ -3487,7 +3363,7 @@
                 transform="matrix(1,0,0,1,200,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-333"
                     fill="none"
@@ -3507,7 +3383,7 @@
                 transform="matrix(1,0,0,1,218.750000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-334"
                     fill="none"
@@ -3527,7 +3403,7 @@
                 transform="matrix(1,0,0,1,237.500000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-335"
                     fill="none"
@@ -3547,7 +3423,7 @@
                 transform="matrix(1,0,0,1,256.250000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-336"
                     fill="none"
@@ -3567,7 +3443,7 @@
                 transform="matrix(1,0,0,1,275,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-337"
                     fill="none"
@@ -3587,7 +3463,7 @@
                 transform="matrix(1,0,0,1,293.750000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-338"
                     fill="none"
@@ -3607,7 +3483,7 @@
                 transform="matrix(1,0,0,1,312.500000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-339"
                     fill="none"
@@ -3627,7 +3503,7 @@
                 transform="matrix(1,0,0,1,331.250000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-340"
                     fill="none"
@@ -3647,7 +3523,7 @@
                 transform="matrix(1,0,0,1,350,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-341"
                     fill="none"
@@ -3667,7 +3543,7 @@
                 transform="matrix(1,0,0,1,368.750000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-342"
                     fill="none"
@@ -3687,7 +3563,7 @@
                 transform="matrix(1,0,0,1,387.500000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-343"
                     fill="none"
@@ -3707,7 +3583,7 @@
                 transform="matrix(1,0,0,1,406.250000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-344"
                     fill="none"
@@ -3727,7 +3603,7 @@
                 transform="matrix(1,0,0,1,425,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-345"
                     fill="none"
@@ -3747,7 +3623,7 @@
                 transform="matrix(1,0,0,1,443.750000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-346"
                     fill="none"
@@ -3767,7 +3643,7 @@
                 transform="matrix(1,0,0,1,462.500000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-347"
                     fill="none"
@@ -3787,7 +3663,7 @@
                 transform="matrix(1,0,0,1,481.250000,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-348"
                     fill="none"
@@ -3802,19 +3678,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-349"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-349" fill="none" class="axis-label-group">
               <g
                 id="g-svg-350"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,50,165)"
+                transform="matrix(1,0,0,1,50,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-374"
                     fill="rgba(0,0,0,1)"
@@ -3837,10 +3708,10 @@
               <g
                 id="g-svg-351"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,68.750000,165)"
+                transform="matrix(1,0,0,1,68.750000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-375"
                     fill="rgba(0,0,0,1)"
@@ -3863,10 +3734,10 @@
               <g
                 id="g-svg-352"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,87.500000,165)"
+                transform="matrix(1,0,0,1,87.500000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-376"
                     fill="rgba(0,0,0,1)"
@@ -3889,10 +3760,10 @@
               <g
                 id="g-svg-353"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,106.250000,165)"
+                transform="matrix(1,0,0,1,106.250000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-377"
                     fill="rgba(0,0,0,1)"
@@ -3915,10 +3786,10 @@
               <g
                 id="g-svg-354"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,125,165)"
+                transform="matrix(1,0,0,1,125,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-378"
                     fill="rgba(0,0,0,1)"
@@ -3941,10 +3812,10 @@
               <g
                 id="g-svg-355"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,143.750000,165)"
+                transform="matrix(1,0,0,1,143.750000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-379"
                     fill="rgba(0,0,0,1)"
@@ -3967,10 +3838,10 @@
               <g
                 id="g-svg-356"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,162.500000,165)"
+                transform="matrix(1,0,0,1,162.500000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-380"
                     fill="rgba(0,0,0,1)"
@@ -3993,10 +3864,10 @@
               <g
                 id="g-svg-357"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,181.250000,165)"
+                transform="matrix(1,0,0,1,181.250000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-381"
                     fill="rgba(0,0,0,1)"
@@ -4019,10 +3890,10 @@
               <g
                 id="g-svg-358"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,200,165)"
+                transform="matrix(1,0,0,1,200,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-382"
                     fill="rgba(0,0,0,1)"
@@ -4045,10 +3916,10 @@
               <g
                 id="g-svg-359"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,218.750000,165)"
+                transform="matrix(1,0,0,1,218.750000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-383"
                     fill="rgba(0,0,0,1)"
@@ -4071,10 +3942,10 @@
               <g
                 id="g-svg-360"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,237.500000,165)"
+                transform="matrix(1,0,0,1,237.500000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-384"
                     fill="rgba(0,0,0,1)"
@@ -4097,10 +3968,10 @@
               <g
                 id="g-svg-361"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,256.250000,165)"
+                transform="matrix(1,0,0,1,256.250000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-385"
                     fill="rgba(0,0,0,1)"
@@ -4123,10 +3994,10 @@
               <g
                 id="g-svg-362"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,275,165)"
+                transform="matrix(1,0,0,1,275,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-386"
                     fill="rgba(0,0,0,1)"
@@ -4149,10 +4020,10 @@
               <g
                 id="g-svg-363"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,293.750000,165)"
+                transform="matrix(1,0,0,1,293.750000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-387"
                     fill="rgba(0,0,0,1)"
@@ -4175,10 +4046,10 @@
               <g
                 id="g-svg-364"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,312.500000,165)"
+                transform="matrix(1,0,0,1,312.500000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-388"
                     fill="rgba(0,0,0,1)"
@@ -4201,10 +4072,10 @@
               <g
                 id="g-svg-365"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,331.250000,165)"
+                transform="matrix(1,0,0,1,331.250000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-389"
                     fill="rgba(0,0,0,1)"
@@ -4227,10 +4098,10 @@
               <g
                 id="g-svg-366"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,350,165)"
+                transform="matrix(1,0,0,1,350,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-390"
                     fill="rgba(0,0,0,1)"
@@ -4253,10 +4124,10 @@
               <g
                 id="g-svg-367"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,368.750000,165)"
+                transform="matrix(1,0,0,1,368.750000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-391"
                     fill="rgba(0,0,0,1)"
@@ -4279,10 +4150,10 @@
               <g
                 id="g-svg-368"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,387.500000,165)"
+                transform="matrix(1,0,0,1,387.500000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-392"
                     fill="rgba(0,0,0,1)"
@@ -4305,10 +4176,10 @@
               <g
                 id="g-svg-369"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,406.250000,165)"
+                transform="matrix(1,0,0,1,406.250000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-393"
                     fill="rgba(0,0,0,1)"
@@ -4331,10 +4202,10 @@
               <g
                 id="g-svg-370"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,425,165)"
+                transform="matrix(1,0,0,1,425,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-394"
                     fill="rgba(0,0,0,1)"
@@ -4357,10 +4228,10 @@
               <g
                 id="g-svg-371"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,443.750000,165)"
+                transform="matrix(1,0,0,1,443.750000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-395"
                     fill="rgba(0,0,0,1)"
@@ -4383,10 +4254,10 @@
               <g
                 id="g-svg-372"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,462.500000,165)"
+                transform="matrix(1,0,0,1,462.500000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-396"
                     fill="rgba(0,0,0,1)"
@@ -4409,10 +4280,10 @@
               <g
                 id="g-svg-373"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,481.250000,165)"
+                transform="matrix(1,0,0,1,481.250000,165)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-397"
                     fill="rgba(0,0,0,1)"
@@ -4437,7 +4308,7 @@
           <g
             id="g-svg-398"
             fill="none"
-            transform="matrix(1,0,0,1,9.934034,213.865967)"
+            transform="matrix(1,0,0,1,17.034035,202.365967)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -4461,26 +4332,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-89" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-400"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-401"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-402"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,200)">
+        <g id="g-svg-89" fill="none">
+          <g id="g-svg-400" fill="none" class="axis-grid-group">
+            <g id="g-svg-401" fill="none" class="axis-grid">
+              <g id="g-svg-402" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-404"
                     fill="none"
@@ -4488,10 +4344,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,200 L 50,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,68.750000,200)">
+                <g>
                   <path
                     id="g-svg-405"
                     fill="none"
@@ -4499,10 +4355,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 68.75,200 L 68.75,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,200)">
+                <g>
                   <path
                     id="g-svg-406"
                     fill="none"
@@ -4510,10 +4366,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,200 L 87.5,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,106.250000,200)">
+                <g>
                   <path
                     id="g-svg-407"
                     fill="none"
@@ -4521,10 +4377,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 106.25,200 L 106.25,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,200)">
+                <g>
                   <path
                     id="g-svg-408"
                     fill="none"
@@ -4532,10 +4388,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,200 L 125,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,143.750000,200)">
+                <g>
                   <path
                     id="g-svg-409"
                     fill="none"
@@ -4543,10 +4399,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 143.75,200 L 143.75,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,200)">
+                <g>
                   <path
                     id="g-svg-410"
                     fill="none"
@@ -4554,10 +4410,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,200 L 162.5,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,181.250000,200)">
+                <g>
                   <path
                     id="g-svg-411"
                     fill="none"
@@ -4565,10 +4421,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 181.24999999999997,200 L 181.24999999999997,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,200)">
+                <g>
                   <path
                     id="g-svg-412"
                     fill="none"
@@ -4576,10 +4432,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,218.750000,200)">
+                <g>
                   <path
                     id="g-svg-413"
                     fill="none"
@@ -4587,10 +4443,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 218.75,200 L 218.75,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,200)">
+                <g>
                   <path
                     id="g-svg-414"
                     fill="none"
@@ -4598,10 +4454,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.49999999999997,200 L 237.49999999999997,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,256.250000,200)">
+                <g>
                   <path
                     id="g-svg-415"
                     fill="none"
@@ -4609,10 +4465,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 256.25,200 L 256.25,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,200)">
+                <g>
                   <path
                     id="g-svg-416"
                     fill="none"
@@ -4620,10 +4476,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,200 L 275,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,200)">
+                <g>
                   <path
                     id="g-svg-417"
                     fill="none"
@@ -4631,10 +4487,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,200 L 293.75,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,200)">
+                <g>
                   <path
                     id="g-svg-418"
                     fill="none"
@@ -4642,10 +4498,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.49999999999994,200 L 312.49999999999994,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,331.250000,200)">
+                <g>
                   <path
                     id="g-svg-419"
                     fill="none"
@@ -4653,10 +4509,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 331.25,200 L 331.25,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,200)">
+                <g>
                   <path
                     id="g-svg-420"
                     fill="none"
@@ -4664,10 +4520,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,200 L 350,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,368.750000,200)">
+                <g>
                   <path
                     id="g-svg-421"
                     fill="none"
@@ -4675,10 +4531,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 368.74999999999994,200 L 368.74999999999994,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,200)">
+                <g>
                   <path
                     id="g-svg-422"
                     fill="none"
@@ -4686,10 +4542,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,200 L 387.5,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,406.250000,200)">
+                <g>
                   <path
                     id="g-svg-423"
                     fill="none"
@@ -4697,10 +4553,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 406.25,200 L 406.25,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,200)">
+                <g>
                   <path
                     id="g-svg-424"
                     fill="none"
@@ -4708,10 +4564,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 424.99999999999994,200 L 424.99999999999994,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,443.750000,200)">
+                <g>
                   <path
                     id="g-svg-425"
                     fill="none"
@@ -4719,10 +4575,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 443.75,200 L 443.75,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,200)">
+                <g>
                   <path
                     id="g-svg-426"
                     fill="none"
@@ -4730,10 +4586,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,200 L 462.5,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,481.250000,200)">
+                <g>
                   <path
                     id="g-svg-427"
                     fill="none"
@@ -4741,67 +4597,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 481.24999999999994,200 L 481.24999999999994,200"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-403"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-403" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-428"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-429"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,200)">
+          <g id="g-svg-428" fill="none" class="axis-main-group">
+            <g id="g-svg-429" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-430"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="200"
+                  x2="515"
+                  y2="200"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,200)">
                   <path
                     id="g-svg-432"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-433"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-433" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-434"
                 fill="none"
                 transform="matrix(1,0,0,1,50,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-458"
                     fill="none"
@@ -4821,7 +4656,7 @@
                 transform="matrix(1,0,0,1,68.750000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-459"
                     fill="none"
@@ -4841,7 +4676,7 @@
                 transform="matrix(1,0,0,1,87.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-460"
                     fill="none"
@@ -4861,7 +4696,7 @@
                 transform="matrix(1,0,0,1,106.250000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-461"
                     fill="none"
@@ -4881,7 +4716,7 @@
                 transform="matrix(1,0,0,1,125,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-462"
                     fill="none"
@@ -4901,7 +4736,7 @@
                 transform="matrix(1,0,0,1,143.750000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-463"
                     fill="none"
@@ -4921,7 +4756,7 @@
                 transform="matrix(1,0,0,1,162.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-464"
                     fill="none"
@@ -4941,7 +4776,7 @@
                 transform="matrix(1,0,0,1,181.250000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-465"
                     fill="none"
@@ -4961,7 +4796,7 @@
                 transform="matrix(1,0,0,1,200,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-466"
                     fill="none"
@@ -4981,7 +4816,7 @@
                 transform="matrix(1,0,0,1,218.750000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-467"
                     fill="none"
@@ -5001,7 +4836,7 @@
                 transform="matrix(1,0,0,1,237.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-468"
                     fill="none"
@@ -5021,7 +4856,7 @@
                 transform="matrix(1,0,0,1,256.250000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-469"
                     fill="none"
@@ -5041,7 +4876,7 @@
                 transform="matrix(1,0,0,1,275,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-470"
                     fill="none"
@@ -5061,7 +4896,7 @@
                 transform="matrix(1,0,0,1,293.750000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-471"
                     fill="none"
@@ -5081,7 +4916,7 @@
                 transform="matrix(1,0,0,1,312.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-472"
                     fill="none"
@@ -5101,7 +4936,7 @@
                 transform="matrix(1,0,0,1,331.250000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-473"
                     fill="none"
@@ -5121,7 +4956,7 @@
                 transform="matrix(1,0,0,1,350,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-474"
                     fill="none"
@@ -5141,7 +4976,7 @@
                 transform="matrix(1,0,0,1,368.750000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-475"
                     fill="none"
@@ -5161,7 +4996,7 @@
                 transform="matrix(1,0,0,1,387.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-476"
                     fill="none"
@@ -5181,7 +5016,7 @@
                 transform="matrix(1,0,0,1,406.250000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-477"
                     fill="none"
@@ -5201,7 +5036,7 @@
                 transform="matrix(1,0,0,1,425,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-478"
                     fill="none"
@@ -5221,7 +5056,7 @@
                 transform="matrix(1,0,0,1,443.750000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-479"
                     fill="none"
@@ -5241,7 +5076,7 @@
                 transform="matrix(1,0,0,1,462.500000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-480"
                     fill="none"
@@ -5261,7 +5096,7 @@
                 transform="matrix(1,0,0,1,481.250000,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-481"
                     fill="none"
@@ -5276,19 +5111,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-482"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-482" fill="none" class="axis-label-group">
               <g
                 id="g-svg-483"
                 fill="none"
-                transform="matrix(0,1,-1,0,50,215)"
+                transform="matrix(1,0,0,1,50,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-507"
                     fill="rgba(0,0,0,1)"
@@ -5311,10 +5141,10 @@
               <g
                 id="g-svg-484"
                 fill="none"
-                transform="matrix(0,1,-1,0,68.750000,215)"
+                transform="matrix(1,0,0,1,68.750000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-508"
                     fill="rgba(0,0,0,1)"
@@ -5337,10 +5167,10 @@
               <g
                 id="g-svg-485"
                 fill="none"
-                transform="matrix(0,1,-1,0,87.500000,215)"
+                transform="matrix(1,0,0,1,87.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-509"
                     fill="rgba(0,0,0,1)"
@@ -5363,10 +5193,10 @@
               <g
                 id="g-svg-486"
                 fill="none"
-                transform="matrix(0,1,-1,0,106.250000,215)"
+                transform="matrix(1,0,0,1,106.250000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-510"
                     fill="rgba(0,0,0,1)"
@@ -5389,10 +5219,10 @@
               <g
                 id="g-svg-487"
                 fill="none"
-                transform="matrix(0,1,-1,0,125,215)"
+                transform="matrix(1,0,0,1,125,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-511"
                     fill="rgba(0,0,0,1)"
@@ -5415,10 +5245,10 @@
               <g
                 id="g-svg-488"
                 fill="none"
-                transform="matrix(0,1,-1,0,143.750000,215)"
+                transform="matrix(1,0,0,1,143.750000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-512"
                     fill="rgba(0,0,0,1)"
@@ -5441,10 +5271,10 @@
               <g
                 id="g-svg-489"
                 fill="none"
-                transform="matrix(0,1,-1,0,162.500000,215)"
+                transform="matrix(1,0,0,1,162.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-513"
                     fill="rgba(0,0,0,1)"
@@ -5467,10 +5297,10 @@
               <g
                 id="g-svg-490"
                 fill="none"
-                transform="matrix(0,1,-1,0,181.250000,215)"
+                transform="matrix(1,0,0,1,181.250000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-514"
                     fill="rgba(0,0,0,1)"
@@ -5493,10 +5323,10 @@
               <g
                 id="g-svg-491"
                 fill="none"
-                transform="matrix(0,1,-1,0,200,215)"
+                transform="matrix(1,0,0,1,200,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-515"
                     fill="rgba(0,0,0,1)"
@@ -5519,10 +5349,10 @@
               <g
                 id="g-svg-492"
                 fill="none"
-                transform="matrix(0,1,-1,0,218.750000,215)"
+                transform="matrix(1,0,0,1,218.750000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-516"
                     fill="rgba(0,0,0,1)"
@@ -5545,10 +5375,10 @@
               <g
                 id="g-svg-493"
                 fill="none"
-                transform="matrix(0,1,-1,0,237.500000,215)"
+                transform="matrix(1,0,0,1,237.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-517"
                     fill="rgba(0,0,0,1)"
@@ -5571,10 +5401,10 @@
               <g
                 id="g-svg-494"
                 fill="none"
-                transform="matrix(0,1,-1,0,256.250000,215)"
+                transform="matrix(1,0,0,1,256.250000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-518"
                     fill="rgba(0,0,0,1)"
@@ -5597,10 +5427,10 @@
               <g
                 id="g-svg-495"
                 fill="none"
-                transform="matrix(0,1,-1,0,275,215)"
+                transform="matrix(1,0,0,1,275,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-519"
                     fill="rgba(0,0,0,1)"
@@ -5623,10 +5453,10 @@
               <g
                 id="g-svg-496"
                 fill="none"
-                transform="matrix(0,1,-1,0,293.750000,215)"
+                transform="matrix(1,0,0,1,293.750000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-520"
                     fill="rgba(0,0,0,1)"
@@ -5649,10 +5479,10 @@
               <g
                 id="g-svg-497"
                 fill="none"
-                transform="matrix(0,1,-1,0,312.500000,215)"
+                transform="matrix(1,0,0,1,312.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-521"
                     fill="rgba(0,0,0,1)"
@@ -5675,10 +5505,10 @@
               <g
                 id="g-svg-498"
                 fill="none"
-                transform="matrix(0,1,-1,0,331.250000,215)"
+                transform="matrix(1,0,0,1,331.250000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-522"
                     fill="rgba(0,0,0,1)"
@@ -5701,10 +5531,10 @@
               <g
                 id="g-svg-499"
                 fill="none"
-                transform="matrix(0,1,-1,0,350,215)"
+                transform="matrix(1,0,0,1,350,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-523"
                     fill="rgba(0,0,0,1)"
@@ -5727,10 +5557,10 @@
               <g
                 id="g-svg-500"
                 fill="none"
-                transform="matrix(0,1,-1,0,368.750000,215)"
+                transform="matrix(1,0,0,1,368.750000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-524"
                     fill="rgba(0,0,0,1)"
@@ -5753,10 +5583,10 @@
               <g
                 id="g-svg-501"
                 fill="none"
-                transform="matrix(0,1,-1,0,387.500000,215)"
+                transform="matrix(1,0,0,1,387.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-525"
                     fill="rgba(0,0,0,1)"
@@ -5779,10 +5609,10 @@
               <g
                 id="g-svg-502"
                 fill="none"
-                transform="matrix(0,1,-1,0,406.250000,215)"
+                transform="matrix(1,0,0,1,406.250000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-526"
                     fill="rgba(0,0,0,1)"
@@ -5805,10 +5635,10 @@
               <g
                 id="g-svg-503"
                 fill="none"
-                transform="matrix(0,1,-1,0,425,215)"
+                transform="matrix(1,0,0,1,425,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-527"
                     fill="rgba(0,0,0,1)"
@@ -5831,10 +5661,10 @@
               <g
                 id="g-svg-504"
                 fill="none"
-                transform="matrix(0,1,-1,0,443.750000,215)"
+                transform="matrix(1,0,0,1,443.750000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-528"
                     fill="rgba(0,0,0,1)"
@@ -5857,10 +5687,10 @@
               <g
                 id="g-svg-505"
                 fill="none"
-                transform="matrix(0,1,-1,0,462.500000,215)"
+                transform="matrix(1,0,0,1,462.500000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-529"
                     fill="rgba(0,0,0,1)"
@@ -5883,10 +5713,10 @@
               <g
                 id="g-svg-506"
                 fill="none"
-                transform="matrix(0,1,-1,0,481.250000,215)"
+                transform="matrix(1,0,0,1,481.250000,215)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-530"
                     fill="rgba(0,0,0,1)"
@@ -5911,7 +5741,7 @@
           <g
             id="g-svg-531"
             fill="none"
-            transform="matrix(1,0,0,1,24.300001,264.079987)"
+            transform="matrix(1,0,0,1,31.400000,252.580002)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -5935,26 +5765,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-90" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-533"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-534"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-535"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,500,300)">
+        <g id="g-svg-90" fill="none">
+          <g id="g-svg-533" fill="none" class="axis-grid-group">
+            <g id="g-svg-534" fill="none" class="axis-grid">
+              <g id="g-svg-535" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-537"
                     fill="none"
@@ -5962,10 +5777,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,300 L 500,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,481.250000,300)">
+                <g>
                   <path
                     id="g-svg-538"
                     fill="none"
@@ -5973,10 +5788,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 481.25,300 L 481.25,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,300)">
+                <g>
                   <path
                     id="g-svg-539"
                     fill="none"
@@ -5984,10 +5799,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,300 L 462.5,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,443.750000,300)">
+                <g>
                   <path
                     id="g-svg-540"
                     fill="none"
@@ -5995,10 +5810,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 443.75,300 L 443.75,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,300)">
+                <g>
                   <path
                     id="g-svg-541"
                     fill="none"
@@ -6006,10 +5821,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 425,300 L 425,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,406.250000,300)">
+                <g>
                   <path
                     id="g-svg-542"
                     fill="none"
@@ -6017,10 +5832,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 406.25,300 L 406.25,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,300)">
+                <g>
                   <path
                     id="g-svg-543"
                     fill="none"
@@ -6028,10 +5843,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,300 L 387.5,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,368.750000,300)">
+                <g>
                   <path
                     id="g-svg-544"
                     fill="none"
@@ -6039,10 +5854,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 368.75,300 L 368.75,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,300)">
+                <g>
                   <path
                     id="g-svg-545"
                     fill="none"
@@ -6050,10 +5865,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,300 L 350,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,331.250000,300)">
+                <g>
                   <path
                     id="g-svg-546"
                     fill="none"
@@ -6061,10 +5876,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 331.25,300 L 331.25,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,300)">
+                <g>
                   <path
                     id="g-svg-547"
                     fill="none"
@@ -6072,10 +5887,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.5,300 L 312.5,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,300)">
+                <g>
                   <path
                     id="g-svg-548"
                     fill="none"
@@ -6083,10 +5898,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,300 L 293.75,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,300)">
+                <g>
                   <path
                     id="g-svg-549"
                     fill="none"
@@ -6094,10 +5909,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,300 L 275,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,256.250000,300)">
+                <g>
                   <path
                     id="g-svg-550"
                     fill="none"
@@ -6105,10 +5920,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 256.25,300 L 256.25,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,300)">
+                <g>
                   <path
                     id="g-svg-551"
                     fill="none"
@@ -6116,10 +5931,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.50000000000006,300 L 237.50000000000006,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,218.750000,300)">
+                <g>
                   <path
                     id="g-svg-552"
                     fill="none"
@@ -6127,10 +5942,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 218.75,300 L 218.75,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,300)">
+                <g>
                   <path
                     id="g-svg-553"
                     fill="none"
@@ -6138,10 +5953,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,300 L 200,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,181.250000,300)">
+                <g>
                   <path
                     id="g-svg-554"
                     fill="none"
@@ -6149,10 +5964,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 181.25000000000006,300 L 181.25000000000006,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,300)">
+                <g>
                   <path
                     id="g-svg-555"
                     fill="none"
@@ -6160,10 +5975,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,300 L 162.5,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,143.750000,300)">
+                <g>
                   <path
                     id="g-svg-556"
                     fill="none"
@@ -6171,10 +5986,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 143.75,300 L 143.75,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,300)">
+                <g>
                   <path
                     id="g-svg-557"
                     fill="none"
@@ -6182,10 +5997,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125.00000000000006,300 L 125.00000000000006,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,106.250000,300)">
+                <g>
                   <path
                     id="g-svg-558"
                     fill="none"
@@ -6193,10 +6008,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 106.25,300 L 106.25,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,300)">
+                <g>
                   <path
                     id="g-svg-559"
                     fill="none"
@@ -6204,10 +6019,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,300 L 87.5,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,68.750000,300)">
+                <g>
                   <path
                     id="g-svg-560"
                     fill="none"
@@ -6215,74 +6030,53 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 68.75000000000006,300 L 68.75000000000006,300"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-536"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-536" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-561"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-562"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,300)">
+          <g id="g-svg-561" fill="none" class="axis-main-group">
+            <g id="g-svg-562" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-563"
                   fill="none"
-                  x1="450"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="500"
+                  y1="300"
+                  x2="35"
+                  y2="300"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,35,300)">
                   <path
                     id="g-svg-565"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-566"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-566" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-567"
                 fill="none"
                 transform="matrix(1,0,0,1,500,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-591"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6295,14 +6089,14 @@
                 transform="matrix(1,0,0,1,481.250000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-592"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6315,14 +6109,14 @@
                 transform="matrix(1,0,0,1,462.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-593"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6335,14 +6129,14 @@
                 transform="matrix(1,0,0,1,443.750000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-594"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6355,14 +6149,14 @@
                 transform="matrix(1,0,0,1,425,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-595"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6375,14 +6169,14 @@
                 transform="matrix(1,0,0,1,406.250000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-596"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6395,14 +6189,14 @@
                 transform="matrix(1,0,0,1,387.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-597"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6415,14 +6209,14 @@
                 transform="matrix(1,0,0,1,368.750000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-598"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6435,14 +6229,14 @@
                 transform="matrix(1,0,0,1,350,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-599"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6455,14 +6249,14 @@
                 transform="matrix(1,0,0,1,331.250000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-600"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6475,14 +6269,14 @@
                 transform="matrix(1,0,0,1,312.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-601"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6495,14 +6289,14 @@
                 transform="matrix(1,0,0,1,293.750000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-602"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6515,14 +6309,14 @@
                 transform="matrix(1,0,0,1,275,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-603"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6535,14 +6329,14 @@
                 transform="matrix(1,0,0,1,256.250000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-604"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6555,14 +6349,14 @@
                 transform="matrix(1,0,0,1,237.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-605"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6575,14 +6369,14 @@
                 transform="matrix(1,0,0,1,218.750000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-606"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6595,14 +6389,14 @@
                 transform="matrix(1,0,0,1,200,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-607"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6615,14 +6409,14 @@
                 transform="matrix(1,0,0,1,181.250000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-608"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6635,14 +6429,14 @@
                 transform="matrix(1,0,0,1,162.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-609"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6655,14 +6449,14 @@
                 transform="matrix(1,0,0,1,143.750000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-610"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6675,14 +6469,14 @@
                 transform="matrix(1,0,0,1,125,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-611"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6695,14 +6489,14 @@
                 transform="matrix(1,0,0,1,106.250000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-612"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6715,14 +6509,14 @@
                 transform="matrix(1,0,0,1,87.500000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-613"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6735,14 +6529,14 @@
                 transform="matrix(1,0,0,1,68.750000,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-614"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -6750,19 +6544,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-615"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-615" fill="none" class="axis-label-group">
               <g
                 id="g-svg-616"
                 fill="none"
                 transform="matrix(1,0,0,1,500,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-640"
                     fill="rgba(0,0,0,1)"
@@ -6789,7 +6578,7 @@
                 transform="matrix(1,0,0,1,481.250000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-641"
                     fill="rgba(0,0,0,1)"
@@ -6816,7 +6605,7 @@
                 transform="matrix(1,0,0,1,462.500000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-642"
                     fill="rgba(0,0,0,1)"
@@ -6843,7 +6632,7 @@
                 transform="matrix(1,0,0,1,443.750000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-643"
                     fill="rgba(0,0,0,1)"
@@ -6870,7 +6659,7 @@
                 transform="matrix(1,0,0,1,425,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-644"
                     fill="rgba(0,0,0,1)"
@@ -6897,7 +6686,7 @@
                 transform="matrix(1,0,0,1,406.250000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-645"
                     fill="rgba(0,0,0,1)"
@@ -6924,7 +6713,7 @@
                 transform="matrix(1,0,0,1,387.500000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-646"
                     fill="rgba(0,0,0,1)"
@@ -6951,7 +6740,7 @@
                 transform="matrix(1,0,0,1,368.750000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-647"
                     fill="rgba(0,0,0,1)"
@@ -6978,7 +6767,7 @@
                 transform="matrix(1,0,0,1,350,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-648"
                     fill="rgba(0,0,0,1)"
@@ -7005,7 +6794,7 @@
                 transform="matrix(1,0,0,1,331.250000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-649"
                     fill="rgba(0,0,0,1)"
@@ -7032,7 +6821,7 @@
                 transform="matrix(1,0,0,1,312.500000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-650"
                     fill="rgba(0,0,0,1)"
@@ -7059,7 +6848,7 @@
                 transform="matrix(1,0,0,1,293.750000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-651"
                     fill="rgba(0,0,0,1)"
@@ -7086,7 +6875,7 @@
                 transform="matrix(1,0,0,1,275,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-652"
                     fill="rgba(0,0,0,1)"
@@ -7113,7 +6902,7 @@
                 transform="matrix(1,0,0,1,256.250000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-653"
                     fill="rgba(0,0,0,1)"
@@ -7140,7 +6929,7 @@
                 transform="matrix(1,0,0,1,237.500000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-654"
                     fill="rgba(0,0,0,1)"
@@ -7167,7 +6956,7 @@
                 transform="matrix(1,0,0,1,218.750000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-655"
                     fill="rgba(0,0,0,1)"
@@ -7194,7 +6983,7 @@
                 transform="matrix(1,0,0,1,200,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-656"
                     fill="rgba(0,0,0,1)"
@@ -7221,7 +7010,7 @@
                 transform="matrix(1,0,0,1,181.250000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-657"
                     fill="rgba(0,0,0,1)"
@@ -7248,7 +7037,7 @@
                 transform="matrix(1,0,0,1,162.500000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-658"
                     fill="rgba(0,0,0,1)"
@@ -7275,7 +7064,7 @@
                 transform="matrix(1,0,0,1,143.750000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-659"
                     fill="rgba(0,0,0,1)"
@@ -7302,7 +7091,7 @@
                 transform="matrix(1,0,0,1,125,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-660"
                     fill="rgba(0,0,0,1)"
@@ -7329,7 +7118,7 @@
                 transform="matrix(1,0,0,1,106.250000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-661"
                     fill="rgba(0,0,0,1)"
@@ -7356,7 +7145,7 @@
                 transform="matrix(1,0,0,1,87.500000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-662"
                     fill="rgba(0,0,0,1)"
@@ -7383,7 +7172,7 @@
                 transform="matrix(1,0,0,1,68.750000,285)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-663"
                     fill="rgba(0,0,0,1)"
@@ -7409,7 +7198,7 @@
           <g
             id="g-svg-664"
             fill="none"
-            transform="matrix(1,0,0,1,15.800000,328)"
+            transform="matrix(1,0,0,1,22.900000,316.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -7433,26 +7222,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-91" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-666"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-667"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-668"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,500,350)">
+        <g id="g-svg-91" fill="none">
+          <g id="g-svg-666" fill="none" class="axis-grid-group">
+            <g id="g-svg-667" fill="none" class="axis-grid">
+              <g id="g-svg-668" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-670"
                     fill="none"
@@ -7460,10 +7234,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,350 L 500,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,481.250000,350)">
+                <g>
                   <path
                     id="g-svg-671"
                     fill="none"
@@ -7471,10 +7245,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 481.25,350 L 481.25,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,350)">
+                <g>
                   <path
                     id="g-svg-672"
                     fill="none"
@@ -7482,10 +7256,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,350 L 462.5,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,443.750000,350)">
+                <g>
                   <path
                     id="g-svg-673"
                     fill="none"
@@ -7493,10 +7267,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 443.75,350 L 443.75,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,350)">
+                <g>
                   <path
                     id="g-svg-674"
                     fill="none"
@@ -7504,10 +7278,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 425,350 L 425,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,406.250000,350)">
+                <g>
                   <path
                     id="g-svg-675"
                     fill="none"
@@ -7515,10 +7289,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 406.25,350 L 406.25,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,350)">
+                <g>
                   <path
                     id="g-svg-676"
                     fill="none"
@@ -7526,10 +7300,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,350 L 387.5,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,368.750000,350)">
+                <g>
                   <path
                     id="g-svg-677"
                     fill="none"
@@ -7537,10 +7311,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 368.75,350 L 368.75,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,350)">
+                <g>
                   <path
                     id="g-svg-678"
                     fill="none"
@@ -7548,10 +7322,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,350 L 350,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,331.250000,350)">
+                <g>
                   <path
                     id="g-svg-679"
                     fill="none"
@@ -7559,10 +7333,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 331.25,350 L 331.25,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,350)">
+                <g>
                   <path
                     id="g-svg-680"
                     fill="none"
@@ -7570,10 +7344,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.5,350 L 312.5,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,350)">
+                <g>
                   <path
                     id="g-svg-681"
                     fill="none"
@@ -7581,10 +7355,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,350 L 293.75,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,350)">
+                <g>
                   <path
                     id="g-svg-682"
                     fill="none"
@@ -7592,10 +7366,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,350 L 275,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,256.250000,350)">
+                <g>
                   <path
                     id="g-svg-683"
                     fill="none"
@@ -7603,10 +7377,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 256.25,350 L 256.25,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,350)">
+                <g>
                   <path
                     id="g-svg-684"
                     fill="none"
@@ -7614,10 +7388,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.50000000000006,350 L 237.50000000000006,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,218.750000,350)">
+                <g>
                   <path
                     id="g-svg-685"
                     fill="none"
@@ -7625,10 +7399,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 218.75,350 L 218.75,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,350)">
+                <g>
                   <path
                     id="g-svg-686"
                     fill="none"
@@ -7636,10 +7410,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,350 L 200,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,181.250000,350)">
+                <g>
                   <path
                     id="g-svg-687"
                     fill="none"
@@ -7647,10 +7421,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 181.25000000000006,350 L 181.25000000000006,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,350)">
+                <g>
                   <path
                     id="g-svg-688"
                     fill="none"
@@ -7658,10 +7432,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,350 L 162.5,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,143.750000,350)">
+                <g>
                   <path
                     id="g-svg-689"
                     fill="none"
@@ -7669,10 +7443,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 143.75,350 L 143.75,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,350)">
+                <g>
                   <path
                     id="g-svg-690"
                     fill="none"
@@ -7680,10 +7454,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125.00000000000006,350 L 125.00000000000006,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,106.250000,350)">
+                <g>
                   <path
                     id="g-svg-691"
                     fill="none"
@@ -7691,10 +7465,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 106.25,350 L 106.25,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,350)">
+                <g>
                   <path
                     id="g-svg-692"
                     fill="none"
@@ -7702,10 +7476,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,350 L 87.5,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,68.750000,350)">
+                <g>
                   <path
                     id="g-svg-693"
                     fill="none"
@@ -7713,74 +7487,53 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 68.75000000000006,350 L 68.75000000000006,350"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-669"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-669" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-694"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-695"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,350)">
+          <g id="g-svg-694" fill="none" class="axis-main-group">
+            <g id="g-svg-695" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-696"
                   fill="none"
-                  x1="450"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="500"
+                  y1="350"
+                  x2="35"
+                  y2="350"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,35,350)">
                   <path
                     id="g-svg-698"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-699"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-699" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-700"
                 fill="none"
                 transform="matrix(1,0,0,1,500,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-724"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7793,14 +7546,14 @@
                 transform="matrix(1,0,0,1,481.250000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-725"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7813,14 +7566,14 @@
                 transform="matrix(1,0,0,1,462.500000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-726"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7833,14 +7586,14 @@
                 transform="matrix(1,0,0,1,443.750000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-727"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7853,14 +7606,14 @@
                 transform="matrix(1,0,0,1,425,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-728"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7873,14 +7626,14 @@
                 transform="matrix(1,0,0,1,406.250000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-729"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7893,14 +7646,14 @@
                 transform="matrix(1,0,0,1,387.500000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-730"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7913,14 +7666,14 @@
                 transform="matrix(1,0,0,1,368.750000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-731"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7933,14 +7686,14 @@
                 transform="matrix(1,0,0,1,350,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-732"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7953,14 +7706,14 @@
                 transform="matrix(1,0,0,1,331.250000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-733"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7973,14 +7726,14 @@
                 transform="matrix(1,0,0,1,312.500000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-734"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7993,14 +7746,14 @@
                 transform="matrix(1,0,0,1,293.750000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-735"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8013,14 +7766,14 @@
                 transform="matrix(1,0,0,1,275,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-736"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8033,14 +7786,14 @@
                 transform="matrix(1,0,0,1,256.250000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-737"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8053,14 +7806,14 @@
                 transform="matrix(1,0,0,1,237.500000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-738"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8073,14 +7826,14 @@
                 transform="matrix(1,0,0,1,218.750000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-739"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8093,14 +7846,14 @@
                 transform="matrix(1,0,0,1,200,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-740"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8113,14 +7866,14 @@
                 transform="matrix(1,0,0,1,181.250000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-741"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8133,14 +7886,14 @@
                 transform="matrix(1,0,0,1,162.500000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-742"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8153,14 +7906,14 @@
                 transform="matrix(1,0,0,1,143.750000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-743"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8173,14 +7926,14 @@
                 transform="matrix(1,0,0,1,125,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-744"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8193,14 +7946,14 @@
                 transform="matrix(1,0,0,1,106.250000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-745"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8213,14 +7966,14 @@
                 transform="matrix(1,0,0,1,87.500000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-746"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8233,14 +7986,14 @@
                 transform="matrix(1,0,0,1,68.750000,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-747"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8248,19 +8001,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-748"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-748" fill="none" class="axis-label-group">
               <g
                 id="g-svg-749"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,500,335)"
+                transform="matrix(1,0,0,1,500,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-773"
                     fill="rgba(0,0,0,1)"
@@ -8283,10 +8031,10 @@
               <g
                 id="g-svg-750"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,481.250000,335)"
+                transform="matrix(1,0,0,1,481.250000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-774"
                     fill="rgba(0,0,0,1)"
@@ -8309,10 +8057,10 @@
               <g
                 id="g-svg-751"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,462.500000,335)"
+                transform="matrix(1,0,0,1,462.500000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-775"
                     fill="rgba(0,0,0,1)"
@@ -8335,10 +8083,10 @@
               <g
                 id="g-svg-752"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,443.750000,335)"
+                transform="matrix(1,0,0,1,443.750000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-776"
                     fill="rgba(0,0,0,1)"
@@ -8361,10 +8109,10 @@
               <g
                 id="g-svg-753"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,425,335)"
+                transform="matrix(1,0,0,1,425,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-777"
                     fill="rgba(0,0,0,1)"
@@ -8387,10 +8135,10 @@
               <g
                 id="g-svg-754"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,406.250000,335)"
+                transform="matrix(1,0,0,1,406.250000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-778"
                     fill="rgba(0,0,0,1)"
@@ -8413,10 +8161,10 @@
               <g
                 id="g-svg-755"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,387.500000,335)"
+                transform="matrix(1,0,0,1,387.500000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-779"
                     fill="rgba(0,0,0,1)"
@@ -8439,10 +8187,10 @@
               <g
                 id="g-svg-756"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,368.750000,335)"
+                transform="matrix(1,0,0,1,368.750000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-780"
                     fill="rgba(0,0,0,1)"
@@ -8465,10 +8213,10 @@
               <g
                 id="g-svg-757"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,350,335)"
+                transform="matrix(1,0,0,1,350,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-781"
                     fill="rgba(0,0,0,1)"
@@ -8491,10 +8239,10 @@
               <g
                 id="g-svg-758"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,331.250000,335)"
+                transform="matrix(1,0,0,1,331.250000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-782"
                     fill="rgba(0,0,0,1)"
@@ -8517,10 +8265,10 @@
               <g
                 id="g-svg-759"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,312.500000,335)"
+                transform="matrix(1,0,0,1,312.500000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-783"
                     fill="rgba(0,0,0,1)"
@@ -8543,10 +8291,10 @@
               <g
                 id="g-svg-760"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,293.750000,335)"
+                transform="matrix(1,0,0,1,293.750000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-784"
                     fill="rgba(0,0,0,1)"
@@ -8569,10 +8317,10 @@
               <g
                 id="g-svg-761"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,275,335)"
+                transform="matrix(1,0,0,1,275,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-785"
                     fill="rgba(0,0,0,1)"
@@ -8595,10 +8343,10 @@
               <g
                 id="g-svg-762"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,256.250000,335)"
+                transform="matrix(1,0,0,1,256.250000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-786"
                     fill="rgba(0,0,0,1)"
@@ -8621,10 +8369,10 @@
               <g
                 id="g-svg-763"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,237.500000,335)"
+                transform="matrix(1,0,0,1,237.500000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-787"
                     fill="rgba(0,0,0,1)"
@@ -8647,10 +8395,10 @@
               <g
                 id="g-svg-764"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,218.750000,335)"
+                transform="matrix(1,0,0,1,218.750000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-788"
                     fill="rgba(0,0,0,1)"
@@ -8673,10 +8421,10 @@
               <g
                 id="g-svg-765"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,200,335)"
+                transform="matrix(1,0,0,1,200,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-789"
                     fill="rgba(0,0,0,1)"
@@ -8699,10 +8447,10 @@
               <g
                 id="g-svg-766"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,181.250000,335)"
+                transform="matrix(1,0,0,1,181.250000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-790"
                     fill="rgba(0,0,0,1)"
@@ -8725,10 +8473,10 @@
               <g
                 id="g-svg-767"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,162.500000,335)"
+                transform="matrix(1,0,0,1,162.500000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-791"
                     fill="rgba(0,0,0,1)"
@@ -8751,10 +8499,10 @@
               <g
                 id="g-svg-768"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,143.750000,335)"
+                transform="matrix(1,0,0,1,143.750000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-792"
                     fill="rgba(0,0,0,1)"
@@ -8777,10 +8525,10 @@
               <g
                 id="g-svg-769"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,125,335)"
+                transform="matrix(1,0,0,1,125,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-793"
                     fill="rgba(0,0,0,1)"
@@ -8803,10 +8551,10 @@
               <g
                 id="g-svg-770"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,106.250000,335)"
+                transform="matrix(1,0,0,1,106.250000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-794"
                     fill="rgba(0,0,0,1)"
@@ -8829,10 +8577,10 @@
               <g
                 id="g-svg-771"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,87.500000,335)"
+                transform="matrix(1,0,0,1,87.500000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-795"
                     fill="rgba(0,0,0,1)"
@@ -8855,10 +8603,10 @@
               <g
                 id="g-svg-772"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,68.750000,335)"
+                transform="matrix(1,0,0,1,68.750000,335)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-796"
                     fill="rgba(0,0,0,1)"
@@ -8883,7 +8631,7 @@
           <g
             id="g-svg-797"
             fill="none"
-            transform="matrix(1,0,0,1,15.800000,378)"
+            transform="matrix(1,0,0,1,22.900000,366.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -8907,26 +8655,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-92" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-799"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-800"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-801"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,500,400)">
+        <g id="g-svg-92" fill="none">
+          <g id="g-svg-799" fill="none" class="axis-grid-group">
+            <g id="g-svg-800" fill="none" class="axis-grid">
+              <g id="g-svg-801" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-803"
                     fill="none"
@@ -8934,10 +8667,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,400 L 500,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,481.250000,400)">
+                <g>
                   <path
                     id="g-svg-804"
                     fill="none"
@@ -8945,10 +8678,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 481.25,400 L 481.25,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,400)">
+                <g>
                   <path
                     id="g-svg-805"
                     fill="none"
@@ -8956,10 +8689,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,400 L 462.5,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,443.750000,400)">
+                <g>
                   <path
                     id="g-svg-806"
                     fill="none"
@@ -8967,10 +8700,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 443.75,400 L 443.75,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,400)">
+                <g>
                   <path
                     id="g-svg-807"
                     fill="none"
@@ -8978,10 +8711,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 425,400 L 425,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,406.250000,400)">
+                <g>
                   <path
                     id="g-svg-808"
                     fill="none"
@@ -8989,10 +8722,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 406.25,400 L 406.25,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,400)">
+                <g>
                   <path
                     id="g-svg-809"
                     fill="none"
@@ -9000,10 +8733,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,400 L 387.5,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,368.750000,400)">
+                <g>
                   <path
                     id="g-svg-810"
                     fill="none"
@@ -9011,10 +8744,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 368.75,400 L 368.75,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,400)">
+                <g>
                   <path
                     id="g-svg-811"
                     fill="none"
@@ -9022,10 +8755,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,400 L 350,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,331.250000,400)">
+                <g>
                   <path
                     id="g-svg-812"
                     fill="none"
@@ -9033,10 +8766,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 331.25,400 L 331.25,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,400)">
+                <g>
                   <path
                     id="g-svg-813"
                     fill="none"
@@ -9044,10 +8777,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.5,400 L 312.5,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,400)">
+                <g>
                   <path
                     id="g-svg-814"
                     fill="none"
@@ -9055,10 +8788,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,400 L 293.75,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,400)">
+                <g>
                   <path
                     id="g-svg-815"
                     fill="none"
@@ -9066,10 +8799,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,400 L 275,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,256.250000,400)">
+                <g>
                   <path
                     id="g-svg-816"
                     fill="none"
@@ -9077,10 +8810,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 256.25,400 L 256.25,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,400)">
+                <g>
                   <path
                     id="g-svg-817"
                     fill="none"
@@ -9088,10 +8821,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.50000000000006,400 L 237.50000000000006,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,218.750000,400)">
+                <g>
                   <path
                     id="g-svg-818"
                     fill="none"
@@ -9099,10 +8832,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 218.75,400 L 218.75,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,400)">
+                <g>
                   <path
                     id="g-svg-819"
                     fill="none"
@@ -9110,10 +8843,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,400 L 200,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,181.250000,400)">
+                <g>
                   <path
                     id="g-svg-820"
                     fill="none"
@@ -9121,10 +8854,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 181.25000000000006,400 L 181.25000000000006,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,400)">
+                <g>
                   <path
                     id="g-svg-821"
                     fill="none"
@@ -9132,10 +8865,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,400 L 162.5,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,143.750000,400)">
+                <g>
                   <path
                     id="g-svg-822"
                     fill="none"
@@ -9143,10 +8876,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 143.75,400 L 143.75,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,400)">
+                <g>
                   <path
                     id="g-svg-823"
                     fill="none"
@@ -9154,10 +8887,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125.00000000000006,400 L 125.00000000000006,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,106.250000,400)">
+                <g>
                   <path
                     id="g-svg-824"
                     fill="none"
@@ -9165,10 +8898,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 106.25,400 L 106.25,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,400)">
+                <g>
                   <path
                     id="g-svg-825"
                     fill="none"
@@ -9176,10 +8909,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,400 L 87.5,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,68.750000,400)">
+                <g>
                   <path
                     id="g-svg-826"
                     fill="none"
@@ -9187,74 +8920,53 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 68.75000000000006,400 L 68.75000000000006,400"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-802"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-802" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-827"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-828"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,400)">
+          <g id="g-svg-827" fill="none" class="axis-main-group">
+            <g id="g-svg-828" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-829"
                   fill="none"
-                  x1="450"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="500"
+                  y1="400"
+                  x2="35"
+                  y2="400"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,35,400)">
                   <path
                     id="g-svg-831"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-832"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-832" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-833"
                 fill="none"
                 transform="matrix(1,0,0,1,500,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-857"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9267,14 +8979,14 @@
                 transform="matrix(1,0,0,1,481.250000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-858"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9287,14 +8999,14 @@
                 transform="matrix(1,0,0,1,462.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-859"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9307,14 +9019,14 @@
                 transform="matrix(1,0,0,1,443.750000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-860"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9327,14 +9039,14 @@
                 transform="matrix(1,0,0,1,425,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-861"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9347,14 +9059,14 @@
                 transform="matrix(1,0,0,1,406.250000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-862"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9367,14 +9079,14 @@
                 transform="matrix(1,0,0,1,387.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-863"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9387,14 +9099,14 @@
                 transform="matrix(1,0,0,1,368.750000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-864"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9407,14 +9119,14 @@
                 transform="matrix(1,0,0,1,350,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-865"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9427,14 +9139,14 @@
                 transform="matrix(1,0,0,1,331.250000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-866"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9447,14 +9159,14 @@
                 transform="matrix(1,0,0,1,312.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-867"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9467,14 +9179,14 @@
                 transform="matrix(1,0,0,1,293.750000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-868"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9487,14 +9199,14 @@
                 transform="matrix(1,0,0,1,275,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-869"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9507,14 +9219,14 @@
                 transform="matrix(1,0,0,1,256.250000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-870"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9527,14 +9239,14 @@
                 transform="matrix(1,0,0,1,237.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-871"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9547,14 +9259,14 @@
                 transform="matrix(1,0,0,1,218.750000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-872"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9567,14 +9279,14 @@
                 transform="matrix(1,0,0,1,200,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-873"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9587,14 +9299,14 @@
                 transform="matrix(1,0,0,1,181.250000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-874"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9607,14 +9319,14 @@
                 transform="matrix(1,0,0,1,162.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-875"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9627,14 +9339,14 @@
                 transform="matrix(1,0,0,1,143.750000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-876"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9647,14 +9359,14 @@
                 transform="matrix(1,0,0,1,125,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-877"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9667,14 +9379,14 @@
                 transform="matrix(1,0,0,1,106.250000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-878"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9687,14 +9399,14 @@
                 transform="matrix(1,0,0,1,87.500000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-879"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9707,14 +9419,14 @@
                 transform="matrix(1,0,0,1,68.750000,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-880"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -9722,19 +9434,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-881"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-881" fill="none" class="axis-label-group">
               <g
                 id="g-svg-882"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,500,385)"
+                transform="matrix(1,0,0,1,500,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-906"
                     fill="rgba(0,0,0,1)"
@@ -9757,10 +9464,10 @@
               <g
                 id="g-svg-883"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,481.250000,385)"
+                transform="matrix(1,0,0,1,481.250000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-907"
                     fill="rgba(0,0,0,1)"
@@ -9783,10 +9490,10 @@
               <g
                 id="g-svg-884"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,462.500000,385)"
+                transform="matrix(1,0,0,1,462.500000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-908"
                     fill="rgba(0,0,0,1)"
@@ -9809,10 +9516,10 @@
               <g
                 id="g-svg-885"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,443.750000,385)"
+                transform="matrix(1,0,0,1,443.750000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-909"
                     fill="rgba(0,0,0,1)"
@@ -9835,10 +9542,10 @@
               <g
                 id="g-svg-886"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,425,385)"
+                transform="matrix(1,0,0,1,425,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-910"
                     fill="rgba(0,0,0,1)"
@@ -9861,10 +9568,10 @@
               <g
                 id="g-svg-887"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,406.250000,385)"
+                transform="matrix(1,0,0,1,406.250000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-911"
                     fill="rgba(0,0,0,1)"
@@ -9887,10 +9594,10 @@
               <g
                 id="g-svg-888"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,387.500000,385)"
+                transform="matrix(1,0,0,1,387.500000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-912"
                     fill="rgba(0,0,0,1)"
@@ -9913,10 +9620,10 @@
               <g
                 id="g-svg-889"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,368.750000,385)"
+                transform="matrix(1,0,0,1,368.750000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-913"
                     fill="rgba(0,0,0,1)"
@@ -9939,10 +9646,10 @@
               <g
                 id="g-svg-890"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,350,385)"
+                transform="matrix(1,0,0,1,350,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-914"
                     fill="rgba(0,0,0,1)"
@@ -9965,10 +9672,10 @@
               <g
                 id="g-svg-891"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,331.250000,385)"
+                transform="matrix(1,0,0,1,331.250000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-915"
                     fill="rgba(0,0,0,1)"
@@ -9991,10 +9698,10 @@
               <g
                 id="g-svg-892"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,312.500000,385)"
+                transform="matrix(1,0,0,1,312.500000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-916"
                     fill="rgba(0,0,0,1)"
@@ -10017,10 +9724,10 @@
               <g
                 id="g-svg-893"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,293.750000,385)"
+                transform="matrix(1,0,0,1,293.750000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-917"
                     fill="rgba(0,0,0,1)"
@@ -10043,10 +9750,10 @@
               <g
                 id="g-svg-894"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,275,385)"
+                transform="matrix(1,0,0,1,275,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-918"
                     fill="rgba(0,0,0,1)"
@@ -10069,10 +9776,10 @@
               <g
                 id="g-svg-895"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,256.250000,385)"
+                transform="matrix(1,0,0,1,256.250000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-919"
                     fill="rgba(0,0,0,1)"
@@ -10095,10 +9802,10 @@
               <g
                 id="g-svg-896"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,237.500000,385)"
+                transform="matrix(1,0,0,1,237.500000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-920"
                     fill="rgba(0,0,0,1)"
@@ -10121,10 +9828,10 @@
               <g
                 id="g-svg-897"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,218.750000,385)"
+                transform="matrix(1,0,0,1,218.750000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-921"
                     fill="rgba(0,0,0,1)"
@@ -10147,10 +9854,10 @@
               <g
                 id="g-svg-898"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,200,385)"
+                transform="matrix(1,0,0,1,200,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-922"
                     fill="rgba(0,0,0,1)"
@@ -10173,10 +9880,10 @@
               <g
                 id="g-svg-899"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,181.250000,385)"
+                transform="matrix(1,0,0,1,181.250000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-923"
                     fill="rgba(0,0,0,1)"
@@ -10199,10 +9906,10 @@
               <g
                 id="g-svg-900"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,162.500000,385)"
+                transform="matrix(1,0,0,1,162.500000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-924"
                     fill="rgba(0,0,0,1)"
@@ -10225,10 +9932,10 @@
               <g
                 id="g-svg-901"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,143.750000,385)"
+                transform="matrix(1,0,0,1,143.750000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-925"
                     fill="rgba(0,0,0,1)"
@@ -10251,10 +9958,10 @@
               <g
                 id="g-svg-902"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,125,385)"
+                transform="matrix(1,0,0,1,125,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-926"
                     fill="rgba(0,0,0,1)"
@@ -10277,10 +9984,10 @@
               <g
                 id="g-svg-903"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,106.250000,385)"
+                transform="matrix(1,0,0,1,106.250000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-927"
                     fill="rgba(0,0,0,1)"
@@ -10303,10 +10010,10 @@
               <g
                 id="g-svg-904"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,87.500000,385)"
+                transform="matrix(1,0,0,1,87.500000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-928"
                     fill="rgba(0,0,0,1)"
@@ -10329,10 +10036,10 @@
               <g
                 id="g-svg-905"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,68.750000,385)"
+                transform="matrix(1,0,0,1,68.750000,385)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-929"
                     fill="rgba(0,0,0,1)"
@@ -10357,7 +10064,7 @@
           <g
             id="g-svg-930"
             fill="none"
-            transform="matrix(1,0,0,1,15.800000,428)"
+            transform="matrix(1,0,0,1,22.900000,416.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -10381,26 +10088,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-93" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-932"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-933"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-934"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,500,450)">
+        <g id="g-svg-93" fill="none">
+          <g id="g-svg-932" fill="none" class="axis-grid-group">
+            <g id="g-svg-933" fill="none" class="axis-grid">
+              <g id="g-svg-934" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-936"
                     fill="none"
@@ -10408,10 +10100,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,450 L 500,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,481.250000,450)">
+                <g>
                   <path
                     id="g-svg-937"
                     fill="none"
@@ -10419,10 +10111,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 481.25,450 L 481.25,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,462.500000,450)">
+                <g>
                   <path
                     id="g-svg-938"
                     fill="none"
@@ -10430,10 +10122,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 462.5,450 L 462.5,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,443.750000,450)">
+                <g>
                   <path
                     id="g-svg-939"
                     fill="none"
@@ -10441,10 +10133,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 443.75,450 L 443.75,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,425,450)">
+                <g>
                   <path
                     id="g-svg-940"
                     fill="none"
@@ -10452,10 +10144,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 425,450 L 425,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,406.250000,450)">
+                <g>
                   <path
                     id="g-svg-941"
                     fill="none"
@@ -10463,10 +10155,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 406.25,450 L 406.25,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,387.500000,450)">
+                <g>
                   <path
                     id="g-svg-942"
                     fill="none"
@@ -10474,10 +10166,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 387.5,450 L 387.5,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,368.750000,450)">
+                <g>
                   <path
                     id="g-svg-943"
                     fill="none"
@@ -10485,10 +10177,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 368.75,450 L 368.75,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,450)">
+                <g>
                   <path
                     id="g-svg-944"
                     fill="none"
@@ -10496,10 +10188,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,450 L 350,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,331.250000,450)">
+                <g>
                   <path
                     id="g-svg-945"
                     fill="none"
@@ -10507,10 +10199,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 331.25,450 L 331.25,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,312.500000,450)">
+                <g>
                   <path
                     id="g-svg-946"
                     fill="none"
@@ -10518,10 +10210,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 312.5,450 L 312.5,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,450)">
+                <g>
                   <path
                     id="g-svg-947"
                     fill="none"
@@ -10529,10 +10221,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,450 L 293.75,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,450)">
+                <g>
                   <path
                     id="g-svg-948"
                     fill="none"
@@ -10540,10 +10232,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,450 L 275,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,256.250000,450)">
+                <g>
                   <path
                     id="g-svg-949"
                     fill="none"
@@ -10551,10 +10243,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 256.25,450 L 256.25,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,450)">
+                <g>
                   <path
                     id="g-svg-950"
                     fill="none"
@@ -10562,10 +10254,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.50000000000006,450 L 237.50000000000006,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,218.750000,450)">
+                <g>
                   <path
                     id="g-svg-951"
                     fill="none"
@@ -10573,10 +10265,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 218.75,450 L 218.75,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,450)">
+                <g>
                   <path
                     id="g-svg-952"
                     fill="none"
@@ -10584,10 +10276,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,450 L 200,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,181.250000,450)">
+                <g>
                   <path
                     id="g-svg-953"
                     fill="none"
@@ -10595,10 +10287,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 181.25000000000006,450 L 181.25000000000006,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,450)">
+                <g>
                   <path
                     id="g-svg-954"
                     fill="none"
@@ -10606,10 +10298,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,450 L 162.5,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,143.750000,450)">
+                <g>
                   <path
                     id="g-svg-955"
                     fill="none"
@@ -10617,10 +10309,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 143.75,450 L 143.75,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,450)">
+                <g>
                   <path
                     id="g-svg-956"
                     fill="none"
@@ -10628,10 +10320,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125.00000000000006,450 L 125.00000000000006,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,106.250000,450)">
+                <g>
                   <path
                     id="g-svg-957"
                     fill="none"
@@ -10639,10 +10331,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 106.25,450 L 106.25,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,450)">
+                <g>
                   <path
                     id="g-svg-958"
                     fill="none"
@@ -10650,10 +10342,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,450 L 87.5,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,68.750000,450)">
+                <g>
                   <path
                     id="g-svg-959"
                     fill="none"
@@ -10661,74 +10353,53 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 68.75000000000006,450 L 68.75000000000006,450"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-935"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-935" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-960"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-961"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,450)">
+          <g id="g-svg-960" fill="none" class="axis-main-group">
+            <g id="g-svg-961" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-962"
                   fill="none"
-                  x1="450"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="500"
+                  y1="450"
+                  x2="35"
+                  y2="450"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,35,450)">
                   <path
                     id="g-svg-964"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-965"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-965" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-966"
                 fill="none"
                 transform="matrix(1,0,0,1,500,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-990"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10741,14 +10412,14 @@
                 transform="matrix(1,0,0,1,481.250000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-991"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10761,14 +10432,14 @@
                 transform="matrix(1,0,0,1,462.500000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-992"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10781,14 +10452,14 @@
                 transform="matrix(1,0,0,1,443.750000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-993"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10801,14 +10472,14 @@
                 transform="matrix(1,0,0,1,425,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-994"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10821,14 +10492,14 @@
                 transform="matrix(1,0,0,1,406.250000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-995"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10841,14 +10512,14 @@
                 transform="matrix(1,0,0,1,387.500000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-996"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10861,14 +10532,14 @@
                 transform="matrix(1,0,0,1,368.750000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-997"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10881,14 +10552,14 @@
                 transform="matrix(1,0,0,1,350,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-998"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10901,14 +10572,14 @@
                 transform="matrix(1,0,0,1,331.250000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-999"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10921,14 +10592,14 @@
                 transform="matrix(1,0,0,1,312.500000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1000"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10941,14 +10612,14 @@
                 transform="matrix(1,0,0,1,293.750000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1001"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10961,14 +10632,14 @@
                 transform="matrix(1,0,0,1,275,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1002"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -10981,14 +10652,14 @@
                 transform="matrix(1,0,0,1,256.250000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1003"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -11001,14 +10672,14 @@
                 transform="matrix(1,0,0,1,237.500000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1004"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -11021,14 +10692,14 @@
                 transform="matrix(1,0,0,1,218.750000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1005"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -11041,14 +10712,14 @@
                 transform="matrix(1,0,0,1,200,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1006"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -11061,14 +10732,14 @@
                 transform="matrix(1,0,0,1,181.250000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1007"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -11081,14 +10752,14 @@
                 transform="matrix(1,0,0,1,162.500000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1008"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -11101,14 +10772,14 @@
                 transform="matrix(1,0,0,1,143.750000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1009"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -11121,14 +10792,14 @@
                 transform="matrix(1,0,0,1,125,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1010"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -11141,14 +10812,14 @@
                 transform="matrix(1,0,0,1,106.250000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1011"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -11161,14 +10832,14 @@
                 transform="matrix(1,0,0,1,87.500000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1012"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -11181,14 +10852,14 @@
                 transform="matrix(1,0,0,1,68.750000,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-1013"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -11196,19 +10867,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1014"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-1014" fill="none" class="axis-label-group">
               <g
                 id="g-svg-1015"
                 fill="none"
-                transform="matrix(0,1,-1,0,500,435)"
+                transform="matrix(1,0,0,1,500,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1039"
                     fill="rgba(0,0,0,1)"
@@ -11231,10 +10897,10 @@
               <g
                 id="g-svg-1016"
                 fill="none"
-                transform="matrix(0,1,-1,0,481.250000,435)"
+                transform="matrix(1,0,0,1,481.250000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1040"
                     fill="rgba(0,0,0,1)"
@@ -11257,10 +10923,10 @@
               <g
                 id="g-svg-1017"
                 fill="none"
-                transform="matrix(0,1,-1,0,462.500000,435)"
+                transform="matrix(1,0,0,1,462.500000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1041"
                     fill="rgba(0,0,0,1)"
@@ -11283,10 +10949,10 @@
               <g
                 id="g-svg-1018"
                 fill="none"
-                transform="matrix(0,1,-1,0,443.750000,435)"
+                transform="matrix(1,0,0,1,443.750000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1042"
                     fill="rgba(0,0,0,1)"
@@ -11309,10 +10975,10 @@
               <g
                 id="g-svg-1019"
                 fill="none"
-                transform="matrix(0,1,-1,0,425,435)"
+                transform="matrix(1,0,0,1,425,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1043"
                     fill="rgba(0,0,0,1)"
@@ -11335,10 +11001,10 @@
               <g
                 id="g-svg-1020"
                 fill="none"
-                transform="matrix(0,1,-1,0,406.250000,435)"
+                transform="matrix(1,0,0,1,406.250000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1044"
                     fill="rgba(0,0,0,1)"
@@ -11361,10 +11027,10 @@
               <g
                 id="g-svg-1021"
                 fill="none"
-                transform="matrix(0,1,-1,0,387.500000,435)"
+                transform="matrix(1,0,0,1,387.500000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1045"
                     fill="rgba(0,0,0,1)"
@@ -11387,10 +11053,10 @@
               <g
                 id="g-svg-1022"
                 fill="none"
-                transform="matrix(0,1,-1,0,368.750000,435)"
+                transform="matrix(1,0,0,1,368.750000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1046"
                     fill="rgba(0,0,0,1)"
@@ -11413,10 +11079,10 @@
               <g
                 id="g-svg-1023"
                 fill="none"
-                transform="matrix(0,1,-1,0,350,435)"
+                transform="matrix(1,0,0,1,350,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1047"
                     fill="rgba(0,0,0,1)"
@@ -11439,10 +11105,10 @@
               <g
                 id="g-svg-1024"
                 fill="none"
-                transform="matrix(0,1,-1,0,331.250000,435)"
+                transform="matrix(1,0,0,1,331.250000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1048"
                     fill="rgba(0,0,0,1)"
@@ -11465,10 +11131,10 @@
               <g
                 id="g-svg-1025"
                 fill="none"
-                transform="matrix(0,1,-1,0,312.500000,435)"
+                transform="matrix(1,0,0,1,312.500000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1049"
                     fill="rgba(0,0,0,1)"
@@ -11491,10 +11157,10 @@
               <g
                 id="g-svg-1026"
                 fill="none"
-                transform="matrix(0,1,-1,0,293.750000,435)"
+                transform="matrix(1,0,0,1,293.750000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1050"
                     fill="rgba(0,0,0,1)"
@@ -11517,10 +11183,10 @@
               <g
                 id="g-svg-1027"
                 fill="none"
-                transform="matrix(0,1,-1,0,275,435)"
+                transform="matrix(1,0,0,1,275,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1051"
                     fill="rgba(0,0,0,1)"
@@ -11543,10 +11209,10 @@
               <g
                 id="g-svg-1028"
                 fill="none"
-                transform="matrix(0,1,-1,0,256.250000,435)"
+                transform="matrix(1,0,0,1,256.250000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1052"
                     fill="rgba(0,0,0,1)"
@@ -11569,10 +11235,10 @@
               <g
                 id="g-svg-1029"
                 fill="none"
-                transform="matrix(0,1,-1,0,237.500000,435)"
+                transform="matrix(1,0,0,1,237.500000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1053"
                     fill="rgba(0,0,0,1)"
@@ -11595,10 +11261,10 @@
               <g
                 id="g-svg-1030"
                 fill="none"
-                transform="matrix(0,1,-1,0,218.750000,435)"
+                transform="matrix(1,0,0,1,218.750000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1054"
                     fill="rgba(0,0,0,1)"
@@ -11621,10 +11287,10 @@
               <g
                 id="g-svg-1031"
                 fill="none"
-                transform="matrix(0,1,-1,0,200,435)"
+                transform="matrix(1,0,0,1,200,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1055"
                     fill="rgba(0,0,0,1)"
@@ -11647,10 +11313,10 @@
               <g
                 id="g-svg-1032"
                 fill="none"
-                transform="matrix(0,1,-1,0,181.250000,435)"
+                transform="matrix(1,0,0,1,181.250000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1056"
                     fill="rgba(0,0,0,1)"
@@ -11673,10 +11339,10 @@
               <g
                 id="g-svg-1033"
                 fill="none"
-                transform="matrix(0,1,-1,0,162.500000,435)"
+                transform="matrix(1,0,0,1,162.500000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1057"
                     fill="rgba(0,0,0,1)"
@@ -11699,10 +11365,10 @@
               <g
                 id="g-svg-1034"
                 fill="none"
-                transform="matrix(0,1,-1,0,143.750000,435)"
+                transform="matrix(1,0,0,1,143.750000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1058"
                     fill="rgba(0,0,0,1)"
@@ -11725,10 +11391,10 @@
               <g
                 id="g-svg-1035"
                 fill="none"
-                transform="matrix(0,1,-1,0,125,435)"
+                transform="matrix(1,0,0,1,125,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1059"
                     fill="rgba(0,0,0,1)"
@@ -11751,10 +11417,10 @@
               <g
                 id="g-svg-1036"
                 fill="none"
-                transform="matrix(0,1,-1,0,106.250000,435)"
+                transform="matrix(1,0,0,1,106.250000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1060"
                     fill="rgba(0,0,0,1)"
@@ -11777,10 +11443,10 @@
               <g
                 id="g-svg-1037"
                 fill="none"
-                transform="matrix(0,1,-1,0,87.500000,435)"
+                transform="matrix(1,0,0,1,87.500000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1061"
                     fill="rgba(0,0,0,1)"
@@ -11803,10 +11469,10 @@
               <g
                 id="g-svg-1038"
                 fill="none"
-                transform="matrix(0,1,-1,0,68.750000,435)"
+                transform="matrix(1,0,0,1,68.750000,435)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1062"
                     fill="rgba(0,0,0,1)"
@@ -11831,7 +11497,7 @@
           <g
             id="g-svg-1063"
             fill="none"
-            transform="matrix(1,0,0,1,15.800000,478)"
+            transform="matrix(1,0,0,1,22.900000,466.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -11855,26 +11521,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-94" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1065"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-1066"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-1067"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,600,50)">
+        <g id="g-svg-94" fill="none">
+          <g id="g-svg-1065" fill="none" class="axis-grid-group">
+            <g id="g-svg-1066" fill="none" class="axis-grid">
+              <g id="g-svg-1067" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-1069"
                     fill="none"
@@ -11882,10 +11533,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,50 L 600,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,66.666664)">
+                <g>
                   <path
                     id="g-svg-1070"
                     fill="none"
@@ -11893,10 +11544,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,66.66666666666666 L 600,66.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,83.333336)">
+                <g>
                   <path
                     id="g-svg-1071"
                     fill="none"
@@ -11904,10 +11555,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,83.33333333333333 L 600,83.33333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,100)">
+                <g>
                   <path
                     id="g-svg-1072"
                     fill="none"
@@ -11915,10 +11566,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,100 L 600,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,116.666664)">
+                <g>
                   <path
                     id="g-svg-1073"
                     fill="none"
@@ -11926,10 +11577,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,116.66666666666666 L 600,116.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,133.333328)">
+                <g>
                   <path
                     id="g-svg-1074"
                     fill="none"
@@ -11937,10 +11588,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,133.33333333333331 L 600,133.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,150)">
+                <g>
                   <path
                     id="g-svg-1075"
                     fill="none"
@@ -11948,10 +11599,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,150 L 600,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,166.666672)">
+                <g>
                   <path
                     id="g-svg-1076"
                     fill="none"
@@ -11959,10 +11610,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,166.66666666666666 L 600,166.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,183.333328)">
+                <g>
                   <path
                     id="g-svg-1077"
                     fill="none"
@@ -11970,10 +11621,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,183.33333333333331 L 600,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,200)">
+                <g>
                   <path
                     id="g-svg-1078"
                     fill="none"
@@ -11981,10 +11632,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,200 L 600,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,216.666672)">
+                <g>
                   <path
                     id="g-svg-1079"
                     fill="none"
@@ -11992,10 +11643,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,216.66666666666666 L 600,216.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,233.333328)">
+                <g>
                   <path
                     id="g-svg-1080"
                     fill="none"
@@ -12003,10 +11654,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,233.33333333333331 L 600,233.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,250)">
+                <g>
                   <path
                     id="g-svg-1081"
                     fill="none"
@@ -12014,10 +11665,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,250 L 600,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,266.666656)">
+                <g>
                   <path
                     id="g-svg-1082"
                     fill="none"
@@ -12025,10 +11676,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,266.66666666666663 L 600,266.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,283.333344)">
+                <g>
                   <path
                     id="g-svg-1083"
                     fill="none"
@@ -12036,10 +11687,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,283.3333333333333 L 600,283.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,300)">
+                <g>
                   <path
                     id="g-svg-1084"
                     fill="none"
@@ -12047,10 +11698,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,300 L 600,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,316.666656)">
+                <g>
                   <path
                     id="g-svg-1085"
                     fill="none"
@@ -12058,10 +11709,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,316.66666666666663 L 600,316.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,333.333344)">
+                <g>
                   <path
                     id="g-svg-1086"
                     fill="none"
@@ -12069,10 +11720,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,333.3333333333333 L 600,333.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,350)">
+                <g>
                   <path
                     id="g-svg-1087"
                     fill="none"
@@ -12080,10 +11731,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,350 L 600,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,366.666656)">
+                <g>
                   <path
                     id="g-svg-1088"
                     fill="none"
@@ -12091,10 +11742,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,366.66666666666663 L 600,366.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,383.333344)">
+                <g>
                   <path
                     id="g-svg-1089"
                     fill="none"
@@ -12102,10 +11753,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,383.3333333333333 L 600,383.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,400)">
+                <g>
                   <path
                     id="g-svg-1090"
                     fill="none"
@@ -12113,10 +11764,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,400 L 600,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,416.666656)">
+                <g>
                   <path
                     id="g-svg-1091"
                     fill="none"
@@ -12124,10 +11775,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,416.66666666666663 L 600,416.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,433.333344)">
+                <g>
                   <path
                     id="g-svg-1092"
                     fill="none"
@@ -12135,73 +11786,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,433.3333333333333 L 600,433.3333333333333"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-1068"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-1068" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-1093"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-1094"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,600,50)">
+          <g id="g-svg-1093" fill="none" class="axis-main-group">
+            <g id="g-svg-1094" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-1095"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="415"
+                  x1="600"
+                  y1="50"
+                  x2="600"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,415)">
+                <g transform="matrix(0,-0.500000,0.500000,0,600,465)">
                   <path
                     id="g-svg-1097"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1098"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-1098" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-1099"
                 fill="none"
                 transform="matrix(1,0,0,1,600,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1123"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12215,13 +11845,13 @@
                 transform="matrix(1,0,0,1,600,66.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1124"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12235,13 +11865,13 @@
                 transform="matrix(1,0,0,1,600,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1125"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12255,13 +11885,13 @@
                 transform="matrix(1,0,0,1,600,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1126"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12275,13 +11905,13 @@
                 transform="matrix(1,0,0,1,600,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1127"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12295,13 +11925,13 @@
                 transform="matrix(1,0,0,1,600,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1128"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12315,13 +11945,13 @@
                 transform="matrix(1,0,0,1,600,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1129"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12335,13 +11965,13 @@
                 transform="matrix(1,0,0,1,600,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1130"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12355,13 +11985,13 @@
                 transform="matrix(1,0,0,1,600,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1131"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12375,13 +12005,13 @@
                 transform="matrix(1,0,0,1,600,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1132"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12395,13 +12025,13 @@
                 transform="matrix(1,0,0,1,600,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1133"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12415,13 +12045,13 @@
                 transform="matrix(1,0,0,1,600,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1134"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12435,13 +12065,13 @@
                 transform="matrix(1,0,0,1,600,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1135"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12455,13 +12085,13 @@
                 transform="matrix(1,0,0,1,600,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1136"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12475,13 +12105,13 @@
                 transform="matrix(1,0,0,1,600,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1137"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12495,13 +12125,13 @@
                 transform="matrix(1,0,0,1,600,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1138"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12515,13 +12145,13 @@
                 transform="matrix(1,0,0,1,600,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1139"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12535,13 +12165,13 @@
                 transform="matrix(1,0,0,1,600,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1140"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12555,13 +12185,13 @@
                 transform="matrix(1,0,0,1,600,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1141"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12575,13 +12205,13 @@
                 transform="matrix(1,0,0,1,600,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1142"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12595,13 +12225,13 @@
                 transform="matrix(1,0,0,1,600,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1143"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12615,13 +12245,13 @@
                 transform="matrix(1,0,0,1,600,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1144"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12635,13 +12265,13 @@
                 transform="matrix(1,0,0,1,600,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1145"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12655,13 +12285,13 @@
                 transform="matrix(1,0,0,1,600,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1146"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -12670,19 +12300,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1147"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-1147" fill="none" class="axis-label-group">
               <g
                 id="g-svg-1148"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,50)"
+                transform="matrix(1,0,0,1,585,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1172"
                     fill="rgba(0,0,0,1)"
@@ -12705,10 +12330,10 @@
               <g
                 id="g-svg-1149"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,66.666664)"
+                transform="matrix(1,0,0,1,585,66.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1173"
                     fill="rgba(0,0,0,1)"
@@ -12731,10 +12356,10 @@
               <g
                 id="g-svg-1150"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,83.333336)"
+                transform="matrix(1,0,0,1,585,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1174"
                     fill="rgba(0,0,0,1)"
@@ -12757,10 +12382,10 @@
               <g
                 id="g-svg-1151"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,100)"
+                transform="matrix(1,0,0,1,585,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1175"
                     fill="rgba(0,0,0,1)"
@@ -12783,10 +12408,10 @@
               <g
                 id="g-svg-1152"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,116.666664)"
+                transform="matrix(1,0,0,1,585,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1176"
                     fill="rgba(0,0,0,1)"
@@ -12809,10 +12434,10 @@
               <g
                 id="g-svg-1153"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,133.333328)"
+                transform="matrix(1,0,0,1,585,133.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1177"
                     fill="rgba(0,0,0,1)"
@@ -12835,10 +12460,10 @@
               <g
                 id="g-svg-1154"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,150)"
+                transform="matrix(1,0,0,1,585,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1178"
                     fill="rgba(0,0,0,1)"
@@ -12861,10 +12486,10 @@
               <g
                 id="g-svg-1155"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,166.666672)"
+                transform="matrix(1,0,0,1,585,166.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1179"
                     fill="rgba(0,0,0,1)"
@@ -12887,10 +12512,10 @@
               <g
                 id="g-svg-1156"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,183.333328)"
+                transform="matrix(1,0,0,1,585,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1180"
                     fill="rgba(0,0,0,1)"
@@ -12913,10 +12538,10 @@
               <g
                 id="g-svg-1157"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,200)"
+                transform="matrix(1,0,0,1,585,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1181"
                     fill="rgba(0,0,0,1)"
@@ -12939,10 +12564,10 @@
               <g
                 id="g-svg-1158"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,216.666672)"
+                transform="matrix(1,0,0,1,585,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1182"
                     fill="rgba(0,0,0,1)"
@@ -12965,10 +12590,10 @@
               <g
                 id="g-svg-1159"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,233.333328)"
+                transform="matrix(1,0,0,1,585,233.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1183"
                     fill="rgba(0,0,0,1)"
@@ -12991,10 +12616,10 @@
               <g
                 id="g-svg-1160"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,250)"
+                transform="matrix(1,0,0,1,585,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1184"
                     fill="rgba(0,0,0,1)"
@@ -13017,10 +12642,10 @@
               <g
                 id="g-svg-1161"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,266.666656)"
+                transform="matrix(1,0,0,1,585,266.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1185"
                     fill="rgba(0,0,0,1)"
@@ -13043,10 +12668,10 @@
               <g
                 id="g-svg-1162"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,283.333344)"
+                transform="matrix(1,0,0,1,585,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1186"
                     fill="rgba(0,0,0,1)"
@@ -13069,10 +12694,10 @@
               <g
                 id="g-svg-1163"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,300)"
+                transform="matrix(1,0,0,1,585,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1187"
                     fill="rgba(0,0,0,1)"
@@ -13095,10 +12720,10 @@
               <g
                 id="g-svg-1164"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,316.666656)"
+                transform="matrix(1,0,0,1,585,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1188"
                     fill="rgba(0,0,0,1)"
@@ -13121,10 +12746,10 @@
               <g
                 id="g-svg-1165"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,333.333344)"
+                transform="matrix(1,0,0,1,585,333.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1189"
                     fill="rgba(0,0,0,1)"
@@ -13147,10 +12772,10 @@
               <g
                 id="g-svg-1166"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,350)"
+                transform="matrix(1,0,0,1,585,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1190"
                     fill="rgba(0,0,0,1)"
@@ -13173,10 +12798,10 @@
               <g
                 id="g-svg-1167"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,366.666656)"
+                transform="matrix(1,0,0,1,585,366.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1191"
                     fill="rgba(0,0,0,1)"
@@ -13199,10 +12824,10 @@
               <g
                 id="g-svg-1168"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,383.333344)"
+                transform="matrix(1,0,0,1,585,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1192"
                     fill="rgba(0,0,0,1)"
@@ -13225,10 +12850,10 @@
               <g
                 id="g-svg-1169"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,400)"
+                transform="matrix(1,0,0,1,585,400)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1193"
                     fill="rgba(0,0,0,1)"
@@ -13251,10 +12876,10 @@
               <g
                 id="g-svg-1170"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,416.666656)"
+                transform="matrix(1,0,0,1,585,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1194"
                     fill="rgba(0,0,0,1)"
@@ -13277,10 +12902,10 @@
               <g
                 id="g-svg-1171"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,585,433.333344)"
+                transform="matrix(1,0,0,1,585,433.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-1195"
                     fill="rgba(0,0,0,1)"
@@ -13305,7 +12930,7 @@
           <g
             id="g-svg-1196"
             fill="none"
-            transform="matrix(1,0,0,1,559.299988,493)"
+            transform="matrix(1,0,0,1,566.400024,481.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -13329,26 +12954,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-95" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1198"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-1199"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-1200"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,650,50)">
+        <g id="g-svg-95" fill="none">
+          <g id="g-svg-1198" fill="none" class="axis-grid-group">
+            <g id="g-svg-1199" fill="none" class="axis-grid">
+              <g id="g-svg-1200" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-1202"
                     fill="none"
@@ -13356,10 +12966,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,50 L 650,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,66.666664)">
+                <g>
                   <path
                     id="g-svg-1203"
                     fill="none"
@@ -13367,10 +12977,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,66.66666666666666 L 650,66.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,83.333336)">
+                <g>
                   <path
                     id="g-svg-1204"
                     fill="none"
@@ -13378,10 +12988,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,83.33333333333333 L 650,83.33333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,100)">
+                <g>
                   <path
                     id="g-svg-1205"
                     fill="none"
@@ -13389,10 +12999,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,100 L 650,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,116.666664)">
+                <g>
                   <path
                     id="g-svg-1206"
                     fill="none"
@@ -13400,10 +13010,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,116.66666666666666 L 650,116.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,133.333328)">
+                <g>
                   <path
                     id="g-svg-1207"
                     fill="none"
@@ -13411,10 +13021,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,133.33333333333331 L 650,133.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,150)">
+                <g>
                   <path
                     id="g-svg-1208"
                     fill="none"
@@ -13422,10 +13032,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,150 L 650,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,166.666672)">
+                <g>
                   <path
                     id="g-svg-1209"
                     fill="none"
@@ -13433,10 +13043,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,166.66666666666666 L 650,166.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,183.333328)">
+                <g>
                   <path
                     id="g-svg-1210"
                     fill="none"
@@ -13444,10 +13054,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,183.33333333333331 L 650,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,200)">
+                <g>
                   <path
                     id="g-svg-1211"
                     fill="none"
@@ -13455,10 +13065,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,200 L 650,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,216.666672)">
+                <g>
                   <path
                     id="g-svg-1212"
                     fill="none"
@@ -13466,10 +13076,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,216.66666666666666 L 650,216.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,233.333328)">
+                <g>
                   <path
                     id="g-svg-1213"
                     fill="none"
@@ -13477,10 +13087,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,233.33333333333331 L 650,233.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,250)">
+                <g>
                   <path
                     id="g-svg-1214"
                     fill="none"
@@ -13488,10 +13098,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,250 L 650,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,266.666656)">
+                <g>
                   <path
                     id="g-svg-1215"
                     fill="none"
@@ -13499,10 +13109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,266.66666666666663 L 650,266.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,283.333344)">
+                <g>
                   <path
                     id="g-svg-1216"
                     fill="none"
@@ -13510,10 +13120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,283.3333333333333 L 650,283.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,300)">
+                <g>
                   <path
                     id="g-svg-1217"
                     fill="none"
@@ -13521,10 +13131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,300 L 650,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,316.666656)">
+                <g>
                   <path
                     id="g-svg-1218"
                     fill="none"
@@ -13532,10 +13142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,316.66666666666663 L 650,316.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,333.333344)">
+                <g>
                   <path
                     id="g-svg-1219"
                     fill="none"
@@ -13543,10 +13153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,333.3333333333333 L 650,333.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,350)">
+                <g>
                   <path
                     id="g-svg-1220"
                     fill="none"
@@ -13554,10 +13164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,350 L 650,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,366.666656)">
+                <g>
                   <path
                     id="g-svg-1221"
                     fill="none"
@@ -13565,10 +13175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,366.66666666666663 L 650,366.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,383.333344)">
+                <g>
                   <path
                     id="g-svg-1222"
                     fill="none"
@@ -13576,10 +13186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,383.3333333333333 L 650,383.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,400)">
+                <g>
                   <path
                     id="g-svg-1223"
                     fill="none"
@@ -13587,10 +13197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,400 L 650,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,416.666656)">
+                <g>
                   <path
                     id="g-svg-1224"
                     fill="none"
@@ -13598,10 +13208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,416.66666666666663 L 650,416.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,433.333344)">
+                <g>
                   <path
                     id="g-svg-1225"
                     fill="none"
@@ -13609,73 +13219,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,433.3333333333333 L 650,433.3333333333333"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-1201"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-1201" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-1226"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-1227"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,650,50)">
+          <g id="g-svg-1226" fill="none" class="axis-main-group">
+            <g id="g-svg-1227" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-1228"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="415"
+                  x1="650"
+                  y1="50"
+                  x2="650"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,415)">
+                <g transform="matrix(0,-0.500000,0.500000,0,650,465)">
                   <path
                     id="g-svg-1230"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1231"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-1231" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-1232"
                 fill="none"
                 transform="matrix(1,0,0,1,650,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1256"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13689,13 +13278,13 @@
                 transform="matrix(1,0,0,1,650,66.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1257"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13709,13 +13298,13 @@
                 transform="matrix(1,0,0,1,650,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1258"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13729,13 +13318,13 @@
                 transform="matrix(1,0,0,1,650,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1259"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13749,13 +13338,13 @@
                 transform="matrix(1,0,0,1,650,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1260"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13769,13 +13358,13 @@
                 transform="matrix(1,0,0,1,650,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1261"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13789,13 +13378,13 @@
                 transform="matrix(1,0,0,1,650,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1262"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13809,13 +13398,13 @@
                 transform="matrix(1,0,0,1,650,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1263"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13829,13 +13418,13 @@
                 transform="matrix(1,0,0,1,650,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1264"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13849,13 +13438,13 @@
                 transform="matrix(1,0,0,1,650,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1265"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13869,13 +13458,13 @@
                 transform="matrix(1,0,0,1,650,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1266"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13889,13 +13478,13 @@
                 transform="matrix(1,0,0,1,650,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1267"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13909,13 +13498,13 @@
                 transform="matrix(1,0,0,1,650,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1268"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13929,13 +13518,13 @@
                 transform="matrix(1,0,0,1,650,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1269"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13949,13 +13538,13 @@
                 transform="matrix(1,0,0,1,650,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1270"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13969,13 +13558,13 @@
                 transform="matrix(1,0,0,1,650,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1271"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -13989,13 +13578,13 @@
                 transform="matrix(1,0,0,1,650,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1272"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -14009,13 +13598,13 @@
                 transform="matrix(1,0,0,1,650,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1273"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -14029,13 +13618,13 @@
                 transform="matrix(1,0,0,1,650,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1274"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -14049,13 +13638,13 @@
                 transform="matrix(1,0,0,1,650,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1275"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -14069,13 +13658,13 @@
                 transform="matrix(1,0,0,1,650,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1276"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -14089,13 +13678,13 @@
                 transform="matrix(1,0,0,1,650,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1277"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -14109,13 +13698,13 @@
                 transform="matrix(1,0,0,1,650,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1278"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -14129,13 +13718,13 @@
                 transform="matrix(1,0,0,1,650,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1279"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -14144,19 +13733,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1280"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-1280" fill="none" class="axis-label-group">
               <g
                 id="g-svg-1281"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,50)"
+                transform="matrix(1,0,0,1,635,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1305"
                     fill="rgba(0,0,0,1)"
@@ -14179,10 +13763,10 @@
               <g
                 id="g-svg-1282"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,66.666664)"
+                transform="matrix(1,0,0,1,635,66.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1306"
                     fill="rgba(0,0,0,1)"
@@ -14205,10 +13789,10 @@
               <g
                 id="g-svg-1283"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,83.333336)"
+                transform="matrix(1,0,0,1,635,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1307"
                     fill="rgba(0,0,0,1)"
@@ -14231,10 +13815,10 @@
               <g
                 id="g-svg-1284"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,100)"
+                transform="matrix(1,0,0,1,635,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1308"
                     fill="rgba(0,0,0,1)"
@@ -14257,10 +13841,10 @@
               <g
                 id="g-svg-1285"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,116.666664)"
+                transform="matrix(1,0,0,1,635,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1309"
                     fill="rgba(0,0,0,1)"
@@ -14283,10 +13867,10 @@
               <g
                 id="g-svg-1286"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,133.333328)"
+                transform="matrix(1,0,0,1,635,133.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1310"
                     fill="rgba(0,0,0,1)"
@@ -14309,10 +13893,10 @@
               <g
                 id="g-svg-1287"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,150)"
+                transform="matrix(1,0,0,1,635,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1311"
                     fill="rgba(0,0,0,1)"
@@ -14335,10 +13919,10 @@
               <g
                 id="g-svg-1288"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,166.666672)"
+                transform="matrix(1,0,0,1,635,166.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1312"
                     fill="rgba(0,0,0,1)"
@@ -14361,10 +13945,10 @@
               <g
                 id="g-svg-1289"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,183.333328)"
+                transform="matrix(1,0,0,1,635,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1313"
                     fill="rgba(0,0,0,1)"
@@ -14387,10 +13971,10 @@
               <g
                 id="g-svg-1290"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,200)"
+                transform="matrix(1,0,0,1,635,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1314"
                     fill="rgba(0,0,0,1)"
@@ -14413,10 +13997,10 @@
               <g
                 id="g-svg-1291"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,216.666672)"
+                transform="matrix(1,0,0,1,635,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1315"
                     fill="rgba(0,0,0,1)"
@@ -14439,10 +14023,10 @@
               <g
                 id="g-svg-1292"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,233.333328)"
+                transform="matrix(1,0,0,1,635,233.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1316"
                     fill="rgba(0,0,0,1)"
@@ -14465,10 +14049,10 @@
               <g
                 id="g-svg-1293"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,250)"
+                transform="matrix(1,0,0,1,635,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1317"
                     fill="rgba(0,0,0,1)"
@@ -14491,10 +14075,10 @@
               <g
                 id="g-svg-1294"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,266.666656)"
+                transform="matrix(1,0,0,1,635,266.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1318"
                     fill="rgba(0,0,0,1)"
@@ -14517,10 +14101,10 @@
               <g
                 id="g-svg-1295"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,283.333344)"
+                transform="matrix(1,0,0,1,635,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1319"
                     fill="rgba(0,0,0,1)"
@@ -14543,10 +14127,10 @@
               <g
                 id="g-svg-1296"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,300)"
+                transform="matrix(1,0,0,1,635,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1320"
                     fill="rgba(0,0,0,1)"
@@ -14569,10 +14153,10 @@
               <g
                 id="g-svg-1297"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,316.666656)"
+                transform="matrix(1,0,0,1,635,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1321"
                     fill="rgba(0,0,0,1)"
@@ -14595,10 +14179,10 @@
               <g
                 id="g-svg-1298"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,333.333344)"
+                transform="matrix(1,0,0,1,635,333.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1322"
                     fill="rgba(0,0,0,1)"
@@ -14621,10 +14205,10 @@
               <g
                 id="g-svg-1299"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,350)"
+                transform="matrix(1,0,0,1,635,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1323"
                     fill="rgba(0,0,0,1)"
@@ -14647,10 +14231,10 @@
               <g
                 id="g-svg-1300"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,366.666656)"
+                transform="matrix(1,0,0,1,635,366.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1324"
                     fill="rgba(0,0,0,1)"
@@ -14673,10 +14257,10 @@
               <g
                 id="g-svg-1301"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,383.333344)"
+                transform="matrix(1,0,0,1,635,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1325"
                     fill="rgba(0,0,0,1)"
@@ -14699,10 +14283,10 @@
               <g
                 id="g-svg-1302"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,400)"
+                transform="matrix(1,0,0,1,635,400)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1326"
                     fill="rgba(0,0,0,1)"
@@ -14725,10 +14309,10 @@
               <g
                 id="g-svg-1303"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,416.666656)"
+                transform="matrix(1,0,0,1,635,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1327"
                     fill="rgba(0,0,0,1)"
@@ -14751,10 +14335,10 @@
               <g
                 id="g-svg-1304"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,635,433.333344)"
+                transform="matrix(1,0,0,1,635,433.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1328"
                     fill="rgba(0,0,0,1)"
@@ -14779,7 +14363,7 @@
           <g
             id="g-svg-1329"
             fill="none"
-            transform="matrix(1,0,0,1,594.934021,493)"
+            transform="matrix(1,0,0,1,602.034058,481.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -14803,26 +14387,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-96" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1331"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-1332"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-1333"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,700,50)">
+        <g id="g-svg-96" fill="none">
+          <g id="g-svg-1331" fill="none" class="axis-grid-group">
+            <g id="g-svg-1332" fill="none" class="axis-grid">
+              <g id="g-svg-1333" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-1335"
                     fill="none"
@@ -14830,10 +14399,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,50 L 700,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,66.666664)">
+                <g>
                   <path
                     id="g-svg-1336"
                     fill="none"
@@ -14841,10 +14410,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,66.66666666666666 L 700,66.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,83.333336)">
+                <g>
                   <path
                     id="g-svg-1337"
                     fill="none"
@@ -14852,10 +14421,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,83.33333333333333 L 700,83.33333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,100)">
+                <g>
                   <path
                     id="g-svg-1338"
                     fill="none"
@@ -14863,10 +14432,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,100 L 700,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,116.666664)">
+                <g>
                   <path
                     id="g-svg-1339"
                     fill="none"
@@ -14874,10 +14443,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,116.66666666666666 L 700,116.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,133.333328)">
+                <g>
                   <path
                     id="g-svg-1340"
                     fill="none"
@@ -14885,10 +14454,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,133.33333333333331 L 700,133.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,150)">
+                <g>
                   <path
                     id="g-svg-1341"
                     fill="none"
@@ -14896,10 +14465,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,150 L 700,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,166.666672)">
+                <g>
                   <path
                     id="g-svg-1342"
                     fill="none"
@@ -14907,10 +14476,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,166.66666666666666 L 700,166.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,183.333328)">
+                <g>
                   <path
                     id="g-svg-1343"
                     fill="none"
@@ -14918,10 +14487,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,183.33333333333331 L 700,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,200)">
+                <g>
                   <path
                     id="g-svg-1344"
                     fill="none"
@@ -14929,10 +14498,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,200 L 700,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,216.666672)">
+                <g>
                   <path
                     id="g-svg-1345"
                     fill="none"
@@ -14940,10 +14509,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,216.66666666666666 L 700,216.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,233.333328)">
+                <g>
                   <path
                     id="g-svg-1346"
                     fill="none"
@@ -14951,10 +14520,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,233.33333333333331 L 700,233.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,250)">
+                <g>
                   <path
                     id="g-svg-1347"
                     fill="none"
@@ -14962,10 +14531,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,250 L 700,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,266.666656)">
+                <g>
                   <path
                     id="g-svg-1348"
                     fill="none"
@@ -14973,10 +14542,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,266.66666666666663 L 700,266.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,283.333344)">
+                <g>
                   <path
                     id="g-svg-1349"
                     fill="none"
@@ -14984,10 +14553,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,283.3333333333333 L 700,283.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,300)">
+                <g>
                   <path
                     id="g-svg-1350"
                     fill="none"
@@ -14995,10 +14564,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,300 L 700,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,316.666656)">
+                <g>
                   <path
                     id="g-svg-1351"
                     fill="none"
@@ -15006,10 +14575,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,316.66666666666663 L 700,316.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,333.333344)">
+                <g>
                   <path
                     id="g-svg-1352"
                     fill="none"
@@ -15017,10 +14586,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,333.3333333333333 L 700,333.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,350)">
+                <g>
                   <path
                     id="g-svg-1353"
                     fill="none"
@@ -15028,10 +14597,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,350 L 700,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,366.666656)">
+                <g>
                   <path
                     id="g-svg-1354"
                     fill="none"
@@ -15039,10 +14608,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,366.66666666666663 L 700,366.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,383.333344)">
+                <g>
                   <path
                     id="g-svg-1355"
                     fill="none"
@@ -15050,10 +14619,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,383.3333333333333 L 700,383.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,400)">
+                <g>
                   <path
                     id="g-svg-1356"
                     fill="none"
@@ -15061,10 +14630,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,400 L 700,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,416.666656)">
+                <g>
                   <path
                     id="g-svg-1357"
                     fill="none"
@@ -15072,10 +14641,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,416.66666666666663 L 700,416.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,433.333344)">
+                <g>
                   <path
                     id="g-svg-1358"
                     fill="none"
@@ -15083,73 +14652,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,433.3333333333333 L 700,433.3333333333333"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-1334"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-1334" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-1359"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-1360"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,700,50)">
+          <g id="g-svg-1359" fill="none" class="axis-main-group">
+            <g id="g-svg-1360" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-1361"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="415"
+                  x1="700"
+                  y1="50"
+                  x2="700"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,415)">
+                <g transform="matrix(0,-0.500000,0.500000,0,700,465)">
                   <path
                     id="g-svg-1363"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1364"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-1364" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-1365"
                 fill="none"
                 transform="matrix(1,0,0,1,700,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1389"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15163,13 +14711,13 @@
                 transform="matrix(1,0,0,1,700,66.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1390"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15183,13 +14731,13 @@
                 transform="matrix(1,0,0,1,700,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1391"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15203,13 +14751,13 @@
                 transform="matrix(1,0,0,1,700,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1392"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15223,13 +14771,13 @@
                 transform="matrix(1,0,0,1,700,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1393"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15243,13 +14791,13 @@
                 transform="matrix(1,0,0,1,700,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1394"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15263,13 +14811,13 @@
                 transform="matrix(1,0,0,1,700,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1395"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15283,13 +14831,13 @@
                 transform="matrix(1,0,0,1,700,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1396"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15303,13 +14851,13 @@
                 transform="matrix(1,0,0,1,700,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1397"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15323,13 +14871,13 @@
                 transform="matrix(1,0,0,1,700,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1398"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15343,13 +14891,13 @@
                 transform="matrix(1,0,0,1,700,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1399"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15363,13 +14911,13 @@
                 transform="matrix(1,0,0,1,700,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1400"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15383,13 +14931,13 @@
                 transform="matrix(1,0,0,1,700,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1401"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15403,13 +14951,13 @@
                 transform="matrix(1,0,0,1,700,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1402"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15423,13 +14971,13 @@
                 transform="matrix(1,0,0,1,700,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1403"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15443,13 +14991,13 @@
                 transform="matrix(1,0,0,1,700,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1404"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15463,13 +15011,13 @@
                 transform="matrix(1,0,0,1,700,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1405"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15483,13 +15031,13 @@
                 transform="matrix(1,0,0,1,700,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1406"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15503,13 +15051,13 @@
                 transform="matrix(1,0,0,1,700,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1407"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15523,13 +15071,13 @@
                 transform="matrix(1,0,0,1,700,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1408"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15543,13 +15091,13 @@
                 transform="matrix(1,0,0,1,700,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1409"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15563,13 +15111,13 @@
                 transform="matrix(1,0,0,1,700,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1410"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15583,13 +15131,13 @@
                 transform="matrix(1,0,0,1,700,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1411"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15603,13 +15151,13 @@
                 transform="matrix(1,0,0,1,700,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1412"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -15618,19 +15166,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1413"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-1413" fill="none" class="axis-label-group">
               <g
                 id="g-svg-1414"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,50)"
+                transform="matrix(1,0,0,1,685,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1438"
                     fill="rgba(0,0,0,1)"
@@ -15653,10 +15196,10 @@
               <g
                 id="g-svg-1415"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,66.666664)"
+                transform="matrix(1,0,0,1,685,66.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1439"
                     fill="rgba(0,0,0,1)"
@@ -15679,10 +15222,10 @@
               <g
                 id="g-svg-1416"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,83.333336)"
+                transform="matrix(1,0,0,1,685,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1440"
                     fill="rgba(0,0,0,1)"
@@ -15705,10 +15248,10 @@
               <g
                 id="g-svg-1417"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,100)"
+                transform="matrix(1,0,0,1,685,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1441"
                     fill="rgba(0,0,0,1)"
@@ -15731,10 +15274,10 @@
               <g
                 id="g-svg-1418"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,116.666664)"
+                transform="matrix(1,0,0,1,685,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1442"
                     fill="rgba(0,0,0,1)"
@@ -15757,10 +15300,10 @@
               <g
                 id="g-svg-1419"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,133.333328)"
+                transform="matrix(1,0,0,1,685,133.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1443"
                     fill="rgba(0,0,0,1)"
@@ -15783,10 +15326,10 @@
               <g
                 id="g-svg-1420"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,150)"
+                transform="matrix(1,0,0,1,685,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1444"
                     fill="rgba(0,0,0,1)"
@@ -15809,10 +15352,10 @@
               <g
                 id="g-svg-1421"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,166.666672)"
+                transform="matrix(1,0,0,1,685,166.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1445"
                     fill="rgba(0,0,0,1)"
@@ -15835,10 +15378,10 @@
               <g
                 id="g-svg-1422"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,183.333328)"
+                transform="matrix(1,0,0,1,685,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1446"
                     fill="rgba(0,0,0,1)"
@@ -15861,10 +15404,10 @@
               <g
                 id="g-svg-1423"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,200)"
+                transform="matrix(1,0,0,1,685,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1447"
                     fill="rgba(0,0,0,1)"
@@ -15887,10 +15430,10 @@
               <g
                 id="g-svg-1424"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,216.666672)"
+                transform="matrix(1,0,0,1,685,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1448"
                     fill="rgba(0,0,0,1)"
@@ -15913,10 +15456,10 @@
               <g
                 id="g-svg-1425"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,233.333328)"
+                transform="matrix(1,0,0,1,685,233.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1449"
                     fill="rgba(0,0,0,1)"
@@ -15939,10 +15482,10 @@
               <g
                 id="g-svg-1426"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,250)"
+                transform="matrix(1,0,0,1,685,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1450"
                     fill="rgba(0,0,0,1)"
@@ -15965,10 +15508,10 @@
               <g
                 id="g-svg-1427"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,266.666656)"
+                transform="matrix(1,0,0,1,685,266.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1451"
                     fill="rgba(0,0,0,1)"
@@ -15991,10 +15534,10 @@
               <g
                 id="g-svg-1428"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,283.333344)"
+                transform="matrix(1,0,0,1,685,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1452"
                     fill="rgba(0,0,0,1)"
@@ -16017,10 +15560,10 @@
               <g
                 id="g-svg-1429"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,300)"
+                transform="matrix(1,0,0,1,685,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1453"
                     fill="rgba(0,0,0,1)"
@@ -16043,10 +15586,10 @@
               <g
                 id="g-svg-1430"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,316.666656)"
+                transform="matrix(1,0,0,1,685,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1454"
                     fill="rgba(0,0,0,1)"
@@ -16069,10 +15612,10 @@
               <g
                 id="g-svg-1431"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,333.333344)"
+                transform="matrix(1,0,0,1,685,333.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1455"
                     fill="rgba(0,0,0,1)"
@@ -16095,10 +15638,10 @@
               <g
                 id="g-svg-1432"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,350)"
+                transform="matrix(1,0,0,1,685,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1456"
                     fill="rgba(0,0,0,1)"
@@ -16121,10 +15664,10 @@
               <g
                 id="g-svg-1433"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,366.666656)"
+                transform="matrix(1,0,0,1,685,366.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1457"
                     fill="rgba(0,0,0,1)"
@@ -16147,10 +15690,10 @@
               <g
                 id="g-svg-1434"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,383.333344)"
+                transform="matrix(1,0,0,1,685,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1458"
                     fill="rgba(0,0,0,1)"
@@ -16173,10 +15716,10 @@
               <g
                 id="g-svg-1435"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,400)"
+                transform="matrix(1,0,0,1,685,400)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1459"
                     fill="rgba(0,0,0,1)"
@@ -16199,10 +15742,10 @@
               <g
                 id="g-svg-1436"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,416.666656)"
+                transform="matrix(1,0,0,1,685,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1460"
                     fill="rgba(0,0,0,1)"
@@ -16225,10 +15768,10 @@
               <g
                 id="g-svg-1437"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,685,433.333344)"
+                transform="matrix(1,0,0,1,685,433.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1461"
                     fill="rgba(0,0,0,1)"
@@ -16253,7 +15796,7 @@
           <g
             id="g-svg-1462"
             fill="none"
-            transform="matrix(1,0,0,1,644.934021,493)"
+            transform="matrix(1,0,0,1,652.034058,481.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -16277,26 +15820,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-97" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1464"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-1465"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-1466"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,750,50)">
+        <g id="g-svg-97" fill="none">
+          <g id="g-svg-1464" fill="none" class="axis-grid-group">
+            <g id="g-svg-1465" fill="none" class="axis-grid">
+              <g id="g-svg-1466" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-1468"
                     fill="none"
@@ -16304,10 +15832,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,50 L 750,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,66.666664)">
+                <g>
                   <path
                     id="g-svg-1469"
                     fill="none"
@@ -16315,10 +15843,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,66.66666666666666 L 750,66.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,83.333336)">
+                <g>
                   <path
                     id="g-svg-1470"
                     fill="none"
@@ -16326,10 +15854,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,83.33333333333333 L 750,83.33333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,100)">
+                <g>
                   <path
                     id="g-svg-1471"
                     fill="none"
@@ -16337,10 +15865,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,100 L 750,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,116.666664)">
+                <g>
                   <path
                     id="g-svg-1472"
                     fill="none"
@@ -16348,10 +15876,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,116.66666666666666 L 750,116.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,133.333328)">
+                <g>
                   <path
                     id="g-svg-1473"
                     fill="none"
@@ -16359,10 +15887,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,133.33333333333331 L 750,133.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,150)">
+                <g>
                   <path
                     id="g-svg-1474"
                     fill="none"
@@ -16370,10 +15898,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,150 L 750,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,166.666672)">
+                <g>
                   <path
                     id="g-svg-1475"
                     fill="none"
@@ -16381,10 +15909,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,166.66666666666666 L 750,166.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,183.333328)">
+                <g>
                   <path
                     id="g-svg-1476"
                     fill="none"
@@ -16392,10 +15920,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,183.33333333333331 L 750,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,200)">
+                <g>
                   <path
                     id="g-svg-1477"
                     fill="none"
@@ -16403,10 +15931,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,200 L 750,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,216.666672)">
+                <g>
                   <path
                     id="g-svg-1478"
                     fill="none"
@@ -16414,10 +15942,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,216.66666666666666 L 750,216.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,233.333328)">
+                <g>
                   <path
                     id="g-svg-1479"
                     fill="none"
@@ -16425,10 +15953,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,233.33333333333331 L 750,233.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,250)">
+                <g>
                   <path
                     id="g-svg-1480"
                     fill="none"
@@ -16436,10 +15964,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,250 L 750,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,266.666656)">
+                <g>
                   <path
                     id="g-svg-1481"
                     fill="none"
@@ -16447,10 +15975,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,266.66666666666663 L 750,266.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,283.333344)">
+                <g>
                   <path
                     id="g-svg-1482"
                     fill="none"
@@ -16458,10 +15986,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,283.3333333333333 L 750,283.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,300)">
+                <g>
                   <path
                     id="g-svg-1483"
                     fill="none"
@@ -16469,10 +15997,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,300 L 750,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,316.666656)">
+                <g>
                   <path
                     id="g-svg-1484"
                     fill="none"
@@ -16480,10 +16008,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,316.66666666666663 L 750,316.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,333.333344)">
+                <g>
                   <path
                     id="g-svg-1485"
                     fill="none"
@@ -16491,10 +16019,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,333.3333333333333 L 750,333.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,350)">
+                <g>
                   <path
                     id="g-svg-1486"
                     fill="none"
@@ -16502,10 +16030,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,350 L 750,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,366.666656)">
+                <g>
                   <path
                     id="g-svg-1487"
                     fill="none"
@@ -16513,10 +16041,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,366.66666666666663 L 750,366.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,383.333344)">
+                <g>
                   <path
                     id="g-svg-1488"
                     fill="none"
@@ -16524,10 +16052,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,383.3333333333333 L 750,383.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,400)">
+                <g>
                   <path
                     id="g-svg-1489"
                     fill="none"
@@ -16535,10 +16063,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,400 L 750,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,416.666656)">
+                <g>
                   <path
                     id="g-svg-1490"
                     fill="none"
@@ -16546,10 +16074,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,416.66666666666663 L 750,416.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,433.333344)">
+                <g>
                   <path
                     id="g-svg-1491"
                     fill="none"
@@ -16557,73 +16085,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,433.3333333333333 L 750,433.3333333333333"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-1467"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-1467" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-1492"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-1493"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,750,50)">
+          <g id="g-svg-1492" fill="none" class="axis-main-group">
+            <g id="g-svg-1493" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-1494"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="415"
+                  x1="750"
+                  y1="50"
+                  x2="750"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,415)">
+                <g transform="matrix(0,-0.500000,0.500000,0,750,465)">
                   <path
                     id="g-svg-1496"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1497"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-1497" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-1498"
                 fill="none"
                 transform="matrix(1,0,0,1,750,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1522"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16637,13 +16144,13 @@
                 transform="matrix(1,0,0,1,750,66.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1523"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16657,13 +16164,13 @@
                 transform="matrix(1,0,0,1,750,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1524"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16677,13 +16184,13 @@
                 transform="matrix(1,0,0,1,750,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1525"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16697,13 +16204,13 @@
                 transform="matrix(1,0,0,1,750,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1526"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16717,13 +16224,13 @@
                 transform="matrix(1,0,0,1,750,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1527"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16737,13 +16244,13 @@
                 transform="matrix(1,0,0,1,750,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1528"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16757,13 +16264,13 @@
                 transform="matrix(1,0,0,1,750,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1529"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16777,13 +16284,13 @@
                 transform="matrix(1,0,0,1,750,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1530"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16797,13 +16304,13 @@
                 transform="matrix(1,0,0,1,750,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1531"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16817,13 +16324,13 @@
                 transform="matrix(1,0,0,1,750,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1532"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16837,13 +16344,13 @@
                 transform="matrix(1,0,0,1,750,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1533"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16857,13 +16364,13 @@
                 transform="matrix(1,0,0,1,750,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1534"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16877,13 +16384,13 @@
                 transform="matrix(1,0,0,1,750,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1535"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16897,13 +16404,13 @@
                 transform="matrix(1,0,0,1,750,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1536"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16917,13 +16424,13 @@
                 transform="matrix(1,0,0,1,750,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1537"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16937,13 +16444,13 @@
                 transform="matrix(1,0,0,1,750,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1538"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16957,13 +16464,13 @@
                 transform="matrix(1,0,0,1,750,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1539"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16977,13 +16484,13 @@
                 transform="matrix(1,0,0,1,750,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1540"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -16997,13 +16504,13 @@
                 transform="matrix(1,0,0,1,750,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1541"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -17017,13 +16524,13 @@
                 transform="matrix(1,0,0,1,750,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1542"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -17037,13 +16544,13 @@
                 transform="matrix(1,0,0,1,750,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1543"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -17057,13 +16564,13 @@
                 transform="matrix(1,0,0,1,750,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1544"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -17077,13 +16584,13 @@
                 transform="matrix(1,0,0,1,750,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-1545"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -17092,19 +16599,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1546"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-1546" fill="none" class="axis-label-group">
               <g
                 id="g-svg-1547"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,50)"
+                transform="matrix(1,0,0,1,735,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1571"
                     fill="rgba(0,0,0,1)"
@@ -17127,10 +16629,10 @@
               <g
                 id="g-svg-1548"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,66.666664)"
+                transform="matrix(1,0,0,1,735,66.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1572"
                     fill="rgba(0,0,0,1)"
@@ -17153,10 +16655,10 @@
               <g
                 id="g-svg-1549"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,83.333336)"
+                transform="matrix(1,0,0,1,735,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1573"
                     fill="rgba(0,0,0,1)"
@@ -17179,10 +16681,10 @@
               <g
                 id="g-svg-1550"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,100)"
+                transform="matrix(1,0,0,1,735,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1574"
                     fill="rgba(0,0,0,1)"
@@ -17205,10 +16707,10 @@
               <g
                 id="g-svg-1551"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,116.666664)"
+                transform="matrix(1,0,0,1,735,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1575"
                     fill="rgba(0,0,0,1)"
@@ -17231,10 +16733,10 @@
               <g
                 id="g-svg-1552"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,133.333328)"
+                transform="matrix(1,0,0,1,735,133.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1576"
                     fill="rgba(0,0,0,1)"
@@ -17257,10 +16759,10 @@
               <g
                 id="g-svg-1553"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,150)"
+                transform="matrix(1,0,0,1,735,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1577"
                     fill="rgba(0,0,0,1)"
@@ -17283,10 +16785,10 @@
               <g
                 id="g-svg-1554"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,166.666672)"
+                transform="matrix(1,0,0,1,735,166.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1578"
                     fill="rgba(0,0,0,1)"
@@ -17309,10 +16811,10 @@
               <g
                 id="g-svg-1555"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,183.333328)"
+                transform="matrix(1,0,0,1,735,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1579"
                     fill="rgba(0,0,0,1)"
@@ -17335,10 +16837,10 @@
               <g
                 id="g-svg-1556"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,200)"
+                transform="matrix(1,0,0,1,735,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1580"
                     fill="rgba(0,0,0,1)"
@@ -17361,10 +16863,10 @@
               <g
                 id="g-svg-1557"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,216.666672)"
+                transform="matrix(1,0,0,1,735,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1581"
                     fill="rgba(0,0,0,1)"
@@ -17387,10 +16889,10 @@
               <g
                 id="g-svg-1558"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,233.333328)"
+                transform="matrix(1,0,0,1,735,233.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1582"
                     fill="rgba(0,0,0,1)"
@@ -17413,10 +16915,10 @@
               <g
                 id="g-svg-1559"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,250)"
+                transform="matrix(1,0,0,1,735,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1583"
                     fill="rgba(0,0,0,1)"
@@ -17439,10 +16941,10 @@
               <g
                 id="g-svg-1560"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,266.666656)"
+                transform="matrix(1,0,0,1,735,266.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1584"
                     fill="rgba(0,0,0,1)"
@@ -17465,10 +16967,10 @@
               <g
                 id="g-svg-1561"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,283.333344)"
+                transform="matrix(1,0,0,1,735,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1585"
                     fill="rgba(0,0,0,1)"
@@ -17491,10 +16993,10 @@
               <g
                 id="g-svg-1562"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,300)"
+                transform="matrix(1,0,0,1,735,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1586"
                     fill="rgba(0,0,0,1)"
@@ -17517,10 +17019,10 @@
               <g
                 id="g-svg-1563"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,316.666656)"
+                transform="matrix(1,0,0,1,735,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1587"
                     fill="rgba(0,0,0,1)"
@@ -17543,10 +17045,10 @@
               <g
                 id="g-svg-1564"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,333.333344)"
+                transform="matrix(1,0,0,1,735,333.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1588"
                     fill="rgba(0,0,0,1)"
@@ -17569,10 +17071,10 @@
               <g
                 id="g-svg-1565"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,350)"
+                transform="matrix(1,0,0,1,735,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1589"
                     fill="rgba(0,0,0,1)"
@@ -17595,10 +17097,10 @@
               <g
                 id="g-svg-1566"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,366.666656)"
+                transform="matrix(1,0,0,1,735,366.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1590"
                     fill="rgba(0,0,0,1)"
@@ -17621,10 +17123,10 @@
               <g
                 id="g-svg-1567"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,383.333344)"
+                transform="matrix(1,0,0,1,735,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1591"
                     fill="rgba(0,0,0,1)"
@@ -17647,10 +17149,10 @@
               <g
                 id="g-svg-1568"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,400)"
+                transform="matrix(1,0,0,1,735,400)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1592"
                     fill="rgba(0,0,0,1)"
@@ -17673,10 +17175,10 @@
               <g
                 id="g-svg-1569"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,416.666656)"
+                transform="matrix(1,0,0,1,735,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1593"
                     fill="rgba(0,0,0,1)"
@@ -17699,10 +17201,10 @@
               <g
                 id="g-svg-1570"
                 fill="none"
-                transform="matrix(0,1,-1,0,735,433.333344)"
+                transform="matrix(1,0,0,1,735,433.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-1594"
                     fill="rgba(0,0,0,1)"
@@ -17727,7 +17229,7 @@
           <g
             id="g-svg-1595"
             fill="none"
-            transform="matrix(1,0,0,1,709.299988,493)"
+            transform="matrix(1,0,0,1,716.400024,481.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -17751,26 +17253,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-98" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1597"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-1598"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-1599"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,800,450)">
+        <g id="g-svg-98" fill="none">
+          <g id="g-svg-1597" fill="none" class="axis-grid-group">
+            <g id="g-svg-1598" fill="none" class="axis-grid">
+              <g id="g-svg-1599" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-1601"
                     fill="none"
@@ -17778,10 +17265,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,450 L 800,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,433.333344)">
+                <g>
                   <path
                     id="g-svg-1602"
                     fill="none"
@@ -17789,10 +17276,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,433.3333333333333 L 800,433.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,416.666656)">
+                <g>
                   <path
                     id="g-svg-1603"
                     fill="none"
@@ -17800,10 +17287,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,416.6666666666667 L 800,416.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,400)">
+                <g>
                   <path
                     id="g-svg-1604"
                     fill="none"
@@ -17811,10 +17298,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,400 L 800,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,383.333344)">
+                <g>
                   <path
                     id="g-svg-1605"
                     fill="none"
@@ -17822,10 +17309,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,383.33333333333337 L 800,383.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,366.666656)">
+                <g>
                   <path
                     id="g-svg-1606"
                     fill="none"
@@ -17833,10 +17320,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,366.6666666666667 L 800,366.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,350)">
+                <g>
                   <path
                     id="g-svg-1607"
                     fill="none"
@@ -17844,10 +17331,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,350 L 800,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,333.333344)">
+                <g>
                   <path
                     id="g-svg-1608"
                     fill="none"
@@ -17855,10 +17342,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,333.33333333333337 L 800,333.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,316.666656)">
+                <g>
                   <path
                     id="g-svg-1609"
                     fill="none"
@@ -17866,10 +17353,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,316.6666666666667 L 800,316.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,300)">
+                <g>
                   <path
                     id="g-svg-1610"
                     fill="none"
@@ -17877,10 +17364,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,300 L 800,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,283.333344)">
+                <g>
                   <path
                     id="g-svg-1611"
                     fill="none"
@@ -17888,10 +17375,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,283.33333333333337 L 800,283.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,266.666656)">
+                <g>
                   <path
                     id="g-svg-1612"
                     fill="none"
@@ -17899,10 +17386,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,266.6666666666667 L 800,266.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,250)">
+                <g>
                   <path
                     id="g-svg-1613"
                     fill="none"
@@ -17910,10 +17397,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,250 L 800,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,233.333328)">
+                <g>
                   <path
                     id="g-svg-1614"
                     fill="none"
@@ -17921,10 +17408,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,233.33333333333334 L 800,233.33333333333334"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,216.666672)">
+                <g>
                   <path
                     id="g-svg-1615"
                     fill="none"
@@ -17932,10 +17419,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,216.66666666666669 L 800,216.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,200)">
+                <g>
                   <path
                     id="g-svg-1616"
                     fill="none"
@@ -17943,10 +17430,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,200 L 800,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,183.333328)">
+                <g>
                   <path
                     id="g-svg-1617"
                     fill="none"
@@ -17954,10 +17441,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,183.33333333333337 L 800,183.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,166.666672)">
+                <g>
                   <path
                     id="g-svg-1618"
                     fill="none"
@@ -17965,10 +17452,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,166.66666666666669 L 800,166.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,150)">
+                <g>
                   <path
                     id="g-svg-1619"
                     fill="none"
@@ -17976,10 +17463,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,150 L 800,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,133.333328)">
+                <g>
                   <path
                     id="g-svg-1620"
                     fill="none"
@@ -17987,10 +17474,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,133.33333333333337 L 800,133.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,116.666664)">
+                <g>
                   <path
                     id="g-svg-1621"
                     fill="none"
@@ -17998,10 +17485,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,116.66666666666669 L 800,116.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,100)">
+                <g>
                   <path
                     id="g-svg-1622"
                     fill="none"
@@ -18009,10 +17496,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,100 L 800,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,83.333336)">
+                <g>
                   <path
                     id="g-svg-1623"
                     fill="none"
@@ -18020,10 +17507,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,83.33333333333337 L 800,83.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,66.666664)">
+                <g>
                   <path
                     id="g-svg-1624"
                     fill="none"
@@ -18031,67 +17518,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,66.66666666666669 L 800,66.66666666666669"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-1600"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-1600" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-1625"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-1626"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,800,50)">
+          <g id="g-svg-1625" fill="none" class="axis-main-group">
+            <g id="g-svg-1626" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-1627"
                   fill="none"
-                  x1="0"
-                  y1="400"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="800"
+                  y1="450"
+                  x2="800"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,800,35)">
                   <path
                     id="g-svg-1629"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1630"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-1630" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-1631"
                 fill="none"
                 transform="matrix(1,0,0,1,800,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1655"
                     fill="none"
@@ -18111,7 +17577,7 @@
                 transform="matrix(1,0,0,1,800,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1656"
                     fill="none"
@@ -18131,7 +17597,7 @@
                 transform="matrix(1,0,0,1,800,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1657"
                     fill="none"
@@ -18151,7 +17617,7 @@
                 transform="matrix(1,0,0,1,800,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1658"
                     fill="none"
@@ -18171,7 +17637,7 @@
                 transform="matrix(1,0,0,1,800,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1659"
                     fill="none"
@@ -18191,7 +17657,7 @@
                 transform="matrix(1,0,0,1,800,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1660"
                     fill="none"
@@ -18211,7 +17677,7 @@
                 transform="matrix(1,0,0,1,800,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1661"
                     fill="none"
@@ -18231,7 +17697,7 @@
                 transform="matrix(1,0,0,1,800,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1662"
                     fill="none"
@@ -18251,7 +17717,7 @@
                 transform="matrix(1,0,0,1,800,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1663"
                     fill="none"
@@ -18271,7 +17737,7 @@
                 transform="matrix(1,0,0,1,800,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1664"
                     fill="none"
@@ -18291,7 +17757,7 @@
                 transform="matrix(1,0,0,1,800,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1665"
                     fill="none"
@@ -18311,7 +17777,7 @@
                 transform="matrix(1,0,0,1,800,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1666"
                     fill="none"
@@ -18331,7 +17797,7 @@
                 transform="matrix(1,0,0,1,800,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1667"
                     fill="none"
@@ -18351,7 +17817,7 @@
                 transform="matrix(1,0,0,1,800,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1668"
                     fill="none"
@@ -18371,7 +17837,7 @@
                 transform="matrix(1,0,0,1,800,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1669"
                     fill="none"
@@ -18391,7 +17857,7 @@
                 transform="matrix(1,0,0,1,800,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1670"
                     fill="none"
@@ -18411,7 +17877,7 @@
                 transform="matrix(1,0,0,1,800,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1671"
                     fill="none"
@@ -18431,7 +17897,7 @@
                 transform="matrix(1,0,0,1,800,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1672"
                     fill="none"
@@ -18451,7 +17917,7 @@
                 transform="matrix(1,0,0,1,800,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1673"
                     fill="none"
@@ -18471,7 +17937,7 @@
                 transform="matrix(1,0,0,1,800,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1674"
                     fill="none"
@@ -18491,7 +17957,7 @@
                 transform="matrix(1,0,0,1,800,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1675"
                     fill="none"
@@ -18511,7 +17977,7 @@
                 transform="matrix(1,0,0,1,800,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1676"
                     fill="none"
@@ -18531,7 +17997,7 @@
                 transform="matrix(1,0,0,1,800,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1677"
                     fill="none"
@@ -18551,7 +18017,7 @@
                 transform="matrix(1,0,0,1,800,66.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1678"
                     fill="none"
@@ -18566,19 +18032,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1679"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-1679" fill="none" class="axis-label-group">
               <g
                 id="g-svg-1680"
                 fill="none"
                 transform="matrix(1,0,0,1,815,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1704"
                     fill="rgba(0,0,0,1)"
@@ -18604,7 +18065,7 @@
                 transform="matrix(1,0,0,1,815,433.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1705"
                     fill="rgba(0,0,0,1)"
@@ -18630,7 +18091,7 @@
                 transform="matrix(1,0,0,1,815,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1706"
                     fill="rgba(0,0,0,1)"
@@ -18656,7 +18117,7 @@
                 transform="matrix(1,0,0,1,815,400)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1707"
                     fill="rgba(0,0,0,1)"
@@ -18682,7 +18143,7 @@
                 transform="matrix(1,0,0,1,815,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1708"
                     fill="rgba(0,0,0,1)"
@@ -18708,7 +18169,7 @@
                 transform="matrix(1,0,0,1,815,366.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1709"
                     fill="rgba(0,0,0,1)"
@@ -18734,7 +18195,7 @@
                 transform="matrix(1,0,0,1,815,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1710"
                     fill="rgba(0,0,0,1)"
@@ -18760,7 +18221,7 @@
                 transform="matrix(1,0,0,1,815,333.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1711"
                     fill="rgba(0,0,0,1)"
@@ -18786,7 +18247,7 @@
                 transform="matrix(1,0,0,1,815,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1712"
                     fill="rgba(0,0,0,1)"
@@ -18812,7 +18273,7 @@
                 transform="matrix(1,0,0,1,815,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1713"
                     fill="rgba(0,0,0,1)"
@@ -18838,7 +18299,7 @@
                 transform="matrix(1,0,0,1,815,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1714"
                     fill="rgba(0,0,0,1)"
@@ -18864,7 +18325,7 @@
                 transform="matrix(1,0,0,1,815,266.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1715"
                     fill="rgba(0,0,0,1)"
@@ -18890,7 +18351,7 @@
                 transform="matrix(1,0,0,1,815,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1716"
                     fill="rgba(0,0,0,1)"
@@ -18916,7 +18377,7 @@
                 transform="matrix(1,0,0,1,815,233.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1717"
                     fill="rgba(0,0,0,1)"
@@ -18942,7 +18403,7 @@
                 transform="matrix(1,0,0,1,815,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1718"
                     fill="rgba(0,0,0,1)"
@@ -18968,7 +18429,7 @@
                 transform="matrix(1,0,0,1,815,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1719"
                     fill="rgba(0,0,0,1)"
@@ -18994,7 +18455,7 @@
                 transform="matrix(1,0,0,1,815,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1720"
                     fill="rgba(0,0,0,1)"
@@ -19020,7 +18481,7 @@
                 transform="matrix(1,0,0,1,815,166.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1721"
                     fill="rgba(0,0,0,1)"
@@ -19046,7 +18507,7 @@
                 transform="matrix(1,0,0,1,815,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1722"
                     fill="rgba(0,0,0,1)"
@@ -19072,7 +18533,7 @@
                 transform="matrix(1,0,0,1,815,133.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1723"
                     fill="rgba(0,0,0,1)"
@@ -19098,7 +18559,7 @@
                 transform="matrix(1,0,0,1,815,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1724"
                     fill="rgba(0,0,0,1)"
@@ -19124,7 +18585,7 @@
                 transform="matrix(1,0,0,1,815,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1725"
                     fill="rgba(0,0,0,1)"
@@ -19150,7 +18611,7 @@
                 transform="matrix(1,0,0,1,815,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1726"
                     fill="rgba(0,0,0,1)"
@@ -19176,7 +18637,7 @@
                 transform="matrix(1,0,0,1,815,66.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-1727"
                     fill="rgba(0,0,0,1)"
@@ -19201,7 +18662,7 @@
           <g
             id="g-svg-1728"
             fill="none"
-            transform="matrix(1,0,0,1,780.799988,484.500000)"
+            transform="matrix(1,0,0,1,787.900024,473)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -19225,26 +18686,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-99" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1730"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-1731"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-1732"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,850,450)">
+        <g id="g-svg-99" fill="none">
+          <g id="g-svg-1730" fill="none" class="axis-grid-group">
+            <g id="g-svg-1731" fill="none" class="axis-grid">
+              <g id="g-svg-1732" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-1734"
                     fill="none"
@@ -19252,10 +18698,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,450 L 850,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,433.333344)">
+                <g>
                   <path
                     id="g-svg-1735"
                     fill="none"
@@ -19263,10 +18709,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,433.3333333333333 L 850,433.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,416.666656)">
+                <g>
                   <path
                     id="g-svg-1736"
                     fill="none"
@@ -19274,10 +18720,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,416.6666666666667 L 850,416.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,400)">
+                <g>
                   <path
                     id="g-svg-1737"
                     fill="none"
@@ -19285,10 +18731,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,400 L 850,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,383.333344)">
+                <g>
                   <path
                     id="g-svg-1738"
                     fill="none"
@@ -19296,10 +18742,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,383.33333333333337 L 850,383.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,366.666656)">
+                <g>
                   <path
                     id="g-svg-1739"
                     fill="none"
@@ -19307,10 +18753,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,366.6666666666667 L 850,366.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,350)">
+                <g>
                   <path
                     id="g-svg-1740"
                     fill="none"
@@ -19318,10 +18764,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,350 L 850,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,333.333344)">
+                <g>
                   <path
                     id="g-svg-1741"
                     fill="none"
@@ -19329,10 +18775,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,333.33333333333337 L 850,333.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,316.666656)">
+                <g>
                   <path
                     id="g-svg-1742"
                     fill="none"
@@ -19340,10 +18786,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,316.6666666666667 L 850,316.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,300)">
+                <g>
                   <path
                     id="g-svg-1743"
                     fill="none"
@@ -19351,10 +18797,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,300 L 850,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,283.333344)">
+                <g>
                   <path
                     id="g-svg-1744"
                     fill="none"
@@ -19362,10 +18808,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,283.33333333333337 L 850,283.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,266.666656)">
+                <g>
                   <path
                     id="g-svg-1745"
                     fill="none"
@@ -19373,10 +18819,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,266.6666666666667 L 850,266.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,250)">
+                <g>
                   <path
                     id="g-svg-1746"
                     fill="none"
@@ -19384,10 +18830,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,250 L 850,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,233.333328)">
+                <g>
                   <path
                     id="g-svg-1747"
                     fill="none"
@@ -19395,10 +18841,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,233.33333333333334 L 850,233.33333333333334"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,216.666672)">
+                <g>
                   <path
                     id="g-svg-1748"
                     fill="none"
@@ -19406,10 +18852,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,216.66666666666669 L 850,216.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,200)">
+                <g>
                   <path
                     id="g-svg-1749"
                     fill="none"
@@ -19417,10 +18863,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,200 L 850,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,183.333328)">
+                <g>
                   <path
                     id="g-svg-1750"
                     fill="none"
@@ -19428,10 +18874,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,183.33333333333337 L 850,183.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,166.666672)">
+                <g>
                   <path
                     id="g-svg-1751"
                     fill="none"
@@ -19439,10 +18885,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,166.66666666666669 L 850,166.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,150)">
+                <g>
                   <path
                     id="g-svg-1752"
                     fill="none"
@@ -19450,10 +18896,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,150 L 850,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,133.333328)">
+                <g>
                   <path
                     id="g-svg-1753"
                     fill="none"
@@ -19461,10 +18907,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,133.33333333333337 L 850,133.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,116.666664)">
+                <g>
                   <path
                     id="g-svg-1754"
                     fill="none"
@@ -19472,10 +18918,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,116.66666666666669 L 850,116.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,100)">
+                <g>
                   <path
                     id="g-svg-1755"
                     fill="none"
@@ -19483,10 +18929,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,100 L 850,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,83.333336)">
+                <g>
                   <path
                     id="g-svg-1756"
                     fill="none"
@@ -19494,10 +18940,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,83.33333333333337 L 850,83.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,66.666664)">
+                <g>
                   <path
                     id="g-svg-1757"
                     fill="none"
@@ -19505,67 +18951,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,66.66666666666669 L 850,66.66666666666669"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-1733"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-1733" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-1758"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-1759"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,850,50)">
+          <g id="g-svg-1758" fill="none" class="axis-main-group">
+            <g id="g-svg-1759" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-1760"
                   fill="none"
-                  x1="0"
-                  y1="400"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="850"
+                  y1="450"
+                  x2="850"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,850,35)">
                   <path
                     id="g-svg-1762"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1763"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-1763" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-1764"
                 fill="none"
                 transform="matrix(1,0,0,1,850,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1788"
                     fill="none"
@@ -19585,7 +19010,7 @@
                 transform="matrix(1,0,0,1,850,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1789"
                     fill="none"
@@ -19605,7 +19030,7 @@
                 transform="matrix(1,0,0,1,850,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1790"
                     fill="none"
@@ -19625,7 +19050,7 @@
                 transform="matrix(1,0,0,1,850,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1791"
                     fill="none"
@@ -19645,7 +19070,7 @@
                 transform="matrix(1,0,0,1,850,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1792"
                     fill="none"
@@ -19665,7 +19090,7 @@
                 transform="matrix(1,0,0,1,850,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1793"
                     fill="none"
@@ -19685,7 +19110,7 @@
                 transform="matrix(1,0,0,1,850,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1794"
                     fill="none"
@@ -19705,7 +19130,7 @@
                 transform="matrix(1,0,0,1,850,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1795"
                     fill="none"
@@ -19725,7 +19150,7 @@
                 transform="matrix(1,0,0,1,850,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1796"
                     fill="none"
@@ -19745,7 +19170,7 @@
                 transform="matrix(1,0,0,1,850,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1797"
                     fill="none"
@@ -19765,7 +19190,7 @@
                 transform="matrix(1,0,0,1,850,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1798"
                     fill="none"
@@ -19785,7 +19210,7 @@
                 transform="matrix(1,0,0,1,850,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1799"
                     fill="none"
@@ -19805,7 +19230,7 @@
                 transform="matrix(1,0,0,1,850,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1800"
                     fill="none"
@@ -19825,7 +19250,7 @@
                 transform="matrix(1,0,0,1,850,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1801"
                     fill="none"
@@ -19845,7 +19270,7 @@
                 transform="matrix(1,0,0,1,850,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1802"
                     fill="none"
@@ -19865,7 +19290,7 @@
                 transform="matrix(1,0,0,1,850,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1803"
                     fill="none"
@@ -19885,7 +19310,7 @@
                 transform="matrix(1,0,0,1,850,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1804"
                     fill="none"
@@ -19905,7 +19330,7 @@
                 transform="matrix(1,0,0,1,850,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1805"
                     fill="none"
@@ -19925,7 +19350,7 @@
                 transform="matrix(1,0,0,1,850,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1806"
                     fill="none"
@@ -19945,7 +19370,7 @@
                 transform="matrix(1,0,0,1,850,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1807"
                     fill="none"
@@ -19965,7 +19390,7 @@
                 transform="matrix(1,0,0,1,850,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1808"
                     fill="none"
@@ -19985,7 +19410,7 @@
                 transform="matrix(1,0,0,1,850,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1809"
                     fill="none"
@@ -20005,7 +19430,7 @@
                 transform="matrix(1,0,0,1,850,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1810"
                     fill="none"
@@ -20025,7 +19450,7 @@
                 transform="matrix(1,0,0,1,850,66.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1811"
                     fill="none"
@@ -20040,19 +19465,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1812"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-1812" fill="none" class="axis-label-group">
               <g
                 id="g-svg-1813"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,450)"
+                transform="matrix(1,0,0,1,865,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1837"
                     fill="rgba(0,0,0,1)"
@@ -20075,10 +19495,10 @@
               <g
                 id="g-svg-1814"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,433.333344)"
+                transform="matrix(1,0,0,1,865,433.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1838"
                     fill="rgba(0,0,0,1)"
@@ -20101,10 +19521,10 @@
               <g
                 id="g-svg-1815"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,416.666656)"
+                transform="matrix(1,0,0,1,865,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1839"
                     fill="rgba(0,0,0,1)"
@@ -20127,10 +19547,10 @@
               <g
                 id="g-svg-1816"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,400)"
+                transform="matrix(1,0,0,1,865,400)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1840"
                     fill="rgba(0,0,0,1)"
@@ -20153,10 +19573,10 @@
               <g
                 id="g-svg-1817"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,383.333344)"
+                transform="matrix(1,0,0,1,865,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1841"
                     fill="rgba(0,0,0,1)"
@@ -20179,10 +19599,10 @@
               <g
                 id="g-svg-1818"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,366.666656)"
+                transform="matrix(1,0,0,1,865,366.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1842"
                     fill="rgba(0,0,0,1)"
@@ -20205,10 +19625,10 @@
               <g
                 id="g-svg-1819"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,350)"
+                transform="matrix(1,0,0,1,865,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1843"
                     fill="rgba(0,0,0,1)"
@@ -20231,10 +19651,10 @@
               <g
                 id="g-svg-1820"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,333.333344)"
+                transform="matrix(1,0,0,1,865,333.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1844"
                     fill="rgba(0,0,0,1)"
@@ -20257,10 +19677,10 @@
               <g
                 id="g-svg-1821"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,316.666656)"
+                transform="matrix(1,0,0,1,865,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1845"
                     fill="rgba(0,0,0,1)"
@@ -20283,10 +19703,10 @@
               <g
                 id="g-svg-1822"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,300)"
+                transform="matrix(1,0,0,1,865,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1846"
                     fill="rgba(0,0,0,1)"
@@ -20309,10 +19729,10 @@
               <g
                 id="g-svg-1823"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,283.333344)"
+                transform="matrix(1,0,0,1,865,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1847"
                     fill="rgba(0,0,0,1)"
@@ -20335,10 +19755,10 @@
               <g
                 id="g-svg-1824"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,266.666656)"
+                transform="matrix(1,0,0,1,865,266.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1848"
                     fill="rgba(0,0,0,1)"
@@ -20361,10 +19781,10 @@
               <g
                 id="g-svg-1825"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,250)"
+                transform="matrix(1,0,0,1,865,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1849"
                     fill="rgba(0,0,0,1)"
@@ -20387,10 +19807,10 @@
               <g
                 id="g-svg-1826"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,233.333328)"
+                transform="matrix(1,0,0,1,865,233.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1850"
                     fill="rgba(0,0,0,1)"
@@ -20413,10 +19833,10 @@
               <g
                 id="g-svg-1827"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,216.666672)"
+                transform="matrix(1,0,0,1,865,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1851"
                     fill="rgba(0,0,0,1)"
@@ -20439,10 +19859,10 @@
               <g
                 id="g-svg-1828"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,200)"
+                transform="matrix(1,0,0,1,865,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1852"
                     fill="rgba(0,0,0,1)"
@@ -20465,10 +19885,10 @@
               <g
                 id="g-svg-1829"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,183.333328)"
+                transform="matrix(1,0,0,1,865,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1853"
                     fill="rgba(0,0,0,1)"
@@ -20491,10 +19911,10 @@
               <g
                 id="g-svg-1830"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,166.666672)"
+                transform="matrix(1,0,0,1,865,166.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1854"
                     fill="rgba(0,0,0,1)"
@@ -20517,10 +19937,10 @@
               <g
                 id="g-svg-1831"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,150)"
+                transform="matrix(1,0,0,1,865,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1855"
                     fill="rgba(0,0,0,1)"
@@ -20543,10 +19963,10 @@
               <g
                 id="g-svg-1832"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,133.333328)"
+                transform="matrix(1,0,0,1,865,133.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1856"
                     fill="rgba(0,0,0,1)"
@@ -20569,10 +19989,10 @@
               <g
                 id="g-svg-1833"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,116.666664)"
+                transform="matrix(1,0,0,1,865,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1857"
                     fill="rgba(0,0,0,1)"
@@ -20595,10 +20015,10 @@
               <g
                 id="g-svg-1834"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,100)"
+                transform="matrix(1,0,0,1,865,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1858"
                     fill="rgba(0,0,0,1)"
@@ -20621,10 +20041,10 @@
               <g
                 id="g-svg-1835"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,83.333336)"
+                transform="matrix(1,0,0,1,865,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1859"
                     fill="rgba(0,0,0,1)"
@@ -20647,10 +20067,10 @@
               <g
                 id="g-svg-1836"
                 fill="none"
-                transform="matrix(0.707107,0.707107,-0.707107,0.707107,865,66.666664)"
+                transform="matrix(1,0,0,1,865,66.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1860"
                     fill="rgba(0,0,0,1)"
@@ -20675,7 +20095,7 @@
           <g
             id="g-svg-1861"
             fill="none"
-            transform="matrix(1,0,0,1,830.799988,499.573059)"
+            transform="matrix(1,0,0,1,837.900024,488.073059)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -20699,26 +20119,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-100" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1863"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-1864"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-1865"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,900,450)">
+        <g id="g-svg-100" fill="none">
+          <g id="g-svg-1863" fill="none" class="axis-grid-group">
+            <g id="g-svg-1864" fill="none" class="axis-grid">
+              <g id="g-svg-1865" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-1867"
                     fill="none"
@@ -20726,10 +20131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,450 L 900,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,433.333344)">
+                <g>
                   <path
                     id="g-svg-1868"
                     fill="none"
@@ -20737,10 +20142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,433.3333333333333 L 900,433.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,416.666656)">
+                <g>
                   <path
                     id="g-svg-1869"
                     fill="none"
@@ -20748,10 +20153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,416.6666666666667 L 900,416.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,400)">
+                <g>
                   <path
                     id="g-svg-1870"
                     fill="none"
@@ -20759,10 +20164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,400 L 900,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,383.333344)">
+                <g>
                   <path
                     id="g-svg-1871"
                     fill="none"
@@ -20770,10 +20175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,383.33333333333337 L 900,383.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,366.666656)">
+                <g>
                   <path
                     id="g-svg-1872"
                     fill="none"
@@ -20781,10 +20186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,366.6666666666667 L 900,366.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,350)">
+                <g>
                   <path
                     id="g-svg-1873"
                     fill="none"
@@ -20792,10 +20197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,350 L 900,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,333.333344)">
+                <g>
                   <path
                     id="g-svg-1874"
                     fill="none"
@@ -20803,10 +20208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,333.33333333333337 L 900,333.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,316.666656)">
+                <g>
                   <path
                     id="g-svg-1875"
                     fill="none"
@@ -20814,10 +20219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,316.6666666666667 L 900,316.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,300)">
+                <g>
                   <path
                     id="g-svg-1876"
                     fill="none"
@@ -20825,10 +20230,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,300 L 900,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,283.333344)">
+                <g>
                   <path
                     id="g-svg-1877"
                     fill="none"
@@ -20836,10 +20241,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,283.33333333333337 L 900,283.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,266.666656)">
+                <g>
                   <path
                     id="g-svg-1878"
                     fill="none"
@@ -20847,10 +20252,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,266.6666666666667 L 900,266.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,250)">
+                <g>
                   <path
                     id="g-svg-1879"
                     fill="none"
@@ -20858,10 +20263,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,250 L 900,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,233.333328)">
+                <g>
                   <path
                     id="g-svg-1880"
                     fill="none"
@@ -20869,10 +20274,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,233.33333333333334 L 900,233.33333333333334"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,216.666672)">
+                <g>
                   <path
                     id="g-svg-1881"
                     fill="none"
@@ -20880,10 +20285,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,216.66666666666669 L 900,216.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,200)">
+                <g>
                   <path
                     id="g-svg-1882"
                     fill="none"
@@ -20891,10 +20296,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,200 L 900,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,183.333328)">
+                <g>
                   <path
                     id="g-svg-1883"
                     fill="none"
@@ -20902,10 +20307,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,183.33333333333337 L 900,183.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,166.666672)">
+                <g>
                   <path
                     id="g-svg-1884"
                     fill="none"
@@ -20913,10 +20318,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,166.66666666666669 L 900,166.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,150)">
+                <g>
                   <path
                     id="g-svg-1885"
                     fill="none"
@@ -20924,10 +20329,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,150 L 900,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,133.333328)">
+                <g>
                   <path
                     id="g-svg-1886"
                     fill="none"
@@ -20935,10 +20340,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,133.33333333333337 L 900,133.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,116.666664)">
+                <g>
                   <path
                     id="g-svg-1887"
                     fill="none"
@@ -20946,10 +20351,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,116.66666666666669 L 900,116.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,100)">
+                <g>
                   <path
                     id="g-svg-1888"
                     fill="none"
@@ -20957,10 +20362,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,100 L 900,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,83.333336)">
+                <g>
                   <path
                     id="g-svg-1889"
                     fill="none"
@@ -20968,10 +20373,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,83.33333333333337 L 900,83.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,900,66.666664)">
+                <g>
                   <path
                     id="g-svg-1890"
                     fill="none"
@@ -20979,67 +20384,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 900,66.66666666666669 L 900,66.66666666666669"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-1866"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-1866" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-1891"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-1892"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,900,50)">
+          <g id="g-svg-1891" fill="none" class="axis-main-group">
+            <g id="g-svg-1892" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-1893"
                   fill="none"
-                  x1="0"
-                  y1="400"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="900"
+                  y1="450"
+                  x2="900"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,900,35)">
                   <path
                     id="g-svg-1895"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1896"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-1896" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-1897"
                 fill="none"
                 transform="matrix(1,0,0,1,900,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1921"
                     fill="none"
@@ -21059,7 +20443,7 @@
                 transform="matrix(1,0,0,1,900,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1922"
                     fill="none"
@@ -21079,7 +20463,7 @@
                 transform="matrix(1,0,0,1,900,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1923"
                     fill="none"
@@ -21099,7 +20483,7 @@
                 transform="matrix(1,0,0,1,900,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1924"
                     fill="none"
@@ -21119,7 +20503,7 @@
                 transform="matrix(1,0,0,1,900,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1925"
                     fill="none"
@@ -21139,7 +20523,7 @@
                 transform="matrix(1,0,0,1,900,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1926"
                     fill="none"
@@ -21159,7 +20543,7 @@
                 transform="matrix(1,0,0,1,900,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1927"
                     fill="none"
@@ -21179,7 +20563,7 @@
                 transform="matrix(1,0,0,1,900,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1928"
                     fill="none"
@@ -21199,7 +20583,7 @@
                 transform="matrix(1,0,0,1,900,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1929"
                     fill="none"
@@ -21219,7 +20603,7 @@
                 transform="matrix(1,0,0,1,900,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1930"
                     fill="none"
@@ -21239,7 +20623,7 @@
                 transform="matrix(1,0,0,1,900,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1931"
                     fill="none"
@@ -21259,7 +20643,7 @@
                 transform="matrix(1,0,0,1,900,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1932"
                     fill="none"
@@ -21279,7 +20663,7 @@
                 transform="matrix(1,0,0,1,900,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1933"
                     fill="none"
@@ -21299,7 +20683,7 @@
                 transform="matrix(1,0,0,1,900,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1934"
                     fill="none"
@@ -21319,7 +20703,7 @@
                 transform="matrix(1,0,0,1,900,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1935"
                     fill="none"
@@ -21339,7 +20723,7 @@
                 transform="matrix(1,0,0,1,900,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1936"
                     fill="none"
@@ -21359,7 +20743,7 @@
                 transform="matrix(1,0,0,1,900,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1937"
                     fill="none"
@@ -21379,7 +20763,7 @@
                 transform="matrix(1,0,0,1,900,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1938"
                     fill="none"
@@ -21399,7 +20783,7 @@
                 transform="matrix(1,0,0,1,900,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1939"
                     fill="none"
@@ -21419,7 +20803,7 @@
                 transform="matrix(1,0,0,1,900,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1940"
                     fill="none"
@@ -21439,7 +20823,7 @@
                 transform="matrix(1,0,0,1,900,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1941"
                     fill="none"
@@ -21459,7 +20843,7 @@
                 transform="matrix(1,0,0,1,900,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1942"
                     fill="none"
@@ -21479,7 +20863,7 @@
                 transform="matrix(1,0,0,1,900,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1943"
                     fill="none"
@@ -21499,7 +20883,7 @@
                 transform="matrix(1,0,0,1,900,66.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-1944"
                     fill="none"
@@ -21514,19 +20898,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1945"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-1945" fill="none" class="axis-label-group">
               <g
                 id="g-svg-1946"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,450)"
+                transform="matrix(1,0,0,1,915,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1970"
                     fill="rgba(0,0,0,1)"
@@ -21549,10 +20928,10 @@
               <g
                 id="g-svg-1947"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,433.333344)"
+                transform="matrix(1,0,0,1,915,433.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1971"
                     fill="rgba(0,0,0,1)"
@@ -21575,10 +20954,10 @@
               <g
                 id="g-svg-1948"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,416.666656)"
+                transform="matrix(1,0,0,1,915,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1972"
                     fill="rgba(0,0,0,1)"
@@ -21601,10 +20980,10 @@
               <g
                 id="g-svg-1949"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,400)"
+                transform="matrix(1,0,0,1,915,400)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1973"
                     fill="rgba(0,0,0,1)"
@@ -21627,10 +21006,10 @@
               <g
                 id="g-svg-1950"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,383.333344)"
+                transform="matrix(1,0,0,1,915,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1974"
                     fill="rgba(0,0,0,1)"
@@ -21653,10 +21032,10 @@
               <g
                 id="g-svg-1951"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,366.666656)"
+                transform="matrix(1,0,0,1,915,366.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1975"
                     fill="rgba(0,0,0,1)"
@@ -21679,10 +21058,10 @@
               <g
                 id="g-svg-1952"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,350)"
+                transform="matrix(1,0,0,1,915,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1976"
                     fill="rgba(0,0,0,1)"
@@ -21705,10 +21084,10 @@
               <g
                 id="g-svg-1953"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,333.333344)"
+                transform="matrix(1,0,0,1,915,333.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1977"
                     fill="rgba(0,0,0,1)"
@@ -21731,10 +21110,10 @@
               <g
                 id="g-svg-1954"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,316.666656)"
+                transform="matrix(1,0,0,1,915,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1978"
                     fill="rgba(0,0,0,1)"
@@ -21757,10 +21136,10 @@
               <g
                 id="g-svg-1955"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,300)"
+                transform="matrix(1,0,0,1,915,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1979"
                     fill="rgba(0,0,0,1)"
@@ -21783,10 +21162,10 @@
               <g
                 id="g-svg-1956"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,283.333344)"
+                transform="matrix(1,0,0,1,915,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1980"
                     fill="rgba(0,0,0,1)"
@@ -21809,10 +21188,10 @@
               <g
                 id="g-svg-1957"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,266.666656)"
+                transform="matrix(1,0,0,1,915,266.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1981"
                     fill="rgba(0,0,0,1)"
@@ -21835,10 +21214,10 @@
               <g
                 id="g-svg-1958"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,250)"
+                transform="matrix(1,0,0,1,915,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1982"
                     fill="rgba(0,0,0,1)"
@@ -21861,10 +21240,10 @@
               <g
                 id="g-svg-1959"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,233.333328)"
+                transform="matrix(1,0,0,1,915,233.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1983"
                     fill="rgba(0,0,0,1)"
@@ -21887,10 +21266,10 @@
               <g
                 id="g-svg-1960"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,216.666672)"
+                transform="matrix(1,0,0,1,915,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1984"
                     fill="rgba(0,0,0,1)"
@@ -21913,10 +21292,10 @@
               <g
                 id="g-svg-1961"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,200)"
+                transform="matrix(1,0,0,1,915,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1985"
                     fill="rgba(0,0,0,1)"
@@ -21939,10 +21318,10 @@
               <g
                 id="g-svg-1962"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,183.333328)"
+                transform="matrix(1,0,0,1,915,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1986"
                     fill="rgba(0,0,0,1)"
@@ -21965,10 +21344,10 @@
               <g
                 id="g-svg-1963"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,166.666672)"
+                transform="matrix(1,0,0,1,915,166.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1987"
                     fill="rgba(0,0,0,1)"
@@ -21991,10 +21370,10 @@
               <g
                 id="g-svg-1964"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,150)"
+                transform="matrix(1,0,0,1,915,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1988"
                     fill="rgba(0,0,0,1)"
@@ -22017,10 +21396,10 @@
               <g
                 id="g-svg-1965"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,133.333328)"
+                transform="matrix(1,0,0,1,915,133.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1989"
                     fill="rgba(0,0,0,1)"
@@ -22043,10 +21422,10 @@
               <g
                 id="g-svg-1966"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,116.666664)"
+                transform="matrix(1,0,0,1,915,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1990"
                     fill="rgba(0,0,0,1)"
@@ -22069,10 +21448,10 @@
               <g
                 id="g-svg-1967"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,100)"
+                transform="matrix(1,0,0,1,915,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1991"
                     fill="rgba(0,0,0,1)"
@@ -22095,10 +21474,10 @@
               <g
                 id="g-svg-1968"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,83.333336)"
+                transform="matrix(1,0,0,1,915,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1992"
                     fill="rgba(0,0,0,1)"
@@ -22121,10 +21500,10 @@
               <g
                 id="g-svg-1969"
                 fill="none"
-                transform="matrix(0.707107,-0.707107,0.707107,0.707107,915,66.666664)"
+                transform="matrix(1,0,0,1,915,66.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.707107,-0.707107,0.707107,0.707107,0,0)">
                   <text
                     id="g-svg-1993"
                     fill="rgba(0,0,0,1)"
@@ -22149,7 +21528,7 @@
           <g
             id="g-svg-1994"
             fill="none"
-            transform="matrix(1,0,0,1,880.799988,481.131714)"
+            transform="matrix(1,0,0,1,887.900024,469.631714)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
@@ -22173,26 +21552,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-101" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1996"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-1997"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-1998"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,950,450)">
+        <g id="g-svg-101" fill="none">
+          <g id="g-svg-1996" fill="none" class="axis-grid-group">
+            <g id="g-svg-1997" fill="none" class="axis-grid">
+              <g id="g-svg-1998" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-2000"
                     fill="none"
@@ -22200,10 +21564,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,450 L 950,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,433.333344)">
+                <g>
                   <path
                     id="g-svg-2001"
                     fill="none"
@@ -22211,10 +21575,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,433.3333333333333 L 950,433.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,416.666656)">
+                <g>
                   <path
                     id="g-svg-2002"
                     fill="none"
@@ -22222,10 +21586,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,416.6666666666667 L 950,416.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,400)">
+                <g>
                   <path
                     id="g-svg-2003"
                     fill="none"
@@ -22233,10 +21597,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,400 L 950,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,383.333344)">
+                <g>
                   <path
                     id="g-svg-2004"
                     fill="none"
@@ -22244,10 +21608,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,383.33333333333337 L 950,383.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,366.666656)">
+                <g>
                   <path
                     id="g-svg-2005"
                     fill="none"
@@ -22255,10 +21619,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,366.6666666666667 L 950,366.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,350)">
+                <g>
                   <path
                     id="g-svg-2006"
                     fill="none"
@@ -22266,10 +21630,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,350 L 950,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,333.333344)">
+                <g>
                   <path
                     id="g-svg-2007"
                     fill="none"
@@ -22277,10 +21641,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,333.33333333333337 L 950,333.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,316.666656)">
+                <g>
                   <path
                     id="g-svg-2008"
                     fill="none"
@@ -22288,10 +21652,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,316.6666666666667 L 950,316.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,300)">
+                <g>
                   <path
                     id="g-svg-2009"
                     fill="none"
@@ -22299,10 +21663,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,300 L 950,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,283.333344)">
+                <g>
                   <path
                     id="g-svg-2010"
                     fill="none"
@@ -22310,10 +21674,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,283.33333333333337 L 950,283.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,266.666656)">
+                <g>
                   <path
                     id="g-svg-2011"
                     fill="none"
@@ -22321,10 +21685,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,266.6666666666667 L 950,266.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,250)">
+                <g>
                   <path
                     id="g-svg-2012"
                     fill="none"
@@ -22332,10 +21696,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,250 L 950,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,233.333328)">
+                <g>
                   <path
                     id="g-svg-2013"
                     fill="none"
@@ -22343,10 +21707,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,233.33333333333334 L 950,233.33333333333334"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,216.666672)">
+                <g>
                   <path
                     id="g-svg-2014"
                     fill="none"
@@ -22354,10 +21718,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,216.66666666666669 L 950,216.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,200)">
+                <g>
                   <path
                     id="g-svg-2015"
                     fill="none"
@@ -22365,10 +21729,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,200 L 950,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,183.333328)">
+                <g>
                   <path
                     id="g-svg-2016"
                     fill="none"
@@ -22376,10 +21740,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,183.33333333333337 L 950,183.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,166.666672)">
+                <g>
                   <path
                     id="g-svg-2017"
                     fill="none"
@@ -22387,10 +21751,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,166.66666666666669 L 950,166.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,150)">
+                <g>
                   <path
                     id="g-svg-2018"
                     fill="none"
@@ -22398,10 +21762,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,150 L 950,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,133.333328)">
+                <g>
                   <path
                     id="g-svg-2019"
                     fill="none"
@@ -22409,10 +21773,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,133.33333333333337 L 950,133.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,116.666664)">
+                <g>
                   <path
                     id="g-svg-2020"
                     fill="none"
@@ -22420,10 +21784,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,116.66666666666669 L 950,116.66666666666669"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,100)">
+                <g>
                   <path
                     id="g-svg-2021"
                     fill="none"
@@ -22431,10 +21795,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,100 L 950,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,83.333336)">
+                <g>
                   <path
                     id="g-svg-2022"
                     fill="none"
@@ -22442,10 +21806,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,83.33333333333337 L 950,83.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,950,66.666664)">
+                <g>
                   <path
                     id="g-svg-2023"
                     fill="none"
@@ -22453,67 +21817,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 950,66.66666666666669 L 950,66.66666666666669"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-1999"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-1999" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-2024"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-2025"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,950,50)">
+          <g id="g-svg-2024" fill="none" class="axis-main-group">
+            <g id="g-svg-2025" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-2026"
                   fill="none"
-                  x1="0"
-                  y1="400"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="950"
+                  y1="450"
+                  x2="950"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,950,35)">
                   <path
                     id="g-svg-2028"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-2029"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-2029" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-2030"
                 fill="none"
                 transform="matrix(1,0,0,1,950,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2054"
                     fill="none"
@@ -22533,7 +21876,7 @@
                 transform="matrix(1,0,0,1,950,433.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2055"
                     fill="none"
@@ -22553,7 +21896,7 @@
                 transform="matrix(1,0,0,1,950,416.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2056"
                     fill="none"
@@ -22573,7 +21916,7 @@
                 transform="matrix(1,0,0,1,950,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2057"
                     fill="none"
@@ -22593,7 +21936,7 @@
                 transform="matrix(1,0,0,1,950,383.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2058"
                     fill="none"
@@ -22613,7 +21956,7 @@
                 transform="matrix(1,0,0,1,950,366.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2059"
                     fill="none"
@@ -22633,7 +21976,7 @@
                 transform="matrix(1,0,0,1,950,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2060"
                     fill="none"
@@ -22653,7 +21996,7 @@
                 transform="matrix(1,0,0,1,950,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2061"
                     fill="none"
@@ -22673,7 +22016,7 @@
                 transform="matrix(1,0,0,1,950,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2062"
                     fill="none"
@@ -22693,7 +22036,7 @@
                 transform="matrix(1,0,0,1,950,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2063"
                     fill="none"
@@ -22713,7 +22056,7 @@
                 transform="matrix(1,0,0,1,950,283.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2064"
                     fill="none"
@@ -22733,7 +22076,7 @@
                 transform="matrix(1,0,0,1,950,266.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2065"
                     fill="none"
@@ -22753,7 +22096,7 @@
                 transform="matrix(1,0,0,1,950,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2066"
                     fill="none"
@@ -22773,7 +22116,7 @@
                 transform="matrix(1,0,0,1,950,233.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2067"
                     fill="none"
@@ -22793,7 +22136,7 @@
                 transform="matrix(1,0,0,1,950,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2068"
                     fill="none"
@@ -22813,7 +22156,7 @@
                 transform="matrix(1,0,0,1,950,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2069"
                     fill="none"
@@ -22833,7 +22176,7 @@
                 transform="matrix(1,0,0,1,950,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2070"
                     fill="none"
@@ -22853,7 +22196,7 @@
                 transform="matrix(1,0,0,1,950,166.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2071"
                     fill="none"
@@ -22873,7 +22216,7 @@
                 transform="matrix(1,0,0,1,950,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2072"
                     fill="none"
@@ -22893,7 +22236,7 @@
                 transform="matrix(1,0,0,1,950,133.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2073"
                     fill="none"
@@ -22913,7 +22256,7 @@
                 transform="matrix(1,0,0,1,950,116.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2074"
                     fill="none"
@@ -22933,7 +22276,7 @@
                 transform="matrix(1,0,0,1,950,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2075"
                     fill="none"
@@ -22953,7 +22296,7 @@
                 transform="matrix(1,0,0,1,950,83.333336)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2076"
                     fill="none"
@@ -22973,7 +22316,7 @@
                 transform="matrix(1,0,0,1,950,66.666664)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-2077"
                     fill="none"
@@ -22988,19 +22331,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-2078"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-2078" fill="none" class="axis-label-group">
               <g
                 id="g-svg-2079"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,450)"
+                transform="matrix(1,0,0,1,965,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2103"
                     fill="rgba(0,0,0,1)"
@@ -23023,10 +22361,10 @@
               <g
                 id="g-svg-2080"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,433.333344)"
+                transform="matrix(1,0,0,1,965,433.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2104"
                     fill="rgba(0,0,0,1)"
@@ -23049,10 +22387,10 @@
               <g
                 id="g-svg-2081"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,416.666656)"
+                transform="matrix(1,0,0,1,965,416.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2105"
                     fill="rgba(0,0,0,1)"
@@ -23075,10 +22413,10 @@
               <g
                 id="g-svg-2082"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,400)"
+                transform="matrix(1,0,0,1,965,400)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2106"
                     fill="rgba(0,0,0,1)"
@@ -23101,10 +22439,10 @@
               <g
                 id="g-svg-2083"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,383.333344)"
+                transform="matrix(1,0,0,1,965,383.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2107"
                     fill="rgba(0,0,0,1)"
@@ -23127,10 +22465,10 @@
               <g
                 id="g-svg-2084"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,366.666656)"
+                transform="matrix(1,0,0,1,965,366.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2108"
                     fill="rgba(0,0,0,1)"
@@ -23153,10 +22491,10 @@
               <g
                 id="g-svg-2085"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,350)"
+                transform="matrix(1,0,0,1,965,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2109"
                     fill="rgba(0,0,0,1)"
@@ -23179,10 +22517,10 @@
               <g
                 id="g-svg-2086"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,333.333344)"
+                transform="matrix(1,0,0,1,965,333.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2110"
                     fill="rgba(0,0,0,1)"
@@ -23205,10 +22543,10 @@
               <g
                 id="g-svg-2087"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,316.666656)"
+                transform="matrix(1,0,0,1,965,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2111"
                     fill="rgba(0,0,0,1)"
@@ -23231,10 +22569,10 @@
               <g
                 id="g-svg-2088"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,300)"
+                transform="matrix(1,0,0,1,965,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2112"
                     fill="rgba(0,0,0,1)"
@@ -23257,10 +22595,10 @@
               <g
                 id="g-svg-2089"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,283.333344)"
+                transform="matrix(1,0,0,1,965,283.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2113"
                     fill="rgba(0,0,0,1)"
@@ -23283,10 +22621,10 @@
               <g
                 id="g-svg-2090"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,266.666656)"
+                transform="matrix(1,0,0,1,965,266.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2114"
                     fill="rgba(0,0,0,1)"
@@ -23309,10 +22647,10 @@
               <g
                 id="g-svg-2091"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,250)"
+                transform="matrix(1,0,0,1,965,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2115"
                     fill="rgba(0,0,0,1)"
@@ -23335,10 +22673,10 @@
               <g
                 id="g-svg-2092"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,233.333328)"
+                transform="matrix(1,0,0,1,965,233.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2116"
                     fill="rgba(0,0,0,1)"
@@ -23361,10 +22699,10 @@
               <g
                 id="g-svg-2093"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,216.666672)"
+                transform="matrix(1,0,0,1,965,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2117"
                     fill="rgba(0,0,0,1)"
@@ -23387,10 +22725,10 @@
               <g
                 id="g-svg-2094"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,200)"
+                transform="matrix(1,0,0,1,965,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2118"
                     fill="rgba(0,0,0,1)"
@@ -23413,10 +22751,10 @@
               <g
                 id="g-svg-2095"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,183.333328)"
+                transform="matrix(1,0,0,1,965,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2119"
                     fill="rgba(0,0,0,1)"
@@ -23439,10 +22777,10 @@
               <g
                 id="g-svg-2096"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,166.666672)"
+                transform="matrix(1,0,0,1,965,166.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2120"
                     fill="rgba(0,0,0,1)"
@@ -23465,10 +22803,10 @@
               <g
                 id="g-svg-2097"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,150)"
+                transform="matrix(1,0,0,1,965,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2121"
                     fill="rgba(0,0,0,1)"
@@ -23491,10 +22829,10 @@
               <g
                 id="g-svg-2098"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,133.333328)"
+                transform="matrix(1,0,0,1,965,133.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2122"
                     fill="rgba(0,0,0,1)"
@@ -23517,10 +22855,10 @@
               <g
                 id="g-svg-2099"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,116.666664)"
+                transform="matrix(1,0,0,1,965,116.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2123"
                     fill="rgba(0,0,0,1)"
@@ -23543,10 +22881,10 @@
               <g
                 id="g-svg-2100"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,100)"
+                transform="matrix(1,0,0,1,965,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2124"
                     fill="rgba(0,0,0,1)"
@@ -23569,10 +22907,10 @@
               <g
                 id="g-svg-2101"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,83.333336)"
+                transform="matrix(1,0,0,1,965,83.333336)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2125"
                     fill="rgba(0,0,0,1)"
@@ -23595,10 +22933,10 @@
               <g
                 id="g-svg-2102"
                 fill="none"
-                transform="matrix(0,1,-1,0,965,66.666664)"
+                transform="matrix(1,0,0,1,965,66.666664)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0,1,-1,0,0,0)">
                   <text
                     id="g-svg-2126"
                     fill="rgba(0,0,0,1)"
@@ -23623,7 +22961,7 @@
           <g
             id="g-svg-2127"
             fill="none"
-            transform="matrix(1,0,0,1,930.799988,486.540009)"
+            transform="matrix(1,0,0,1,937.900024,475.040009)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,14.200000,0)">
diff --git a/__tests__/integration/snapshots/AxisLinearLabelSpacing.svg b/__tests__/integration/snapshots/AxisLinearLabelSpacing.svg
index f3216aa4b..5ad7e494d 100644
--- a/__tests__/integration/snapshots/AxisLinearLabelSpacing.svg
+++ b/__tests__/integration/snapshots/AxisLinearLabelSpacing.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-34"
-        fill="none"
-        width="650"
-        height="600"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-35" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,500)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-33" fill="none" width="650" height="600">
+        <g id="g-svg-34" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,500 L 50,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,477.500000)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,477.5 L 50,477.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,455)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,455 L 50,455"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,432.500000)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,432.5 L 50,432.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,410)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,410 L 50,410"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,387.500000)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,387.5 L 50,387.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,365)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,365 L 50,365"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,342.500000)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,342.5 L 50,342.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,320)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,320 L 50,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,297.500000)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,297.5 L 50,297.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,275)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,275 L 50,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,252.500000)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,252.49999999999997 L 50,252.49999999999997"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,230)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,229.99999999999994 L 50,229.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,207.500000)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,207.5 L 50,207.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,185)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,184.99999999999994 L 50,184.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,162.500000)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,162.5 L 50,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,140)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,140 L 50,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,117.500000)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,117.49999999999994 L 50,117.49999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,95)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,95 L 50,95"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,72.500000)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,67 +230,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,72.49999999999994 L 50,72.49999999999994"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
-                  x1="0"
-                  y1="450"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="50"
+                  y1="500"
+                  x2="50"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,50,35)">
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-30" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,50,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -331,7 +289,7 @@
                 transform="matrix(1,0,0,1,50,477.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -351,7 +309,7 @@
                 transform="matrix(1,0,0,1,50,455)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -371,7 +329,7 @@
                 transform="matrix(1,0,0,1,50,432.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -391,7 +349,7 @@
                 transform="matrix(1,0,0,1,50,410)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
@@ -411,7 +369,7 @@
                 transform="matrix(1,0,0,1,50,387.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
@@ -431,7 +389,7 @@
                 transform="matrix(1,0,0,1,50,365)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
@@ -451,7 +409,7 @@
                 transform="matrix(1,0,0,1,50,342.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
@@ -471,7 +429,7 @@
                 transform="matrix(1,0,0,1,50,320)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -491,7 +449,7 @@
                 transform="matrix(1,0,0,1,50,297.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -511,7 +469,7 @@
                 transform="matrix(1,0,0,1,50,275)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -531,7 +489,7 @@
                 transform="matrix(1,0,0,1,50,252.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -551,7 +509,7 @@
                 transform="matrix(1,0,0,1,50,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
@@ -571,7 +529,7 @@
                 transform="matrix(1,0,0,1,50,207.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
@@ -591,7 +549,7 @@
                 transform="matrix(1,0,0,1,50,185)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
@@ -611,7 +569,7 @@
                 transform="matrix(1,0,0,1,50,162.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
@@ -631,7 +589,7 @@
                 transform="matrix(1,0,0,1,50,140)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="none"
@@ -651,7 +609,7 @@
                 transform="matrix(1,0,0,1,50,117.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-68"
                     fill="none"
@@ -671,7 +629,7 @@
                 transform="matrix(1,0,0,1,50,95)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="none"
@@ -691,7 +649,7 @@
                 transform="matrix(1,0,0,1,50,72.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-70"
                     fill="none"
@@ -706,19 +664,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-71"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-label-group">
               <g
                 id="g-svg-72"
                 fill="none"
                 transform="matrix(1,0,0,1,65,500)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -744,7 +697,7 @@
                 transform="matrix(1,0,0,1,65,477.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -770,7 +723,7 @@
                 transform="matrix(1,0,0,1,65,455)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -796,7 +749,7 @@
                 transform="matrix(1,0,0,1,65,432.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -822,7 +775,7 @@
                 transform="matrix(1,0,0,1,65,410)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -848,7 +801,7 @@
                 transform="matrix(1,0,0,1,65,387.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -874,7 +827,7 @@
                 transform="matrix(1,0,0,1,65,365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-98"
                     fill="rgba(0,0,0,1)"
@@ -900,7 +853,7 @@
                 transform="matrix(1,0,0,1,65,342.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-99"
                     fill="rgba(0,0,0,1)"
@@ -926,7 +879,7 @@
                 transform="matrix(1,0,0,1,65,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-100"
                     fill="rgba(0,0,0,1)"
@@ -952,7 +905,7 @@
                 transform="matrix(1,0,0,1,65,297.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-101"
                     fill="rgba(0,0,0,1)"
@@ -978,7 +931,7 @@
                 transform="matrix(1,0,0,1,65,275)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-102"
                     fill="rgba(0,0,0,1)"
@@ -1004,7 +957,7 @@
                 transform="matrix(1,0,0,1,65,252.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-103"
                     fill="rgba(0,0,0,1)"
@@ -1030,7 +983,7 @@
                 transform="matrix(1,0,0,1,65,230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-104"
                     fill="rgba(0,0,0,1)"
@@ -1056,7 +1009,7 @@
                 transform="matrix(1,0,0,1,65,207.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-105"
                     fill="rgba(0,0,0,1)"
@@ -1082,7 +1035,7 @@
                 transform="matrix(1,0,0,1,65,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-106"
                     fill="rgba(0,0,0,1)"
@@ -1108,7 +1061,7 @@
                 transform="matrix(1,0,0,1,65,162.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-107"
                     fill="rgba(0,0,0,1)"
@@ -1134,7 +1087,7 @@
                 transform="matrix(1,0,0,1,65,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-108"
                     fill="rgba(0,0,0,1)"
@@ -1160,7 +1113,7 @@
                 transform="matrix(1,0,0,1,65,117.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-109"
                     fill="rgba(0,0,0,1)"
@@ -1186,7 +1139,7 @@
                 transform="matrix(1,0,0,1,65,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-110"
                     fill="rgba(0,0,0,1)"
@@ -1212,7 +1165,7 @@
                 transform="matrix(1,0,0,1,65,72.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-111"
                     fill="rgba(0,0,0,1)"
@@ -1234,33 +1187,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-112"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-112" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-36" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-113"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-114"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-115"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,100,500)">
+        <g id="g-svg-35" fill="none">
+          <g id="g-svg-113" fill="none" class="axis-grid-group">
+            <g id="g-svg-114" fill="none" class="axis-grid">
+              <g id="g-svg-115" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-117"
                     fill="none"
@@ -1268,10 +1201,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,500 L 100,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,477.500000)">
+                <g>
                   <path
                     id="g-svg-118"
                     fill="none"
@@ -1279,10 +1212,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,477.5 L 100,477.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,455)">
+                <g>
                   <path
                     id="g-svg-119"
                     fill="none"
@@ -1290,10 +1223,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,455 L 100,455"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,432.500000)">
+                <g>
                   <path
                     id="g-svg-120"
                     fill="none"
@@ -1301,10 +1234,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,432.5 L 100,432.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,410)">
+                <g>
                   <path
                     id="g-svg-121"
                     fill="none"
@@ -1312,10 +1245,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,410 L 100,410"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,387.500000)">
+                <g>
                   <path
                     id="g-svg-122"
                     fill="none"
@@ -1323,10 +1256,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,387.5 L 100,387.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,365)">
+                <g>
                   <path
                     id="g-svg-123"
                     fill="none"
@@ -1334,10 +1267,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,365 L 100,365"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,342.500000)">
+                <g>
                   <path
                     id="g-svg-124"
                     fill="none"
@@ -1345,10 +1278,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,342.5 L 100,342.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,320)">
+                <g>
                   <path
                     id="g-svg-125"
                     fill="none"
@@ -1356,10 +1289,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,320 L 100,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,297.500000)">
+                <g>
                   <path
                     id="g-svg-126"
                     fill="none"
@@ -1367,10 +1300,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,297.5 L 100,297.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,275)">
+                <g>
                   <path
                     id="g-svg-127"
                     fill="none"
@@ -1378,10 +1311,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,275 L 100,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,252.500000)">
+                <g>
                   <path
                     id="g-svg-128"
                     fill="none"
@@ -1389,10 +1322,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,252.49999999999997 L 100,252.49999999999997"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,230)">
+                <g>
                   <path
                     id="g-svg-129"
                     fill="none"
@@ -1400,10 +1333,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,229.99999999999994 L 100,229.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,207.500000)">
+                <g>
                   <path
                     id="g-svg-130"
                     fill="none"
@@ -1411,10 +1344,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,207.5 L 100,207.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,185)">
+                <g>
                   <path
                     id="g-svg-131"
                     fill="none"
@@ -1422,10 +1355,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,184.99999999999994 L 100,184.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,162.500000)">
+                <g>
                   <path
                     id="g-svg-132"
                     fill="none"
@@ -1433,10 +1366,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,162.5 L 100,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,140)">
+                <g>
                   <path
                     id="g-svg-133"
                     fill="none"
@@ -1444,10 +1377,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,140 L 100,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,117.500000)">
+                <g>
                   <path
                     id="g-svg-134"
                     fill="none"
@@ -1455,10 +1388,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,117.49999999999994 L 100,117.49999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,95)">
+                <g>
                   <path
                     id="g-svg-135"
                     fill="none"
@@ -1466,10 +1399,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,95 L 100,95"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,72.500000)">
+                <g>
                   <path
                     id="g-svg-136"
                     fill="none"
@@ -1477,73 +1410,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,72.49999999999994 L 100,72.49999999999994"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-116"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-116" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-137"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-138"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,100,50)">
+          <g id="g-svg-137" fill="none" class="axis-main-group">
+            <g id="g-svg-138" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-139"
                   fill="none"
-                  x1="0"
-                  y1="450"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="100"
+                  y1="500"
+                  x2="100"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,100,35)">
                   <path
                     id="g-svg-141"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-142"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-142" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-143"
                 fill="none"
                 transform="matrix(1,0,0,1,100,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-163"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1557,13 +1469,13 @@
                 transform="matrix(1,0,0,1,100,477.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-164"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1577,13 +1489,13 @@
                 transform="matrix(1,0,0,1,100,455)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-165"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1597,13 +1509,13 @@
                 transform="matrix(1,0,0,1,100,432.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-166"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1617,13 +1529,13 @@
                 transform="matrix(1,0,0,1,100,410)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-167"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1637,13 +1549,13 @@
                 transform="matrix(1,0,0,1,100,387.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-168"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1657,13 +1569,13 @@
                 transform="matrix(1,0,0,1,100,365)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-169"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1677,13 +1589,13 @@
                 transform="matrix(1,0,0,1,100,342.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-170"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1697,13 +1609,13 @@
                 transform="matrix(1,0,0,1,100,320)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-171"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1717,13 +1629,13 @@
                 transform="matrix(1,0,0,1,100,297.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-172"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1737,13 +1649,13 @@
                 transform="matrix(1,0,0,1,100,275)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-173"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1757,13 +1669,13 @@
                 transform="matrix(1,0,0,1,100,252.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-174"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1777,13 +1689,13 @@
                 transform="matrix(1,0,0,1,100,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-175"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1797,13 +1709,13 @@
                 transform="matrix(1,0,0,1,100,207.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-176"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1817,13 +1729,13 @@
                 transform="matrix(1,0,0,1,100,185)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-177"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1837,13 +1749,13 @@
                 transform="matrix(1,0,0,1,100,162.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-178"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1857,13 +1769,13 @@
                 transform="matrix(1,0,0,1,100,140)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-179"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1877,13 +1789,13 @@
                 transform="matrix(1,0,0,1,100,117.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-180"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1897,13 +1809,13 @@
                 transform="matrix(1,0,0,1,100,95)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-181"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1917,13 +1829,13 @@
                 transform="matrix(1,0,0,1,100,72.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-182"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1932,19 +1844,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-183"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-183" fill="none" class="axis-label-group">
               <g
                 id="g-svg-184"
                 fill="none"
                 transform="matrix(1,0,0,1,105,500)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-204"
                     fill="rgba(0,0,0,1)"
@@ -1970,7 +1877,7 @@
                 transform="matrix(1,0,0,1,105,477.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-205"
                     fill="rgba(0,0,0,1)"
@@ -1996,7 +1903,7 @@
                 transform="matrix(1,0,0,1,105,455)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-206"
                     fill="rgba(0,0,0,1)"
@@ -2022,7 +1929,7 @@
                 transform="matrix(1,0,0,1,105,432.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-207"
                     fill="rgba(0,0,0,1)"
@@ -2048,7 +1955,7 @@
                 transform="matrix(1,0,0,1,105,410)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-208"
                     fill="rgba(0,0,0,1)"
@@ -2074,7 +1981,7 @@
                 transform="matrix(1,0,0,1,105,387.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-209"
                     fill="rgba(0,0,0,1)"
@@ -2100,7 +2007,7 @@
                 transform="matrix(1,0,0,1,105,365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-210"
                     fill="rgba(0,0,0,1)"
@@ -2126,7 +2033,7 @@
                 transform="matrix(1,0,0,1,105,342.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-211"
                     fill="rgba(0,0,0,1)"
@@ -2152,7 +2059,7 @@
                 transform="matrix(1,0,0,1,105,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-212"
                     fill="rgba(0,0,0,1)"
@@ -2178,7 +2085,7 @@
                 transform="matrix(1,0,0,1,105,297.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-213"
                     fill="rgba(0,0,0,1)"
@@ -2204,7 +2111,7 @@
                 transform="matrix(1,0,0,1,105,275)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-214"
                     fill="rgba(0,0,0,1)"
@@ -2230,7 +2137,7 @@
                 transform="matrix(1,0,0,1,105,252.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-215"
                     fill="rgba(0,0,0,1)"
@@ -2256,7 +2163,7 @@
                 transform="matrix(1,0,0,1,105,230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-216"
                     fill="rgba(0,0,0,1)"
@@ -2282,7 +2189,7 @@
                 transform="matrix(1,0,0,1,105,207.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-217"
                     fill="rgba(0,0,0,1)"
@@ -2308,7 +2215,7 @@
                 transform="matrix(1,0,0,1,105,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-218"
                     fill="rgba(0,0,0,1)"
@@ -2334,7 +2241,7 @@
                 transform="matrix(1,0,0,1,105,162.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-219"
                     fill="rgba(0,0,0,1)"
@@ -2360,7 +2267,7 @@
                 transform="matrix(1,0,0,1,105,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-220"
                     fill="rgba(0,0,0,1)"
@@ -2386,7 +2293,7 @@
                 transform="matrix(1,0,0,1,105,117.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-221"
                     fill="rgba(0,0,0,1)"
@@ -2412,7 +2319,7 @@
                 transform="matrix(1,0,0,1,105,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-222"
                     fill="rgba(0,0,0,1)"
@@ -2438,7 +2345,7 @@
                 transform="matrix(1,0,0,1,105,72.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-223"
                     fill="rgba(0,0,0,1)"
@@ -2460,33 +2367,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-224"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-224" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-37" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-225"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-226"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-227"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,500)">
+        <g id="g-svg-36" fill="none">
+          <g id="g-svg-225" fill="none" class="axis-grid-group">
+            <g id="g-svg-226" fill="none" class="axis-grid">
+              <g id="g-svg-227" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-229"
                     fill="none"
@@ -2494,10 +2381,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,500 L 150,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,477.500000)">
+                <g>
                   <path
                     id="g-svg-230"
                     fill="none"
@@ -2505,10 +2392,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,477.5 L 150,477.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,455)">
+                <g>
                   <path
                     id="g-svg-231"
                     fill="none"
@@ -2516,10 +2403,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,455 L 150,455"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,432.500000)">
+                <g>
                   <path
                     id="g-svg-232"
                     fill="none"
@@ -2527,10 +2414,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,432.5 L 150,432.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,410)">
+                <g>
                   <path
                     id="g-svg-233"
                     fill="none"
@@ -2538,10 +2425,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,410 L 150,410"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,387.500000)">
+                <g>
                   <path
                     id="g-svg-234"
                     fill="none"
@@ -2549,10 +2436,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,387.5 L 150,387.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,365)">
+                <g>
                   <path
                     id="g-svg-235"
                     fill="none"
@@ -2560,10 +2447,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,365 L 150,365"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,342.500000)">
+                <g>
                   <path
                     id="g-svg-236"
                     fill="none"
@@ -2571,10 +2458,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,342.5 L 150,342.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,320)">
+                <g>
                   <path
                     id="g-svg-237"
                     fill="none"
@@ -2582,10 +2469,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,320 L 150,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,297.500000)">
+                <g>
                   <path
                     id="g-svg-238"
                     fill="none"
@@ -2593,10 +2480,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,297.5 L 150,297.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,275)">
+                <g>
                   <path
                     id="g-svg-239"
                     fill="none"
@@ -2604,10 +2491,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,275 L 150,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,252.500000)">
+                <g>
                   <path
                     id="g-svg-240"
                     fill="none"
@@ -2615,10 +2502,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,252.49999999999997 L 150,252.49999999999997"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,230)">
+                <g>
                   <path
                     id="g-svg-241"
                     fill="none"
@@ -2626,10 +2513,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,229.99999999999994 L 150,229.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,207.500000)">
+                <g>
                   <path
                     id="g-svg-242"
                     fill="none"
@@ -2637,10 +2524,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,207.5 L 150,207.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,185)">
+                <g>
                   <path
                     id="g-svg-243"
                     fill="none"
@@ -2648,10 +2535,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,184.99999999999994 L 150,184.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,162.500000)">
+                <g>
                   <path
                     id="g-svg-244"
                     fill="none"
@@ -2659,10 +2546,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,162.5 L 150,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,140)">
+                <g>
                   <path
                     id="g-svg-245"
                     fill="none"
@@ -2670,10 +2557,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,140 L 150,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,117.500000)">
+                <g>
                   <path
                     id="g-svg-246"
                     fill="none"
@@ -2681,10 +2568,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,117.49999999999994 L 150,117.49999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,95)">
+                <g>
                   <path
                     id="g-svg-247"
                     fill="none"
@@ -2692,10 +2579,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,95 L 150,95"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,72.500000)">
+                <g>
                   <path
                     id="g-svg-248"
                     fill="none"
@@ -2703,67 +2590,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,72.49999999999994 L 150,72.49999999999994"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-228"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-228" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-249"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-250"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,150,50)">
+          <g id="g-svg-249" fill="none" class="axis-main-group">
+            <g id="g-svg-250" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-251"
                   fill="none"
-                  x1="0"
-                  y1="450"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="150"
+                  y1="500"
+                  x2="150"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,150,35)">
                   <path
                     id="g-svg-253"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-254"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-254" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-255"
                 fill="none"
                 transform="matrix(1,0,0,1,150,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-275"
                     fill="none"
@@ -2783,7 +2649,7 @@
                 transform="matrix(1,0,0,1,150,477.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-276"
                     fill="none"
@@ -2803,7 +2669,7 @@
                 transform="matrix(1,0,0,1,150,455)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-277"
                     fill="none"
@@ -2823,7 +2689,7 @@
                 transform="matrix(1,0,0,1,150,432.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-278"
                     fill="none"
@@ -2843,7 +2709,7 @@
                 transform="matrix(1,0,0,1,150,410)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-279"
                     fill="none"
@@ -2863,7 +2729,7 @@
                 transform="matrix(1,0,0,1,150,387.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-280"
                     fill="none"
@@ -2883,7 +2749,7 @@
                 transform="matrix(1,0,0,1,150,365)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-281"
                     fill="none"
@@ -2903,7 +2769,7 @@
                 transform="matrix(1,0,0,1,150,342.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-282"
                     fill="none"
@@ -2923,7 +2789,7 @@
                 transform="matrix(1,0,0,1,150,320)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-283"
                     fill="none"
@@ -2943,7 +2809,7 @@
                 transform="matrix(1,0,0,1,150,297.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-284"
                     fill="none"
@@ -2963,7 +2829,7 @@
                 transform="matrix(1,0,0,1,150,275)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-285"
                     fill="none"
@@ -2983,7 +2849,7 @@
                 transform="matrix(1,0,0,1,150,252.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-286"
                     fill="none"
@@ -3003,7 +2869,7 @@
                 transform="matrix(1,0,0,1,150,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-287"
                     fill="none"
@@ -3023,7 +2889,7 @@
                 transform="matrix(1,0,0,1,150,207.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-288"
                     fill="none"
@@ -3043,7 +2909,7 @@
                 transform="matrix(1,0,0,1,150,185)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-289"
                     fill="none"
@@ -3063,7 +2929,7 @@
                 transform="matrix(1,0,0,1,150,162.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-290"
                     fill="none"
@@ -3083,7 +2949,7 @@
                 transform="matrix(1,0,0,1,150,140)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-291"
                     fill="none"
@@ -3103,7 +2969,7 @@
                 transform="matrix(1,0,0,1,150,117.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-292"
                     fill="none"
@@ -3123,7 +2989,7 @@
                 transform="matrix(1,0,0,1,150,95)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-293"
                     fill="none"
@@ -3143,7 +3009,7 @@
                 transform="matrix(1,0,0,1,150,72.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-294"
                     fill="none"
@@ -3158,19 +3024,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-295"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-295" fill="none" class="axis-label-group">
               <g
                 id="g-svg-296"
                 fill="none"
                 transform="matrix(1,0,0,1,155,500)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-316"
                     fill="rgba(0,0,0,1)"
@@ -3196,7 +3057,7 @@
                 transform="matrix(1,0,0,1,155,477.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-317"
                     fill="rgba(0,0,0,1)"
@@ -3222,7 +3083,7 @@
                 transform="matrix(1,0,0,1,155,455)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-318"
                     fill="rgba(0,0,0,1)"
@@ -3248,7 +3109,7 @@
                 transform="matrix(1,0,0,1,155,432.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-319"
                     fill="rgba(0,0,0,1)"
@@ -3274,7 +3135,7 @@
                 transform="matrix(1,0,0,1,155,410)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-320"
                     fill="rgba(0,0,0,1)"
@@ -3300,7 +3161,7 @@
                 transform="matrix(1,0,0,1,155,387.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-321"
                     fill="rgba(0,0,0,1)"
@@ -3326,7 +3187,7 @@
                 transform="matrix(1,0,0,1,155,365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-322"
                     fill="rgba(0,0,0,1)"
@@ -3352,7 +3213,7 @@
                 transform="matrix(1,0,0,1,155,342.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-323"
                     fill="rgba(0,0,0,1)"
@@ -3378,7 +3239,7 @@
                 transform="matrix(1,0,0,1,155,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-324"
                     fill="rgba(0,0,0,1)"
@@ -3404,7 +3265,7 @@
                 transform="matrix(1,0,0,1,155,297.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-325"
                     fill="rgba(0,0,0,1)"
@@ -3430,7 +3291,7 @@
                 transform="matrix(1,0,0,1,155,275)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-326"
                     fill="rgba(0,0,0,1)"
@@ -3456,7 +3317,7 @@
                 transform="matrix(1,0,0,1,155,252.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-327"
                     fill="rgba(0,0,0,1)"
@@ -3482,7 +3343,7 @@
                 transform="matrix(1,0,0,1,155,230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-328"
                     fill="rgba(0,0,0,1)"
@@ -3508,7 +3369,7 @@
                 transform="matrix(1,0,0,1,155,207.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-329"
                     fill="rgba(0,0,0,1)"
@@ -3534,7 +3395,7 @@
                 transform="matrix(1,0,0,1,155,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-330"
                     fill="rgba(0,0,0,1)"
@@ -3560,7 +3421,7 @@
                 transform="matrix(1,0,0,1,155,162.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-331"
                     fill="rgba(0,0,0,1)"
@@ -3586,7 +3447,7 @@
                 transform="matrix(1,0,0,1,155,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-332"
                     fill="rgba(0,0,0,1)"
@@ -3612,7 +3473,7 @@
                 transform="matrix(1,0,0,1,155,117.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-333"
                     fill="rgba(0,0,0,1)"
@@ -3638,7 +3499,7 @@
                 transform="matrix(1,0,0,1,155,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-334"
                     fill="rgba(0,0,0,1)"
@@ -3664,7 +3525,7 @@
                 transform="matrix(1,0,0,1,155,72.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-335"
                     fill="rgba(0,0,0,1)"
@@ -3686,33 +3547,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-336"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-336" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-38" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-337"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-338"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-339"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,50)">
+        <g id="g-svg-37" fill="none">
+          <g id="g-svg-337" fill="none" class="axis-grid-group">
+            <g id="g-svg-338" fill="none" class="axis-grid">
+              <g id="g-svg-339" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-341"
                     fill="none"
@@ -3720,10 +3561,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,50 L 200,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,50)">
+                <g>
                   <path
                     id="g-svg-342"
                     fill="none"
@@ -3731,10 +3572,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,50 L 220,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,240,50)">
+                <g>
                   <path
                     id="g-svg-343"
                     fill="none"
@@ -3742,10 +3583,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 240,50 L 240,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,50)">
+                <g>
                   <path
                     id="g-svg-344"
                     fill="none"
@@ -3753,10 +3594,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 260,50 L 260,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,280,50)">
+                <g>
                   <path
                     id="g-svg-345"
                     fill="none"
@@ -3764,10 +3605,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 280,50 L 280,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,50)">
+                <g>
                   <path
                     id="g-svg-346"
                     fill="none"
@@ -3775,10 +3616,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,50 L 300,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,50)">
+                <g>
                   <path
                     id="g-svg-347"
                     fill="none"
@@ -3786,10 +3627,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 320,50 L 320,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,340,50)">
+                <g>
                   <path
                     id="g-svg-348"
                     fill="none"
@@ -3797,10 +3638,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 340,50 L 340,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,360,50)">
+                <g>
                   <path
                     id="g-svg-349"
                     fill="none"
@@ -3808,10 +3649,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 360,50 L 360,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,50)">
+                <g>
                   <path
                     id="g-svg-350"
                     fill="none"
@@ -3819,10 +3660,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 380,50 L 380,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,50)">
+                <g>
                   <path
                     id="g-svg-351"
                     fill="none"
@@ -3830,10 +3671,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,50 L 400,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,420,50)">
+                <g>
                   <path
                     id="g-svg-352"
                     fill="none"
@@ -3841,10 +3682,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 420,50 L 420,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,440,50)">
+                <g>
                   <path
                     id="g-svg-353"
                     fill="none"
@@ -3852,10 +3693,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 440,50 L 440,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,460,50)">
+                <g>
                   <path
                     id="g-svg-354"
                     fill="none"
@@ -3863,10 +3704,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 460,50 L 460,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,480,50)">
+                <g>
                   <path
                     id="g-svg-355"
                     fill="none"
@@ -3874,10 +3715,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 480,50 L 480,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,500,50)">
+                <g>
                   <path
                     id="g-svg-356"
                     fill="none"
@@ -3885,10 +3726,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,50 L 500,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,520,50)">
+                <g>
                   <path
                     id="g-svg-357"
                     fill="none"
@@ -3896,10 +3737,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 520,50 L 520,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,540,50)">
+                <g>
                   <path
                     id="g-svg-358"
                     fill="none"
@@ -3907,10 +3748,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 540,50 L 540,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,560,50)">
+                <g>
                   <path
                     id="g-svg-359"
                     fill="none"
@@ -3918,10 +3759,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 560,50 L 560,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,580,50)">
+                <g>
                   <path
                     id="g-svg-360"
                     fill="none"
@@ -3929,67 +3770,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 580,50 L 580,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-340"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-340" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-361"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-362"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,50)">
+          <g id="g-svg-361" fill="none" class="axis-main-group">
+            <g id="g-svg-362" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-363"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="415"
-                  y2="-1.83697019872103e-15"
+                  x1="200"
+                  y1="50"
+                  x2="615"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,415,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,615,50)">
                   <path
                     id="g-svg-365"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-366"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-366" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-367"
                 fill="none"
                 transform="matrix(1,0,0,1,200,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-387"
                     fill="none"
@@ -4009,7 +3829,7 @@
                 transform="matrix(1,0,0,1,220,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-388"
                     fill="none"
@@ -4029,7 +3849,7 @@
                 transform="matrix(1,0,0,1,240,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-389"
                     fill="none"
@@ -4049,7 +3869,7 @@
                 transform="matrix(1,0,0,1,260,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-390"
                     fill="none"
@@ -4069,7 +3889,7 @@
                 transform="matrix(1,0,0,1,280,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-391"
                     fill="none"
@@ -4089,7 +3909,7 @@
                 transform="matrix(1,0,0,1,300,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-392"
                     fill="none"
@@ -4109,7 +3929,7 @@
                 transform="matrix(1,0,0,1,320,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-393"
                     fill="none"
@@ -4129,7 +3949,7 @@
                 transform="matrix(1,0,0,1,340,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-394"
                     fill="none"
@@ -4149,7 +3969,7 @@
                 transform="matrix(1,0,0,1,360,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-395"
                     fill="none"
@@ -4169,7 +3989,7 @@
                 transform="matrix(1,0,0,1,380,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-396"
                     fill="none"
@@ -4189,7 +4009,7 @@
                 transform="matrix(1,0,0,1,400,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-397"
                     fill="none"
@@ -4209,7 +4029,7 @@
                 transform="matrix(1,0,0,1,420,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-398"
                     fill="none"
@@ -4229,7 +4049,7 @@
                 transform="matrix(1,0,0,1,440,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-399"
                     fill="none"
@@ -4249,7 +4069,7 @@
                 transform="matrix(1,0,0,1,460,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-400"
                     fill="none"
@@ -4269,7 +4089,7 @@
                 transform="matrix(1,0,0,1,480,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-401"
                     fill="none"
@@ -4289,7 +4109,7 @@
                 transform="matrix(1,0,0,1,500,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-402"
                     fill="none"
@@ -4309,7 +4129,7 @@
                 transform="matrix(1,0,0,1,520,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-403"
                     fill="none"
@@ -4329,7 +4149,7 @@
                 transform="matrix(1,0,0,1,540,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-404"
                     fill="none"
@@ -4349,7 +4169,7 @@
                 transform="matrix(1,0,0,1,560,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-405"
                     fill="none"
@@ -4369,7 +4189,7 @@
                 transform="matrix(1,0,0,1,580,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-406"
                     fill="none"
@@ -4384,19 +4204,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-407"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-407" fill="none" class="axis-label-group">
               <g
                 id="g-svg-408"
                 fill="none"
                 transform="matrix(1,0,0,1,200,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-428"
                     fill="rgba(0,0,0,1)"
@@ -4423,7 +4238,7 @@
                 transform="matrix(1,0,0,1,220,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-429"
                     fill="rgba(0,0,0,1)"
@@ -4450,7 +4265,7 @@
                 transform="matrix(1,0,0,1,240,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-430"
                     fill="rgba(0,0,0,1)"
@@ -4477,7 +4292,7 @@
                 transform="matrix(1,0,0,1,260,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-431"
                     fill="rgba(0,0,0,1)"
@@ -4504,7 +4319,7 @@
                 transform="matrix(1,0,0,1,280,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-432"
                     fill="rgba(0,0,0,1)"
@@ -4531,7 +4346,7 @@
                 transform="matrix(1,0,0,1,300,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-433"
                     fill="rgba(0,0,0,1)"
@@ -4558,7 +4373,7 @@
                 transform="matrix(1,0,0,1,320,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-434"
                     fill="rgba(0,0,0,1)"
@@ -4585,7 +4400,7 @@
                 transform="matrix(1,0,0,1,340,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-435"
                     fill="rgba(0,0,0,1)"
@@ -4612,7 +4427,7 @@
                 transform="matrix(1,0,0,1,360,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-436"
                     fill="rgba(0,0,0,1)"
@@ -4639,7 +4454,7 @@
                 transform="matrix(1,0,0,1,380,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-437"
                     fill="rgba(0,0,0,1)"
@@ -4666,7 +4481,7 @@
                 transform="matrix(1,0,0,1,400,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-438"
                     fill="rgba(0,0,0,1)"
@@ -4693,7 +4508,7 @@
                 transform="matrix(1,0,0,1,420,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-439"
                     fill="rgba(0,0,0,1)"
@@ -4720,7 +4535,7 @@
                 transform="matrix(1,0,0,1,440,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-440"
                     fill="rgba(0,0,0,1)"
@@ -4747,7 +4562,7 @@
                 transform="matrix(1,0,0,1,460,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-441"
                     fill="rgba(0,0,0,1)"
@@ -4774,7 +4589,7 @@
                 transform="matrix(1,0,0,1,480,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-442"
                     fill="rgba(0,0,0,1)"
@@ -4801,7 +4616,7 @@
                 transform="matrix(1,0,0,1,500,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-443"
                     fill="rgba(0,0,0,1)"
@@ -4828,7 +4643,7 @@
                 transform="matrix(1,0,0,1,520,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-444"
                     fill="rgba(0,0,0,1)"
@@ -4855,7 +4670,7 @@
                 transform="matrix(1,0,0,1,540,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-445"
                     fill="rgba(0,0,0,1)"
@@ -4882,7 +4697,7 @@
                 transform="matrix(1,0,0,1,560,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-446"
                     fill="rgba(0,0,0,1)"
@@ -4909,7 +4724,7 @@
                 transform="matrix(1,0,0,1,580,55)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-447"
                     fill="rgba(0,0,0,1)"
@@ -4932,33 +4747,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-448"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-448" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-39" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-449"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-450"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-451"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,100)">
+        <g id="g-svg-38" fill="none">
+          <g id="g-svg-449" fill="none" class="axis-grid-group">
+            <g id="g-svg-450" fill="none" class="axis-grid">
+              <g id="g-svg-451" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-453"
                     fill="none"
@@ -4966,10 +4761,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,100 L 200,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,100)">
+                <g>
                   <path
                     id="g-svg-454"
                     fill="none"
@@ -4977,10 +4772,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,100 L 220,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,240,100)">
+                <g>
                   <path
                     id="g-svg-455"
                     fill="none"
@@ -4988,10 +4783,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 240,100 L 240,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,100)">
+                <g>
                   <path
                     id="g-svg-456"
                     fill="none"
@@ -4999,10 +4794,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 260,100 L 260,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,280,100)">
+                <g>
                   <path
                     id="g-svg-457"
                     fill="none"
@@ -5010,10 +4805,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 280,100 L 280,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,100)">
+                <g>
                   <path
                     id="g-svg-458"
                     fill="none"
@@ -5021,10 +4816,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,100 L 300,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,100)">
+                <g>
                   <path
                     id="g-svg-459"
                     fill="none"
@@ -5032,10 +4827,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 320,100 L 320,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,340,100)">
+                <g>
                   <path
                     id="g-svg-460"
                     fill="none"
@@ -5043,10 +4838,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 340,100 L 340,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,360,100)">
+                <g>
                   <path
                     id="g-svg-461"
                     fill="none"
@@ -5054,10 +4849,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 360,100 L 360,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,100)">
+                <g>
                   <path
                     id="g-svg-462"
                     fill="none"
@@ -5065,10 +4860,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 380,100 L 380,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,100)">
+                <g>
                   <path
                     id="g-svg-463"
                     fill="none"
@@ -5076,10 +4871,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,100 L 400,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,420,100)">
+                <g>
                   <path
                     id="g-svg-464"
                     fill="none"
@@ -5087,10 +4882,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 420,100 L 420,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,440,100)">
+                <g>
                   <path
                     id="g-svg-465"
                     fill="none"
@@ -5098,10 +4893,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 440,100 L 440,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,460,100)">
+                <g>
                   <path
                     id="g-svg-466"
                     fill="none"
@@ -5109,10 +4904,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 460,100 L 460,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,480,100)">
+                <g>
                   <path
                     id="g-svg-467"
                     fill="none"
@@ -5120,10 +4915,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 480,100 L 480,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,500,100)">
+                <g>
                   <path
                     id="g-svg-468"
                     fill="none"
@@ -5131,10 +4926,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,100 L 500,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,520,100)">
+                <g>
                   <path
                     id="g-svg-469"
                     fill="none"
@@ -5142,10 +4937,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 520,100 L 520,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,540,100)">
+                <g>
                   <path
                     id="g-svg-470"
                     fill="none"
@@ -5153,10 +4948,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 540,100 L 540,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,560,100)">
+                <g>
                   <path
                     id="g-svg-471"
                     fill="none"
@@ -5164,10 +4959,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 560,100 L 560,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,580,100)">
+                <g>
                   <path
                     id="g-svg-472"
                     fill="none"
@@ -5175,67 +4970,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 580,100 L 580,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-452"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-452" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-473"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-474"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,100)">
+          <g id="g-svg-473" fill="none" class="axis-main-group">
+            <g id="g-svg-474" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-475"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="415"
-                  y2="-1.83697019872103e-15"
+                  x1="200"
+                  y1="100"
+                  x2="615"
+                  y2="100"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,415,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,615,100)">
                   <path
                     id="g-svg-477"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-478"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-478" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-479"
                 fill="none"
                 transform="matrix(1,0,0,1,200,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-499"
                     fill="none"
@@ -5255,7 +5029,7 @@
                 transform="matrix(1,0,0,1,220,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-500"
                     fill="none"
@@ -5275,7 +5049,7 @@
                 transform="matrix(1,0,0,1,240,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-501"
                     fill="none"
@@ -5295,7 +5069,7 @@
                 transform="matrix(1,0,0,1,260,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-502"
                     fill="none"
@@ -5315,7 +5089,7 @@
                 transform="matrix(1,0,0,1,280,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-503"
                     fill="none"
@@ -5335,7 +5109,7 @@
                 transform="matrix(1,0,0,1,300,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-504"
                     fill="none"
@@ -5355,7 +5129,7 @@
                 transform="matrix(1,0,0,1,320,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-505"
                     fill="none"
@@ -5375,7 +5149,7 @@
                 transform="matrix(1,0,0,1,340,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-506"
                     fill="none"
@@ -5395,7 +5169,7 @@
                 transform="matrix(1,0,0,1,360,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-507"
                     fill="none"
@@ -5415,7 +5189,7 @@
                 transform="matrix(1,0,0,1,380,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-508"
                     fill="none"
@@ -5435,7 +5209,7 @@
                 transform="matrix(1,0,0,1,400,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-509"
                     fill="none"
@@ -5455,7 +5229,7 @@
                 transform="matrix(1,0,0,1,420,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-510"
                     fill="none"
@@ -5475,7 +5249,7 @@
                 transform="matrix(1,0,0,1,440,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-511"
                     fill="none"
@@ -5495,7 +5269,7 @@
                 transform="matrix(1,0,0,1,460,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-512"
                     fill="none"
@@ -5515,7 +5289,7 @@
                 transform="matrix(1,0,0,1,480,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-513"
                     fill="none"
@@ -5535,7 +5309,7 @@
                 transform="matrix(1,0,0,1,500,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-514"
                     fill="none"
@@ -5555,7 +5329,7 @@
                 transform="matrix(1,0,0,1,520,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-515"
                     fill="none"
@@ -5575,7 +5349,7 @@
                 transform="matrix(1,0,0,1,540,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-516"
                     fill="none"
@@ -5595,7 +5369,7 @@
                 transform="matrix(1,0,0,1,560,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-517"
                     fill="none"
@@ -5615,7 +5389,7 @@
                 transform="matrix(1,0,0,1,580,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-518"
                     fill="none"
@@ -5630,19 +5404,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-519"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-519" fill="none" class="axis-label-group">
               <g
                 id="g-svg-520"
                 fill="none"
                 transform="matrix(1,0,0,1,200,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-540"
                     fill="rgba(0,0,0,1)"
@@ -5669,7 +5438,7 @@
                 transform="matrix(1,0,0,1,220,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-541"
                     fill="rgba(0,0,0,1)"
@@ -5696,7 +5465,7 @@
                 transform="matrix(1,0,0,1,240,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-542"
                     fill="rgba(0,0,0,1)"
@@ -5723,7 +5492,7 @@
                 transform="matrix(1,0,0,1,260,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-543"
                     fill="rgba(0,0,0,1)"
@@ -5750,7 +5519,7 @@
                 transform="matrix(1,0,0,1,280,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-544"
                     fill="rgba(0,0,0,1)"
@@ -5777,7 +5546,7 @@
                 transform="matrix(1,0,0,1,300,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-545"
                     fill="rgba(0,0,0,1)"
@@ -5804,7 +5573,7 @@
                 transform="matrix(1,0,0,1,320,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-546"
                     fill="rgba(0,0,0,1)"
@@ -5831,7 +5600,7 @@
                 transform="matrix(1,0,0,1,340,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-547"
                     fill="rgba(0,0,0,1)"
@@ -5858,7 +5627,7 @@
                 transform="matrix(1,0,0,1,360,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-548"
                     fill="rgba(0,0,0,1)"
@@ -5885,7 +5654,7 @@
                 transform="matrix(1,0,0,1,380,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-549"
                     fill="rgba(0,0,0,1)"
@@ -5912,7 +5681,7 @@
                 transform="matrix(1,0,0,1,400,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-550"
                     fill="rgba(0,0,0,1)"
@@ -5939,7 +5708,7 @@
                 transform="matrix(1,0,0,1,420,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-551"
                     fill="rgba(0,0,0,1)"
@@ -5966,7 +5735,7 @@
                 transform="matrix(1,0,0,1,440,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-552"
                     fill="rgba(0,0,0,1)"
@@ -5993,7 +5762,7 @@
                 transform="matrix(1,0,0,1,460,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-553"
                     fill="rgba(0,0,0,1)"
@@ -6020,7 +5789,7 @@
                 transform="matrix(1,0,0,1,480,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-554"
                     fill="rgba(0,0,0,1)"
@@ -6047,7 +5816,7 @@
                 transform="matrix(1,0,0,1,500,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-555"
                     fill="rgba(0,0,0,1)"
@@ -6074,7 +5843,7 @@
                 transform="matrix(1,0,0,1,520,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-556"
                     fill="rgba(0,0,0,1)"
@@ -6101,7 +5870,7 @@
                 transform="matrix(1,0,0,1,540,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-557"
                     fill="rgba(0,0,0,1)"
@@ -6128,7 +5897,7 @@
                 transform="matrix(1,0,0,1,560,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-558"
                     fill="rgba(0,0,0,1)"
@@ -6155,7 +5924,7 @@
                 transform="matrix(1,0,0,1,580,115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-559"
                     fill="rgba(0,0,0,1)"
@@ -6178,33 +5947,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-560"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-560" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-40" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-561"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-562"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-563"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,150)">
+        <g id="g-svg-39" fill="none">
+          <g id="g-svg-561" fill="none" class="axis-grid-group">
+            <g id="g-svg-562" fill="none" class="axis-grid">
+              <g id="g-svg-563" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-565"
                     fill="none"
@@ -6212,10 +5961,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,150 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,150)">
+                <g>
                   <path
                     id="g-svg-566"
                     fill="none"
@@ -6223,10 +5972,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,150 L 220,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,240,150)">
+                <g>
                   <path
                     id="g-svg-567"
                     fill="none"
@@ -6234,10 +5983,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 240,150 L 240,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,150)">
+                <g>
                   <path
                     id="g-svg-568"
                     fill="none"
@@ -6245,10 +5994,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 260,150 L 260,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,280,150)">
+                <g>
                   <path
                     id="g-svg-569"
                     fill="none"
@@ -6256,10 +6005,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 280,150 L 280,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,150)">
+                <g>
                   <path
                     id="g-svg-570"
                     fill="none"
@@ -6267,10 +6016,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,150 L 300,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,150)">
+                <g>
                   <path
                     id="g-svg-571"
                     fill="none"
@@ -6278,10 +6027,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 320,150 L 320,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,340,150)">
+                <g>
                   <path
                     id="g-svg-572"
                     fill="none"
@@ -6289,10 +6038,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 340,150 L 340,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,360,150)">
+                <g>
                   <path
                     id="g-svg-573"
                     fill="none"
@@ -6300,10 +6049,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 360,150 L 360,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,150)">
+                <g>
                   <path
                     id="g-svg-574"
                     fill="none"
@@ -6311,10 +6060,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 380,150 L 380,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,150)">
+                <g>
                   <path
                     id="g-svg-575"
                     fill="none"
@@ -6322,10 +6071,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,150 L 400,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,420,150)">
+                <g>
                   <path
                     id="g-svg-576"
                     fill="none"
@@ -6333,10 +6082,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 420,150 L 420,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,440,150)">
+                <g>
                   <path
                     id="g-svg-577"
                     fill="none"
@@ -6344,10 +6093,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 440,150 L 440,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,460,150)">
+                <g>
                   <path
                     id="g-svg-578"
                     fill="none"
@@ -6355,10 +6104,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 460,150 L 460,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,480,150)">
+                <g>
                   <path
                     id="g-svg-579"
                     fill="none"
@@ -6366,10 +6115,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 480,150 L 480,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,500,150)">
+                <g>
                   <path
                     id="g-svg-580"
                     fill="none"
@@ -6377,10 +6126,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,150 L 500,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,520,150)">
+                <g>
                   <path
                     id="g-svg-581"
                     fill="none"
@@ -6388,10 +6137,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 520,150 L 520,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,540,150)">
+                <g>
                   <path
                     id="g-svg-582"
                     fill="none"
@@ -6399,10 +6148,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 540,150 L 540,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,560,150)">
+                <g>
                   <path
                     id="g-svg-583"
                     fill="none"
@@ -6410,10 +6159,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 560,150 L 560,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,580,150)">
+                <g>
                   <path
                     id="g-svg-584"
                     fill="none"
@@ -6421,74 +6170,53 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 580,150 L 580,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-564"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-564" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-585"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-586"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,150)">
+          <g id="g-svg-585" fill="none" class="axis-main-group">
+            <g id="g-svg-586" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-587"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="415"
-                  y2="-1.83697019872103e-15"
+                  x1="200"
+                  y1="150"
+                  x2="615"
+                  y2="150"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,415,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,615,150)">
                   <path
                     id="g-svg-589"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-590"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-590" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-591"
                 fill="none"
                 transform="matrix(1,0,0,1,200,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-611"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6501,14 +6229,14 @@
                 transform="matrix(1,0,0,1,220,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-612"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6521,14 +6249,14 @@
                 transform="matrix(1,0,0,1,240,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-613"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6541,14 +6269,14 @@
                 transform="matrix(1,0,0,1,260,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-614"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6561,14 +6289,14 @@
                 transform="matrix(1,0,0,1,280,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-615"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6581,14 +6309,14 @@
                 transform="matrix(1,0,0,1,300,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-616"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6601,14 +6329,14 @@
                 transform="matrix(1,0,0,1,320,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-617"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6621,14 +6349,14 @@
                 transform="matrix(1,0,0,1,340,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-618"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6641,14 +6369,14 @@
                 transform="matrix(1,0,0,1,360,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-619"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6661,14 +6389,14 @@
                 transform="matrix(1,0,0,1,380,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-620"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6681,14 +6409,14 @@
                 transform="matrix(1,0,0,1,400,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-621"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6701,14 +6429,14 @@
                 transform="matrix(1,0,0,1,420,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-622"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6721,14 +6449,14 @@
                 transform="matrix(1,0,0,1,440,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-623"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6741,14 +6469,14 @@
                 transform="matrix(1,0,0,1,460,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-624"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6761,14 +6489,14 @@
                 transform="matrix(1,0,0,1,480,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-625"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6781,14 +6509,14 @@
                 transform="matrix(1,0,0,1,500,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-626"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6801,14 +6529,14 @@
                 transform="matrix(1,0,0,1,520,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-627"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6821,14 +6549,14 @@
                 transform="matrix(1,0,0,1,540,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-628"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6841,14 +6569,14 @@
                 transform="matrix(1,0,0,1,560,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-629"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6861,14 +6589,14 @@
                 transform="matrix(1,0,0,1,580,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
                     id="g-svg-630"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
@@ -6876,19 +6604,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-631"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-631" fill="none" class="axis-label-group">
               <g
                 id="g-svg-632"
                 fill="none"
                 transform="matrix(1,0,0,1,200,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-652"
                     fill="rgba(0,0,0,1)"
@@ -6915,7 +6638,7 @@
                 transform="matrix(1,0,0,1,220,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-653"
                     fill="rgba(0,0,0,1)"
@@ -6942,7 +6665,7 @@
                 transform="matrix(1,0,0,1,240,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-654"
                     fill="rgba(0,0,0,1)"
@@ -6969,7 +6692,7 @@
                 transform="matrix(1,0,0,1,260,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-655"
                     fill="rgba(0,0,0,1)"
@@ -6996,7 +6719,7 @@
                 transform="matrix(1,0,0,1,280,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-656"
                     fill="rgba(0,0,0,1)"
@@ -7023,7 +6746,7 @@
                 transform="matrix(1,0,0,1,300,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-657"
                     fill="rgba(0,0,0,1)"
@@ -7050,7 +6773,7 @@
                 transform="matrix(1,0,0,1,320,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-658"
                     fill="rgba(0,0,0,1)"
@@ -7077,7 +6800,7 @@
                 transform="matrix(1,0,0,1,340,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-659"
                     fill="rgba(0,0,0,1)"
@@ -7104,7 +6827,7 @@
                 transform="matrix(1,0,0,1,360,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-660"
                     fill="rgba(0,0,0,1)"
@@ -7131,7 +6854,7 @@
                 transform="matrix(1,0,0,1,380,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-661"
                     fill="rgba(0,0,0,1)"
@@ -7158,7 +6881,7 @@
                 transform="matrix(1,0,0,1,400,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-662"
                     fill="rgba(0,0,0,1)"
@@ -7185,7 +6908,7 @@
                 transform="matrix(1,0,0,1,420,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-663"
                     fill="rgba(0,0,0,1)"
@@ -7212,7 +6935,7 @@
                 transform="matrix(1,0,0,1,440,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-664"
                     fill="rgba(0,0,0,1)"
@@ -7239,7 +6962,7 @@
                 transform="matrix(1,0,0,1,460,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-665"
                     fill="rgba(0,0,0,1)"
@@ -7266,7 +6989,7 @@
                 transform="matrix(1,0,0,1,480,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-666"
                     fill="rgba(0,0,0,1)"
@@ -7293,7 +7016,7 @@
                 transform="matrix(1,0,0,1,500,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-667"
                     fill="rgba(0,0,0,1)"
@@ -7320,7 +7043,7 @@
                 transform="matrix(1,0,0,1,520,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-668"
                     fill="rgba(0,0,0,1)"
@@ -7347,7 +7070,7 @@
                 transform="matrix(1,0,0,1,540,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-669"
                     fill="rgba(0,0,0,1)"
@@ -7374,7 +7097,7 @@
                 transform="matrix(1,0,0,1,560,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-670"
                     fill="rgba(0,0,0,1)"
@@ -7401,7 +7124,7 @@
                 transform="matrix(1,0,0,1,580,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-671"
                     fill="rgba(0,0,0,1)"
@@ -7424,33 +7147,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-672"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-672" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-41" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-673"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-674"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-675"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+        <g id="g-svg-40" fill="none">
+          <g id="g-svg-673" fill="none" class="axis-grid-group">
+            <g id="g-svg-674" fill="none" class="axis-grid">
+              <g id="g-svg-675" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-677"
                     fill="none"
@@ -7458,10 +7161,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,200)">
+                <g>
                   <path
                     id="g-svg-678"
                     fill="none"
@@ -7469,10 +7172,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,200 L 220,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,240,200)">
+                <g>
                   <path
                     id="g-svg-679"
                     fill="none"
@@ -7480,10 +7183,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 240,200 L 240,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,200)">
+                <g>
                   <path
                     id="g-svg-680"
                     fill="none"
@@ -7491,10 +7194,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 260,200 L 260,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,280,200)">
+                <g>
                   <path
                     id="g-svg-681"
                     fill="none"
@@ -7502,10 +7205,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 280,200 L 280,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,200)">
+                <g>
                   <path
                     id="g-svg-682"
                     fill="none"
@@ -7513,10 +7216,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,200 L 300,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,200)">
+                <g>
                   <path
                     id="g-svg-683"
                     fill="none"
@@ -7524,10 +7227,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 320,200 L 320,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,340,200)">
+                <g>
                   <path
                     id="g-svg-684"
                     fill="none"
@@ -7535,10 +7238,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 340,200 L 340,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,360,200)">
+                <g>
                   <path
                     id="g-svg-685"
                     fill="none"
@@ -7546,10 +7249,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 360,200 L 360,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,200)">
+                <g>
                   <path
                     id="g-svg-686"
                     fill="none"
@@ -7557,10 +7260,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 380,200 L 380,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,200)">
+                <g>
                   <path
                     id="g-svg-687"
                     fill="none"
@@ -7568,10 +7271,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,200 L 400,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,420,200)">
+                <g>
                   <path
                     id="g-svg-688"
                     fill="none"
@@ -7579,10 +7282,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 420,200 L 420,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,440,200)">
+                <g>
                   <path
                     id="g-svg-689"
                     fill="none"
@@ -7590,10 +7293,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 440,200 L 440,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,460,200)">
+                <g>
                   <path
                     id="g-svg-690"
                     fill="none"
@@ -7601,10 +7304,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 460,200 L 460,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,480,200)">
+                <g>
                   <path
                     id="g-svg-691"
                     fill="none"
@@ -7612,10 +7315,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 480,200 L 480,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,500,200)">
+                <g>
                   <path
                     id="g-svg-692"
                     fill="none"
@@ -7623,10 +7326,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,200 L 500,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,520,200)">
+                <g>
                   <path
                     id="g-svg-693"
                     fill="none"
@@ -7634,10 +7337,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 520,200 L 520,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,540,200)">
+                <g>
                   <path
                     id="g-svg-694"
                     fill="none"
@@ -7645,10 +7348,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 540,200 L 540,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,560,200)">
+                <g>
                   <path
                     id="g-svg-695"
                     fill="none"
@@ -7656,10 +7359,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 560,200 L 560,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,580,200)">
+                <g>
                   <path
                     id="g-svg-696"
                     fill="none"
@@ -7667,67 +7370,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 580,200 L 580,200"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-676"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-676" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-697"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-698"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,200)">
+          <g id="g-svg-697" fill="none" class="axis-main-group">
+            <g id="g-svg-698" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-699"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="415"
-                  y2="-1.83697019872103e-15"
+                  x1="200"
+                  y1="200"
+                  x2="615"
+                  y2="200"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,415,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,615,200)">
                   <path
                     id="g-svg-701"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-702"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-702" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-703"
                 fill="none"
                 transform="matrix(1,0,0,1,200,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-723"
                     fill="none"
@@ -7747,7 +7429,7 @@
                 transform="matrix(1,0,0,1,220,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-724"
                     fill="none"
@@ -7767,7 +7449,7 @@
                 transform="matrix(1,0,0,1,240,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-725"
                     fill="none"
@@ -7787,7 +7469,7 @@
                 transform="matrix(1,0,0,1,260,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-726"
                     fill="none"
@@ -7807,7 +7489,7 @@
                 transform="matrix(1,0,0,1,280,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-727"
                     fill="none"
@@ -7827,7 +7509,7 @@
                 transform="matrix(1,0,0,1,300,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-728"
                     fill="none"
@@ -7847,7 +7529,7 @@
                 transform="matrix(1,0,0,1,320,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-729"
                     fill="none"
@@ -7867,7 +7549,7 @@
                 transform="matrix(1,0,0,1,340,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-730"
                     fill="none"
@@ -7887,7 +7569,7 @@
                 transform="matrix(1,0,0,1,360,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-731"
                     fill="none"
@@ -7907,7 +7589,7 @@
                 transform="matrix(1,0,0,1,380,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-732"
                     fill="none"
@@ -7927,7 +7609,7 @@
                 transform="matrix(1,0,0,1,400,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-733"
                     fill="none"
@@ -7947,7 +7629,7 @@
                 transform="matrix(1,0,0,1,420,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-734"
                     fill="none"
@@ -7967,7 +7649,7 @@
                 transform="matrix(1,0,0,1,440,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-735"
                     fill="none"
@@ -7987,7 +7669,7 @@
                 transform="matrix(1,0,0,1,460,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-736"
                     fill="none"
@@ -8007,7 +7689,7 @@
                 transform="matrix(1,0,0,1,480,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-737"
                     fill="none"
@@ -8027,7 +7709,7 @@
                 transform="matrix(1,0,0,1,500,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-738"
                     fill="none"
@@ -8047,7 +7729,7 @@
                 transform="matrix(1,0,0,1,520,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-739"
                     fill="none"
@@ -8067,7 +7749,7 @@
                 transform="matrix(1,0,0,1,540,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-740"
                     fill="none"
@@ -8087,7 +7769,7 @@
                 transform="matrix(1,0,0,1,560,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-741"
                     fill="none"
@@ -8107,7 +7789,7 @@
                 transform="matrix(1,0,0,1,580,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-742"
                     fill="none"
@@ -8122,19 +7804,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-743"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-743" fill="none" class="axis-label-group">
               <g
                 id="g-svg-744"
                 fill="none"
                 transform="matrix(1,0,0,1,200,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-764"
                     fill="rgba(0,0,0,1)"
@@ -8161,7 +7838,7 @@
                 transform="matrix(1,0,0,1,220,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-765"
                     fill="rgba(0,0,0,1)"
@@ -8188,7 +7865,7 @@
                 transform="matrix(1,0,0,1,240,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-766"
                     fill="rgba(0,0,0,1)"
@@ -8215,7 +7892,7 @@
                 transform="matrix(1,0,0,1,260,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-767"
                     fill="rgba(0,0,0,1)"
@@ -8242,7 +7919,7 @@
                 transform="matrix(1,0,0,1,280,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-768"
                     fill="rgba(0,0,0,1)"
@@ -8269,7 +7946,7 @@
                 transform="matrix(1,0,0,1,300,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-769"
                     fill="rgba(0,0,0,1)"
@@ -8296,7 +7973,7 @@
                 transform="matrix(1,0,0,1,320,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-770"
                     fill="rgba(0,0,0,1)"
@@ -8323,7 +8000,7 @@
                 transform="matrix(1,0,0,1,340,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-771"
                     fill="rgba(0,0,0,1)"
@@ -8350,7 +8027,7 @@
                 transform="matrix(1,0,0,1,360,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-772"
                     fill="rgba(0,0,0,1)"
@@ -8377,7 +8054,7 @@
                 transform="matrix(1,0,0,1,380,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-773"
                     fill="rgba(0,0,0,1)"
@@ -8404,7 +8081,7 @@
                 transform="matrix(1,0,0,1,400,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-774"
                     fill="rgba(0,0,0,1)"
@@ -8431,7 +8108,7 @@
                 transform="matrix(1,0,0,1,420,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-775"
                     fill="rgba(0,0,0,1)"
@@ -8458,7 +8135,7 @@
                 transform="matrix(1,0,0,1,440,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-776"
                     fill="rgba(0,0,0,1)"
@@ -8485,7 +8162,7 @@
                 transform="matrix(1,0,0,1,460,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-777"
                     fill="rgba(0,0,0,1)"
@@ -8512,7 +8189,7 @@
                 transform="matrix(1,0,0,1,480,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-778"
                     fill="rgba(0,0,0,1)"
@@ -8539,7 +8216,7 @@
                 transform="matrix(1,0,0,1,500,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-779"
                     fill="rgba(0,0,0,1)"
@@ -8566,7 +8243,7 @@
                 transform="matrix(1,0,0,1,520,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-780"
                     fill="rgba(0,0,0,1)"
@@ -8593,7 +8270,7 @@
                 transform="matrix(1,0,0,1,540,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-781"
                     fill="rgba(0,0,0,1)"
@@ -8620,7 +8297,7 @@
                 transform="matrix(1,0,0,1,560,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-782"
                     fill="rgba(0,0,0,1)"
@@ -8647,7 +8324,7 @@
                 transform="matrix(1,0,0,1,580,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-783"
                     fill="rgba(0,0,0,1)"
@@ -8670,12 +8347,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-784"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-784" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearTime1.svg b/__tests__/integration/snapshots/AxisLinearTime1.svg
index 7960d8083..43882f810 100644
--- a/__tests__/integration/snapshots/AxisLinearTime1.svg
+++ b/__tests__/integration/snapshots/AxisLinearTime1.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-785"
-        fill="none"
-        width="500"
-        height="350"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-786" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,10)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-785" fill="none" width="500" height="350">
+        <g id="g-svg-786" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,10 L 5,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,46.250000,10)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 46.25,10 L 46.25,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,10)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,10 L 87.5,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,128.750000,10)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 128.75,10 L 128.75,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,10)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,10 L 170,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,211.250000,10)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 211.25,10 L 211.25,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,10)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,10 L 252.5,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,10)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,10 L 293.75,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,10)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,10 L 335,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,376.250000,10)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 376.25,10 L 376.25,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,10)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,10 L 417.5,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,458.750000,10)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,57 +142,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 458.75,10 L 458.75,10"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,10)">
+          <g id="g-svg-17" fill="none" class="axis-main-group">
+            <g id="g-svg-18" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-19"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="10"
+                  x2="500"
+                  y2="10"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-20"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-20" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-21"
                 fill="none"
                 transform="matrix(1,0,0,1,5,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -233,7 +192,7 @@
                 transform="matrix(1,0,0,1,46.250000,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
@@ -253,7 +212,7 @@
                 transform="matrix(1,0,0,1,87.500000,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
@@ -273,7 +232,7 @@
                 transform="matrix(1,0,0,1,128.750000,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
@@ -293,7 +252,7 @@
                 transform="matrix(1,0,0,1,170,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -313,7 +272,7 @@
                 transform="matrix(1,0,0,1,211.250000,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -333,7 +292,7 @@
                 transform="matrix(1,0,0,1,252.500000,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -353,7 +312,7 @@
                 transform="matrix(1,0,0,1,293.750000,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -373,7 +332,7 @@
                 transform="matrix(1,0,0,1,335,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-41"
                     fill="none"
@@ -393,7 +352,7 @@
                 transform="matrix(1,0,0,1,376.250000,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-42"
                     fill="none"
@@ -413,7 +372,7 @@
                 transform="matrix(1,0,0,1,417.500000,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-43"
                     fill="none"
@@ -433,7 +392,7 @@
                 transform="matrix(1,0,0,1,458.750000,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-44"
                     fill="none"
@@ -448,19 +407,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-45"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-45" fill="none" class="axis-label-group">
               <g
                 id="g-svg-46"
                 fill="none"
-                transform="matrix(1,0,0,1,10,13)"
+                transform="matrix(1,0,0,1,5,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-58"
                     fill="rgba(110,110,110,1)"
@@ -484,10 +438,10 @@
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(1,0,0,1,51.250000,13)"
+                transform="matrix(1,0,0,1,46.250000,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-59"
                     fill="rgba(110,110,110,1)"
@@ -511,10 +465,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,13)"
+                transform="matrix(1,0,0,1,87.500000,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-60"
                     fill="rgba(110,110,110,1)"
@@ -538,10 +492,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(1,0,0,1,133.750000,13)"
+                transform="matrix(1,0,0,1,128.750000,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-61"
                     fill="rgba(110,110,110,1)"
@@ -565,10 +519,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(1,0,0,1,175,13)"
+                transform="matrix(1,0,0,1,170,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-62"
                     fill="rgba(110,110,110,1)"
@@ -595,10 +549,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(1,0,0,1,216.250000,13)"
+                transform="matrix(1,0,0,1,211.250000,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-63"
                     fill="rgba(110,110,110,1)"
@@ -622,10 +576,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,13)"
+                transform="matrix(1,0,0,1,252.500000,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-64"
                     fill="rgba(110,110,110,1)"
@@ -649,10 +603,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(1,0,0,1,298.750000,13)"
+                transform="matrix(1,0,0,1,293.750000,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-65"
                     fill="rgba(110,110,110,1)"
@@ -676,10 +630,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(1,0,0,1,340,13)"
+                transform="matrix(1,0,0,1,335,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-66"
                     fill="rgba(110,110,110,1)"
@@ -703,10 +657,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(1,0,0,1,381.250000,13)"
+                transform="matrix(1,0,0,1,376.250000,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-67"
                     fill="rgba(110,110,110,1)"
@@ -730,10 +684,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,13)"
+                transform="matrix(1,0,0,1,417.500000,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-68"
                     fill="rgba(110,110,110,1)"
@@ -757,10 +711,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(1,0,0,1,463.750000,13)"
+                transform="matrix(1,0,0,1,458.750000,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-69"
                     fill="rgba(110,110,110,1)"
@@ -783,33 +737,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-70"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-70" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-787" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-72"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-73"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,50)">
+        <g id="g-svg-787" fill="none">
+          <g id="g-svg-71" fill="none" class="axis-grid-group">
+            <g id="g-svg-72" fill="none" class="axis-grid">
+              <g id="g-svg-73" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-75"
                     fill="none"
@@ -817,10 +751,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,50 L 5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,46.250000,50)">
+                <g>
                   <path
                     id="g-svg-76"
                     fill="none"
@@ -828,10 +762,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 46.25,50 L 46.25,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,50)">
+                <g>
                   <path
                     id="g-svg-77"
                     fill="none"
@@ -839,10 +773,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,50 L 87.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,128.750000,50)">
+                <g>
                   <path
                     id="g-svg-78"
                     fill="none"
@@ -850,10 +784,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 128.75,50 L 128.75,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,50)">
+                <g>
                   <path
                     id="g-svg-79"
                     fill="none"
@@ -861,10 +795,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,50 L 170,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,211.250000,50)">
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
@@ -872,10 +806,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 211.25,50 L 211.25,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,50)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
@@ -883,10 +817,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,50 L 252.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,50)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
@@ -894,10 +828,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,50 L 293.75,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,50)">
+                <g>
                   <path
                     id="g-svg-83"
                     fill="none"
@@ -905,10 +839,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,50 L 335,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,376.250000,50)">
+                <g>
                   <path
                     id="g-svg-84"
                     fill="none"
@@ -916,10 +850,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 376.25,50 L 376.25,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,50)">
+                <g>
                   <path
                     id="g-svg-85"
                     fill="none"
@@ -927,10 +861,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,50 L 417.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,458.750000,50)">
+                <g>
                   <path
                     id="g-svg-86"
                     fill="none"
@@ -938,57 +872,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 458.75,50 L 458.75,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-74"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-74" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-87"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-88"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,50)">
+          <g id="g-svg-87" fill="none" class="axis-main-group">
+            <g id="g-svg-88" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-89"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="50"
+                  x2="500"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-90"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-90" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-91"
                 fill="none"
                 transform="matrix(1,0,0,1,5,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-103"
                     fill="none"
@@ -1008,7 +922,7 @@
                 transform="matrix(1,0,0,1,46.250000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-104"
                     fill="none"
@@ -1028,7 +942,7 @@
                 transform="matrix(1,0,0,1,87.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-105"
                     fill="none"
@@ -1048,7 +962,7 @@
                 transform="matrix(1,0,0,1,128.750000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-106"
                     fill="none"
@@ -1068,7 +982,7 @@
                 transform="matrix(1,0,0,1,170,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-107"
                     fill="none"
@@ -1088,7 +1002,7 @@
                 transform="matrix(1,0,0,1,211.250000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-108"
                     fill="none"
@@ -1108,7 +1022,7 @@
                 transform="matrix(1,0,0,1,252.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-109"
                     fill="none"
@@ -1128,7 +1042,7 @@
                 transform="matrix(1,0,0,1,293.750000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-110"
                     fill="none"
@@ -1148,7 +1062,7 @@
                 transform="matrix(1,0,0,1,335,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-111"
                     fill="none"
@@ -1168,7 +1082,7 @@
                 transform="matrix(1,0,0,1,376.250000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-112"
                     fill="none"
@@ -1188,7 +1102,7 @@
                 transform="matrix(1,0,0,1,417.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-113"
                     fill="none"
@@ -1208,7 +1122,7 @@
                 transform="matrix(1,0,0,1,458.750000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-114"
                     fill="none"
@@ -1223,19 +1137,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-115"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-115" fill="none" class="axis-label-group">
               <g
                 id="g-svg-116"
                 fill="none"
-                transform="matrix(1,0,0,1,10,53)"
+                transform="matrix(1,0,0,1,5,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-128"
                     fill="rgba(110,110,110,1)"
@@ -1259,10 +1168,10 @@
               <g
                 id="g-svg-117"
                 fill="none"
-                transform="matrix(1,0,0,1,51.250000,53)"
+                transform="matrix(1,0,0,1,46.250000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-129"
                     fill="rgba(110,110,110,1)"
@@ -1286,10 +1195,10 @@
               <g
                 id="g-svg-118"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,53)"
+                transform="matrix(1,0,0,1,87.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-130"
                     fill="rgba(110,110,110,1)"
@@ -1316,10 +1225,10 @@
               <g
                 id="g-svg-119"
                 fill="none"
-                transform="matrix(1,0,0,1,133.750000,53)"
+                transform="matrix(1,0,0,1,128.750000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-131"
                     fill="rgba(110,110,110,1)"
@@ -1343,10 +1252,10 @@
               <g
                 id="g-svg-120"
                 fill="none"
-                transform="matrix(1,0,0,1,175,53)"
+                transform="matrix(1,0,0,1,170,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-132"
                     fill="rgba(110,110,110,1)"
@@ -1370,10 +1279,10 @@
               <g
                 id="g-svg-121"
                 fill="none"
-                transform="matrix(1,0,0,1,216.250000,53)"
+                transform="matrix(1,0,0,1,211.250000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-133"
                     fill="rgba(110,110,110,1)"
@@ -1397,10 +1306,10 @@
               <g
                 id="g-svg-122"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,53)"
+                transform="matrix(1,0,0,1,252.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-134"
                     fill="rgba(110,110,110,1)"
@@ -1424,10 +1333,10 @@
               <g
                 id="g-svg-123"
                 fill="none"
-                transform="matrix(1,0,0,1,298.750000,53)"
+                transform="matrix(1,0,0,1,293.750000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-135"
                     fill="rgba(110,110,110,1)"
@@ -1451,10 +1360,10 @@
               <g
                 id="g-svg-124"
                 fill="none"
-                transform="matrix(1,0,0,1,340,53)"
+                transform="matrix(1,0,0,1,335,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-136"
                     fill="rgba(110,110,110,1)"
@@ -1481,10 +1390,10 @@
               <g
                 id="g-svg-125"
                 fill="none"
-                transform="matrix(1,0,0,1,381.250000,53)"
+                transform="matrix(1,0,0,1,376.250000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-137"
                     fill="rgba(110,110,110,1)"
@@ -1508,10 +1417,10 @@
               <g
                 id="g-svg-126"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,53)"
+                transform="matrix(1,0,0,1,417.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-138"
                     fill="rgba(110,110,110,1)"
@@ -1535,10 +1444,10 @@
               <g
                 id="g-svg-127"
                 fill="none"
-                transform="matrix(1,0,0,1,463.750000,53)"
+                transform="matrix(1,0,0,1,458.750000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-139"
                     fill="rgba(110,110,110,1)"
@@ -1561,33 +1470,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-140"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-140" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-788" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-141"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-142"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-143"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,90)">
+        <g id="g-svg-788" fill="none">
+          <g id="g-svg-141" fill="none" class="axis-grid-group">
+            <g id="g-svg-142" fill="none" class="axis-grid">
+              <g id="g-svg-143" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-145"
                     fill="none"
@@ -1595,10 +1484,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,90 L 5,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,46.250000,90)">
+                <g>
                   <path
                     id="g-svg-146"
                     fill="none"
@@ -1606,10 +1495,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 46.25,90 L 46.25,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,90)">
+                <g>
                   <path
                     id="g-svg-147"
                     fill="none"
@@ -1617,10 +1506,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,90 L 87.5,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,128.750000,90)">
+                <g>
                   <path
                     id="g-svg-148"
                     fill="none"
@@ -1628,10 +1517,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 128.75,90 L 128.75,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,90)">
+                <g>
                   <path
                     id="g-svg-149"
                     fill="none"
@@ -1639,10 +1528,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,90 L 170,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,211.250000,90)">
+                <g>
                   <path
                     id="g-svg-150"
                     fill="none"
@@ -1650,10 +1539,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 211.25,90 L 211.25,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,90)">
+                <g>
                   <path
                     id="g-svg-151"
                     fill="none"
@@ -1661,10 +1550,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,90 L 252.5,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,90)">
+                <g>
                   <path
                     id="g-svg-152"
                     fill="none"
@@ -1672,10 +1561,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,90 L 293.75,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,90)">
+                <g>
                   <path
                     id="g-svg-153"
                     fill="none"
@@ -1683,10 +1572,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,90 L 335,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,376.250000,90)">
+                <g>
                   <path
                     id="g-svg-154"
                     fill="none"
@@ -1694,10 +1583,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 376.25,90 L 376.25,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,90)">
+                <g>
                   <path
                     id="g-svg-155"
                     fill="none"
@@ -1705,10 +1594,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,90 L 417.5,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,458.750000,90)">
+                <g>
                   <path
                     id="g-svg-156"
                     fill="none"
@@ -1716,57 +1605,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 458.75,90 L 458.75,90"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-144"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-144" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-157"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-158"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,90)">
+          <g id="g-svg-157" fill="none" class="axis-main-group">
+            <g id="g-svg-158" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-159"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="90"
+                  x2="500"
+                  y2="90"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-160"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-160" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-161"
                 fill="none"
                 transform="matrix(1,0,0,1,5,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-173"
                     fill="none"
@@ -1786,7 +1655,7 @@
                 transform="matrix(1,0,0,1,46.250000,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-174"
                     fill="none"
@@ -1806,7 +1675,7 @@
                 transform="matrix(1,0,0,1,87.500000,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-175"
                     fill="none"
@@ -1826,7 +1695,7 @@
                 transform="matrix(1,0,0,1,128.750000,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-176"
                     fill="none"
@@ -1846,7 +1715,7 @@
                 transform="matrix(1,0,0,1,170,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-177"
                     fill="none"
@@ -1866,7 +1735,7 @@
                 transform="matrix(1,0,0,1,211.250000,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-178"
                     fill="none"
@@ -1886,7 +1755,7 @@
                 transform="matrix(1,0,0,1,252.500000,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-179"
                     fill="none"
@@ -1906,7 +1775,7 @@
                 transform="matrix(1,0,0,1,293.750000,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-180"
                     fill="none"
@@ -1926,7 +1795,7 @@
                 transform="matrix(1,0,0,1,335,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-181"
                     fill="none"
@@ -1946,7 +1815,7 @@
                 transform="matrix(1,0,0,1,376.250000,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-182"
                     fill="none"
@@ -1966,7 +1835,7 @@
                 transform="matrix(1,0,0,1,417.500000,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-183"
                     fill="none"
@@ -1986,7 +1855,7 @@
                 transform="matrix(1,0,0,1,458.750000,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-184"
                     fill="none"
@@ -2001,19 +1870,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-185"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-185" fill="none" class="axis-label-group">
               <g
                 id="g-svg-186"
                 fill="none"
-                transform="matrix(1,0,0,1,10,93)"
+                transform="matrix(1,0,0,1,5,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-198"
                     fill="rgba(110,110,110,1)"
@@ -2037,10 +1901,10 @@
               <g
                 id="g-svg-187"
                 fill="none"
-                transform="matrix(1,0,0,1,51.250000,93)"
+                transform="matrix(1,0,0,1,46.250000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-199"
                     fill="rgba(110,110,110,1)"
@@ -2064,10 +1928,10 @@
               <g
                 id="g-svg-188"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,93)"
+                transform="matrix(1,0,0,1,87.500000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-200"
                     fill="rgba(110,110,110,1)"
@@ -2094,10 +1958,10 @@
               <g
                 id="g-svg-189"
                 fill="none"
-                transform="matrix(1,0,0,1,133.750000,93)"
+                transform="matrix(1,0,0,1,128.750000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-201"
                     fill="rgba(110,110,110,1)"
@@ -2121,10 +1985,10 @@
               <g
                 id="g-svg-190"
                 fill="none"
-                transform="matrix(1,0,0,1,175,93)"
+                transform="matrix(1,0,0,1,170,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-202"
                     fill="rgba(110,110,110,1)"
@@ -2148,10 +2012,10 @@
               <g
                 id="g-svg-191"
                 fill="none"
-                transform="matrix(1,0,0,1,216.250000,93)"
+                transform="matrix(1,0,0,1,211.250000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-203"
                     fill="rgba(110,110,110,1)"
@@ -2178,10 +2042,10 @@
               <g
                 id="g-svg-192"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,93)"
+                transform="matrix(1,0,0,1,252.500000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-204"
                     fill="rgba(110,110,110,1)"
@@ -2205,10 +2069,10 @@
               <g
                 id="g-svg-193"
                 fill="none"
-                transform="matrix(1,0,0,1,298.750000,93)"
+                transform="matrix(1,0,0,1,293.750000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-205"
                     fill="rgba(110,110,110,1)"
@@ -2232,10 +2096,10 @@
               <g
                 id="g-svg-194"
                 fill="none"
-                transform="matrix(1,0,0,1,340,93)"
+                transform="matrix(1,0,0,1,335,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-206"
                     fill="rgba(110,110,110,1)"
@@ -2262,10 +2126,10 @@
               <g
                 id="g-svg-195"
                 fill="none"
-                transform="matrix(1,0,0,1,381.250000,93)"
+                transform="matrix(1,0,0,1,376.250000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-207"
                     fill="rgba(110,110,110,1)"
@@ -2289,10 +2153,10 @@
               <g
                 id="g-svg-196"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,93)"
+                transform="matrix(1,0,0,1,417.500000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-208"
                     fill="rgba(110,110,110,1)"
@@ -2316,10 +2180,10 @@
               <g
                 id="g-svg-197"
                 fill="none"
-                transform="matrix(1,0,0,1,463.750000,93)"
+                transform="matrix(1,0,0,1,458.750000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-209"
                     fill="rgba(110,110,110,1)"
@@ -2345,33 +2209,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-210"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-210" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-789" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-211"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-212"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-213"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,130)">
+        <g id="g-svg-789" fill="none">
+          <g id="g-svg-211" fill="none" class="axis-grid-group">
+            <g id="g-svg-212" fill="none" class="axis-grid">
+              <g id="g-svg-213" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-215"
                     fill="none"
@@ -2379,10 +2223,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,130 L 5,130"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,130)">
+                <g>
                   <path
                     id="g-svg-216"
                     fill="none"
@@ -2390,10 +2234,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,130 L 87.5,130"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,130)">
+                <g>
                   <path
                     id="g-svg-217"
                     fill="none"
@@ -2401,10 +2245,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,130 L 170,130"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,130)">
+                <g>
                   <path
                     id="g-svg-218"
                     fill="none"
@@ -2412,10 +2256,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,130 L 252.5,130"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,130)">
+                <g>
                   <path
                     id="g-svg-219"
                     fill="none"
@@ -2423,10 +2267,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,130 L 335,130"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,130)">
+                <g>
                   <path
                     id="g-svg-220"
                     fill="none"
@@ -2434,57 +2278,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,130 L 417.5,130"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-214"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-214" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-221"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-222"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,130)">
+          <g id="g-svg-221" fill="none" class="axis-main-group">
+            <g id="g-svg-222" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-223"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="130"
+                  x2="500"
+                  y2="130"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-224"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-224" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-225"
                 fill="none"
                 transform="matrix(1,0,0,1,5,130)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-231"
                     fill="none"
@@ -2504,7 +2328,7 @@
                 transform="matrix(1,0,0,1,87.500000,130)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-232"
                     fill="none"
@@ -2524,7 +2348,7 @@
                 transform="matrix(1,0,0,1,170,130)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-233"
                     fill="none"
@@ -2544,7 +2368,7 @@
                 transform="matrix(1,0,0,1,252.500000,130)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-234"
                     fill="none"
@@ -2564,7 +2388,7 @@
                 transform="matrix(1,0,0,1,335,130)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-235"
                     fill="none"
@@ -2584,7 +2408,7 @@
                 transform="matrix(1,0,0,1,417.500000,130)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-236"
                     fill="none"
@@ -2599,19 +2423,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-237"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-237" fill="none" class="axis-label-group">
               <g
                 id="g-svg-238"
                 fill="none"
-                transform="matrix(1,0,0,1,10,133)"
+                transform="matrix(1,0,0,1,5,145)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-244"
                     fill="rgba(110,110,110,1)"
@@ -2638,10 +2457,10 @@
               <g
                 id="g-svg-239"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,133)"
+                transform="matrix(1,0,0,1,87.500000,145)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-245"
                     fill="rgba(110,110,110,1)"
@@ -2665,10 +2484,10 @@
               <g
                 id="g-svg-240"
                 fill="none"
-                transform="matrix(1,0,0,1,175,133)"
+                transform="matrix(1,0,0,1,170,145)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-246"
                     fill="rgba(110,110,110,1)"
@@ -2695,10 +2514,10 @@
               <g
                 id="g-svg-241"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,133)"
+                transform="matrix(1,0,0,1,252.500000,145)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-247"
                     fill="rgba(110,110,110,1)"
@@ -2722,10 +2541,10 @@
               <g
                 id="g-svg-242"
                 fill="none"
-                transform="matrix(1,0,0,1,340,133)"
+                transform="matrix(1,0,0,1,335,145)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-248"
                     fill="rgba(110,110,110,1)"
@@ -2752,10 +2571,10 @@
               <g
                 id="g-svg-243"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,133)"
+                transform="matrix(1,0,0,1,417.500000,145)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-249"
                     fill="rgba(110,110,110,1)"
@@ -2778,33 +2597,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-250"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-250" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-790" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-251"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-252"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-253"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,170)">
+        <g id="g-svg-790" fill="none">
+          <g id="g-svg-251" fill="none" class="axis-grid-group">
+            <g id="g-svg-252" fill="none" class="axis-grid">
+              <g id="g-svg-253" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-255"
                     fill="none"
@@ -2812,10 +2611,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,170 L 5,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,46.250000,170)">
+                <g>
                   <path
                     id="g-svg-256"
                     fill="none"
@@ -2823,10 +2622,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 46.25,170 L 46.25,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,170)">
+                <g>
                   <path
                     id="g-svg-257"
                     fill="none"
@@ -2834,10 +2633,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,170 L 87.5,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,128.750000,170)">
+                <g>
                   <path
                     id="g-svg-258"
                     fill="none"
@@ -2845,10 +2644,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 128.75,170 L 128.75,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,170)">
+                <g>
                   <path
                     id="g-svg-259"
                     fill="none"
@@ -2856,10 +2655,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,170 L 170,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,211.250000,170)">
+                <g>
                   <path
                     id="g-svg-260"
                     fill="none"
@@ -2867,10 +2666,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 211.25,170 L 211.25,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,170)">
+                <g>
                   <path
                     id="g-svg-261"
                     fill="none"
@@ -2878,10 +2677,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,170 L 252.5,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,170)">
+                <g>
                   <path
                     id="g-svg-262"
                     fill="none"
@@ -2889,10 +2688,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,170 L 293.75,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,170)">
+                <g>
                   <path
                     id="g-svg-263"
                     fill="none"
@@ -2900,10 +2699,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,170 L 335,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,376.250000,170)">
+                <g>
                   <path
                     id="g-svg-264"
                     fill="none"
@@ -2911,10 +2710,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 376.25,170 L 376.25,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,170)">
+                <g>
                   <path
                     id="g-svg-265"
                     fill="none"
@@ -2922,10 +2721,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,170 L 417.5,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,458.750000,170)">
+                <g>
                   <path
                     id="g-svg-266"
                     fill="none"
@@ -2933,57 +2732,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 458.75,170 L 458.75,170"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-254"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-254" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-267"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-268"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,170)">
+          <g id="g-svg-267" fill="none" class="axis-main-group">
+            <g id="g-svg-268" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-269"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="170"
+                  x2="500"
+                  y2="170"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-270"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-270" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-271"
                 fill="none"
                 transform="matrix(1,0,0,1,5,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-283"
                     fill="none"
@@ -3003,7 +2782,7 @@
                 transform="matrix(1,0,0,1,46.250000,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-284"
                     fill="none"
@@ -3023,7 +2802,7 @@
                 transform="matrix(1,0,0,1,87.500000,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-285"
                     fill="none"
@@ -3043,7 +2822,7 @@
                 transform="matrix(1,0,0,1,128.750000,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-286"
                     fill="none"
@@ -3063,7 +2842,7 @@
                 transform="matrix(1,0,0,1,170,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-287"
                     fill="none"
@@ -3083,7 +2862,7 @@
                 transform="matrix(1,0,0,1,211.250000,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-288"
                     fill="none"
@@ -3103,7 +2882,7 @@
                 transform="matrix(1,0,0,1,252.500000,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-289"
                     fill="none"
@@ -3123,7 +2902,7 @@
                 transform="matrix(1,0,0,1,293.750000,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-290"
                     fill="none"
@@ -3143,7 +2922,7 @@
                 transform="matrix(1,0,0,1,335,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-291"
                     fill="none"
@@ -3163,7 +2942,7 @@
                 transform="matrix(1,0,0,1,376.250000,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-292"
                     fill="none"
@@ -3183,7 +2962,7 @@
                 transform="matrix(1,0,0,1,417.500000,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-293"
                     fill="none"
@@ -3203,7 +2982,7 @@
                 transform="matrix(1,0,0,1,458.750000,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-294"
                     fill="none"
@@ -3218,19 +2997,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-295"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-295" fill="none" class="axis-label-group">
               <g
                 id="g-svg-296"
                 fill="none"
-                transform="matrix(1,0,0,1,10,173)"
+                transform="matrix(1,0,0,1,5,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-308"
                     fill="rgba(110,110,110,1)"
@@ -3257,10 +3031,10 @@
               <g
                 id="g-svg-297"
                 fill="none"
-                transform="matrix(1,0,0,1,51.250000,173)"
+                transform="matrix(1,0,0,1,46.250000,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-309"
                     fill="rgba(110,110,110,1)"
@@ -3284,10 +3058,10 @@
               <g
                 id="g-svg-298"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,173)"
+                transform="matrix(1,0,0,1,87.500000,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-310"
                     fill="rgba(110,110,110,1)"
@@ -3311,10 +3085,10 @@
               <g
                 id="g-svg-299"
                 fill="none"
-                transform="matrix(1,0,0,1,133.750000,173)"
+                transform="matrix(1,0,0,1,128.750000,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-311"
                     fill="rgba(110,110,110,1)"
@@ -3338,10 +3112,10 @@
               <g
                 id="g-svg-300"
                 fill="none"
-                transform="matrix(1,0,0,1,175,173)"
+                transform="matrix(1,0,0,1,170,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-312"
                     fill="rgba(110,110,110,1)"
@@ -3365,10 +3139,10 @@
               <g
                 id="g-svg-301"
                 fill="none"
-                transform="matrix(1,0,0,1,216.250000,173)"
+                transform="matrix(1,0,0,1,211.250000,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-313"
                     fill="rgba(110,110,110,1)"
@@ -3392,10 +3166,10 @@
               <g
                 id="g-svg-302"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,173)"
+                transform="matrix(1,0,0,1,252.500000,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-314"
                     fill="rgba(110,110,110,1)"
@@ -3419,10 +3193,10 @@
               <g
                 id="g-svg-303"
                 fill="none"
-                transform="matrix(1,0,0,1,298.750000,173)"
+                transform="matrix(1,0,0,1,293.750000,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-315"
                     fill="rgba(110,110,110,1)"
@@ -3446,10 +3220,10 @@
               <g
                 id="g-svg-304"
                 fill="none"
-                transform="matrix(1,0,0,1,340,173)"
+                transform="matrix(1,0,0,1,335,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-316"
                     fill="rgba(110,110,110,1)"
@@ -3473,10 +3247,10 @@
               <g
                 id="g-svg-305"
                 fill="none"
-                transform="matrix(1,0,0,1,381.250000,173)"
+                transform="matrix(1,0,0,1,376.250000,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-317"
                     fill="rgba(110,110,110,1)"
@@ -3503,10 +3277,10 @@
               <g
                 id="g-svg-306"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,173)"
+                transform="matrix(1,0,0,1,417.500000,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-318"
                     fill="rgba(110,110,110,1)"
@@ -3530,10 +3304,10 @@
               <g
                 id="g-svg-307"
                 fill="none"
-                transform="matrix(1,0,0,1,463.750000,173)"
+                transform="matrix(1,0,0,1,458.750000,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-319"
                     fill="rgba(110,110,110,1)"
@@ -3556,33 +3330,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-320"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-320" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-791" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-321"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-322"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-323"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,210)">
+        <g id="g-svg-791" fill="none">
+          <g id="g-svg-321" fill="none" class="axis-grid-group">
+            <g id="g-svg-322" fill="none" class="axis-grid">
+              <g id="g-svg-323" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-325"
                     fill="none"
@@ -3590,10 +3344,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,210 L 5,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,46.250000,210)">
+                <g>
                   <path
                     id="g-svg-326"
                     fill="none"
@@ -3601,10 +3355,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 46.25,210 L 46.25,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,210)">
+                <g>
                   <path
                     id="g-svg-327"
                     fill="none"
@@ -3612,10 +3366,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,210 L 87.5,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,128.750000,210)">
+                <g>
                   <path
                     id="g-svg-328"
                     fill="none"
@@ -3623,10 +3377,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 128.75,210 L 128.75,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,210)">
+                <g>
                   <path
                     id="g-svg-329"
                     fill="none"
@@ -3634,10 +3388,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,210 L 170,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,211.250000,210)">
+                <g>
                   <path
                     id="g-svg-330"
                     fill="none"
@@ -3645,10 +3399,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 211.25,210 L 211.25,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,210)">
+                <g>
                   <path
                     id="g-svg-331"
                     fill="none"
@@ -3656,10 +3410,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,210 L 252.5,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,210)">
+                <g>
                   <path
                     id="g-svg-332"
                     fill="none"
@@ -3667,10 +3421,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,210 L 293.75,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,210)">
+                <g>
                   <path
                     id="g-svg-333"
                     fill="none"
@@ -3678,10 +3432,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,210 L 335,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,376.250000,210)">
+                <g>
                   <path
                     id="g-svg-334"
                     fill="none"
@@ -3689,10 +3443,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 376.25,210 L 376.25,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,210)">
+                <g>
                   <path
                     id="g-svg-335"
                     fill="none"
@@ -3700,10 +3454,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,210 L 417.5,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,458.750000,210)">
+                <g>
                   <path
                     id="g-svg-336"
                     fill="none"
@@ -3711,57 +3465,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 458.75,210 L 458.75,210"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-324"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-324" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-337"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-338"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,210)">
+          <g id="g-svg-337" fill="none" class="axis-main-group">
+            <g id="g-svg-338" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-339"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="210"
+                  x2="500"
+                  y2="210"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-340"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-340" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-341"
                 fill="none"
                 transform="matrix(1,0,0,1,5,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-353"
                     fill="none"
@@ -3781,7 +3515,7 @@
                 transform="matrix(1,0,0,1,46.250000,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-354"
                     fill="none"
@@ -3801,7 +3535,7 @@
                 transform="matrix(1,0,0,1,87.500000,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-355"
                     fill="none"
@@ -3821,7 +3555,7 @@
                 transform="matrix(1,0,0,1,128.750000,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-356"
                     fill="none"
@@ -3841,7 +3575,7 @@
                 transform="matrix(1,0,0,1,170,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-357"
                     fill="none"
@@ -3861,7 +3595,7 @@
                 transform="matrix(1,0,0,1,211.250000,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-358"
                     fill="none"
@@ -3881,7 +3615,7 @@
                 transform="matrix(1,0,0,1,252.500000,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-359"
                     fill="none"
@@ -3901,7 +3635,7 @@
                 transform="matrix(1,0,0,1,293.750000,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-360"
                     fill="none"
@@ -3921,7 +3655,7 @@
                 transform="matrix(1,0,0,1,335,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-361"
                     fill="none"
@@ -3941,7 +3675,7 @@
                 transform="matrix(1,0,0,1,376.250000,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-362"
                     fill="none"
@@ -3961,7 +3695,7 @@
                 transform="matrix(1,0,0,1,417.500000,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-363"
                     fill="none"
@@ -3981,7 +3715,7 @@
                 transform="matrix(1,0,0,1,458.750000,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-364"
                     fill="none"
@@ -3996,19 +3730,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-365"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-365" fill="none" class="axis-label-group">
               <g
                 id="g-svg-366"
                 fill="none"
-                transform="matrix(1,0,0,1,10,213)"
+                transform="matrix(1,0,0,1,5,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-378"
                     fill="rgba(110,110,110,1)"
@@ -4035,10 +3764,10 @@
               <g
                 id="g-svg-367"
                 fill="none"
-                transform="matrix(1,0,0,1,51.250000,213)"
+                transform="matrix(1,0,0,1,46.250000,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-379"
                     fill="rgba(110,110,110,1)"
@@ -4062,10 +3791,10 @@
               <g
                 id="g-svg-368"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,213)"
+                transform="matrix(1,0,0,1,87.500000,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-380"
                     fill="rgba(110,110,110,1)"
@@ -4089,10 +3818,10 @@
               <g
                 id="g-svg-369"
                 fill="none"
-                transform="matrix(1,0,0,1,133.750000,213)"
+                transform="matrix(1,0,0,1,128.750000,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-381"
                     fill="rgba(110,110,110,1)"
@@ -4116,10 +3845,10 @@
               <g
                 id="g-svg-370"
                 fill="none"
-                transform="matrix(1,0,0,1,175,213)"
+                transform="matrix(1,0,0,1,170,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-382"
                     fill="rgba(110,110,110,1)"
@@ -4143,10 +3872,10 @@
               <g
                 id="g-svg-371"
                 fill="none"
-                transform="matrix(1,0,0,1,216.250000,213)"
+                transform="matrix(1,0,0,1,211.250000,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-383"
                     fill="rgba(110,110,110,1)"
@@ -4173,10 +3902,10 @@
               <g
                 id="g-svg-372"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,213)"
+                transform="matrix(1,0,0,1,252.500000,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-384"
                     fill="rgba(110,110,110,1)"
@@ -4200,10 +3929,10 @@
               <g
                 id="g-svg-373"
                 fill="none"
-                transform="matrix(1,0,0,1,298.750000,213)"
+                transform="matrix(1,0,0,1,293.750000,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-385"
                     fill="rgba(110,110,110,1)"
@@ -4227,10 +3956,10 @@
               <g
                 id="g-svg-374"
                 fill="none"
-                transform="matrix(1,0,0,1,340,213)"
+                transform="matrix(1,0,0,1,335,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-386"
                     fill="rgba(110,110,110,1)"
@@ -4254,10 +3983,10 @@
               <g
                 id="g-svg-375"
                 fill="none"
-                transform="matrix(1,0,0,1,381.250000,213)"
+                transform="matrix(1,0,0,1,376.250000,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-387"
                     fill="rgba(110,110,110,1)"
@@ -4284,10 +4013,10 @@
               <g
                 id="g-svg-376"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,213)"
+                transform="matrix(1,0,0,1,417.500000,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-388"
                     fill="rgba(110,110,110,1)"
@@ -4311,10 +4040,10 @@
               <g
                 id="g-svg-377"
                 fill="none"
-                transform="matrix(1,0,0,1,463.750000,213)"
+                transform="matrix(1,0,0,1,458.750000,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-389"
                     fill="rgba(110,110,110,1)"
@@ -4337,33 +4066,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-390"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-390" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-792" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-391"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-392"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-393"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,250)">
+        <g id="g-svg-792" fill="none">
+          <g id="g-svg-391" fill="none" class="axis-grid-group">
+            <g id="g-svg-392" fill="none" class="axis-grid">
+              <g id="g-svg-393" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-395"
                     fill="none"
@@ -4371,10 +4080,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,250 L 5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,46.250000,250)">
+                <g>
                   <path
                     id="g-svg-396"
                     fill="none"
@@ -4382,10 +4091,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 46.25,250 L 46.25,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,250)">
+                <g>
                   <path
                     id="g-svg-397"
                     fill="none"
@@ -4393,10 +4102,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,250 L 87.5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,128.750000,250)">
+                <g>
                   <path
                     id="g-svg-398"
                     fill="none"
@@ -4404,10 +4113,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 128.75,250 L 128.75,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,250)">
+                <g>
                   <path
                     id="g-svg-399"
                     fill="none"
@@ -4415,10 +4124,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,250 L 170,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,211.250000,250)">
+                <g>
                   <path
                     id="g-svg-400"
                     fill="none"
@@ -4426,10 +4135,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 211.25,250 L 211.25,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,250)">
+                <g>
                   <path
                     id="g-svg-401"
                     fill="none"
@@ -4437,10 +4146,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,250 L 252.5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,250)">
+                <g>
                   <path
                     id="g-svg-402"
                     fill="none"
@@ -4448,10 +4157,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,250 L 293.75,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,250)">
+                <g>
                   <path
                     id="g-svg-403"
                     fill="none"
@@ -4459,10 +4168,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,250 L 335,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,376.250000,250)">
+                <g>
                   <path
                     id="g-svg-404"
                     fill="none"
@@ -4470,10 +4179,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 376.25,250 L 376.25,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,250)">
+                <g>
                   <path
                     id="g-svg-405"
                     fill="none"
@@ -4481,10 +4190,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,250 L 417.5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,458.750000,250)">
+                <g>
                   <path
                     id="g-svg-406"
                     fill="none"
@@ -4492,57 +4201,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 458.75,250 L 458.75,250"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-394"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-394" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-407"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-408"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,250)">
+          <g id="g-svg-407" fill="none" class="axis-main-group">
+            <g id="g-svg-408" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-409"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="250"
+                  x2="500"
+                  y2="250"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-410"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-410" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-411"
                 fill="none"
                 transform="matrix(1,0,0,1,5,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-423"
                     fill="none"
@@ -4562,7 +4251,7 @@
                 transform="matrix(1,0,0,1,46.250000,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-424"
                     fill="none"
@@ -4582,7 +4271,7 @@
                 transform="matrix(1,0,0,1,87.500000,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-425"
                     fill="none"
@@ -4602,7 +4291,7 @@
                 transform="matrix(1,0,0,1,128.750000,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-426"
                     fill="none"
@@ -4622,7 +4311,7 @@
                 transform="matrix(1,0,0,1,170,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-427"
                     fill="none"
@@ -4642,7 +4331,7 @@
                 transform="matrix(1,0,0,1,211.250000,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-428"
                     fill="none"
@@ -4662,7 +4351,7 @@
                 transform="matrix(1,0,0,1,252.500000,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-429"
                     fill="none"
@@ -4682,7 +4371,7 @@
                 transform="matrix(1,0,0,1,293.750000,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-430"
                     fill="none"
@@ -4702,7 +4391,7 @@
                 transform="matrix(1,0,0,1,335,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-431"
                     fill="none"
@@ -4722,7 +4411,7 @@
                 transform="matrix(1,0,0,1,376.250000,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-432"
                     fill="none"
@@ -4742,7 +4431,7 @@
                 transform="matrix(1,0,0,1,417.500000,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-433"
                     fill="none"
@@ -4762,7 +4451,7 @@
                 transform="matrix(1,0,0,1,458.750000,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-434"
                     fill="none"
@@ -4777,19 +4466,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-435"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-435" fill="none" class="axis-label-group">
               <g
                 id="g-svg-436"
                 fill="none"
-                transform="matrix(1,0,0,1,10,253)"
+                transform="matrix(1,0,0,1,5,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-448"
                     fill="rgba(110,110,110,1)"
@@ -4813,10 +4497,10 @@
               <g
                 id="g-svg-437"
                 fill="none"
-                transform="matrix(1,0,0,1,51.250000,253)"
+                transform="matrix(1,0,0,1,46.250000,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-449"
                     fill="rgba(110,110,110,1)"
@@ -4843,10 +4527,10 @@
               <g
                 id="g-svg-438"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,253)"
+                transform="matrix(1,0,0,1,87.500000,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-450"
                     fill="rgba(110,110,110,1)"
@@ -4870,10 +4554,10 @@
               <g
                 id="g-svg-439"
                 fill="none"
-                transform="matrix(1,0,0,1,133.750000,253)"
+                transform="matrix(1,0,0,1,128.750000,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-451"
                     fill="rgba(110,110,110,1)"
@@ -4897,10 +4581,10 @@
               <g
                 id="g-svg-440"
                 fill="none"
-                transform="matrix(1,0,0,1,175,253)"
+                transform="matrix(1,0,0,1,170,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-452"
                     fill="rgba(110,110,110,1)"
@@ -4924,10 +4608,10 @@
               <g
                 id="g-svg-441"
                 fill="none"
-                transform="matrix(1,0,0,1,216.250000,253)"
+                transform="matrix(1,0,0,1,211.250000,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-453"
                     fill="rgba(110,110,110,1)"
@@ -4951,10 +4635,10 @@
               <g
                 id="g-svg-442"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,253)"
+                transform="matrix(1,0,0,1,252.500000,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-454"
                     fill="rgba(110,110,110,1)"
@@ -4978,10 +4662,10 @@
               <g
                 id="g-svg-443"
                 fill="none"
-                transform="matrix(1,0,0,1,298.750000,253)"
+                transform="matrix(1,0,0,1,293.750000,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-455"
                     fill="rgba(110,110,110,1)"
@@ -5008,10 +4692,10 @@
               <g
                 id="g-svg-444"
                 fill="none"
-                transform="matrix(1,0,0,1,340,253)"
+                transform="matrix(1,0,0,1,335,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-456"
                     fill="rgba(110,110,110,1)"
@@ -5035,10 +4719,10 @@
               <g
                 id="g-svg-445"
                 fill="none"
-                transform="matrix(1,0,0,1,381.250000,253)"
+                transform="matrix(1,0,0,1,376.250000,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-457"
                     fill="rgba(110,110,110,1)"
@@ -5062,10 +4746,10 @@
               <g
                 id="g-svg-446"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,253)"
+                transform="matrix(1,0,0,1,417.500000,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-458"
                     fill="rgba(110,110,110,1)"
@@ -5089,10 +4773,10 @@
               <g
                 id="g-svg-447"
                 fill="none"
-                transform="matrix(1,0,0,1,463.750000,253)"
+                transform="matrix(1,0,0,1,458.750000,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-459"
                     fill="rgba(110,110,110,1)"
@@ -5115,33 +4799,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-460"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-460" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-793" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-461"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-462"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-463"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,290)">
+        <g id="g-svg-793" fill="none">
+          <g id="g-svg-461" fill="none" class="axis-grid-group">
+            <g id="g-svg-462" fill="none" class="axis-grid">
+              <g id="g-svg-463" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-465"
                     fill="none"
@@ -5149,10 +4813,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,290 L 5,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,46.250000,290)">
+                <g>
                   <path
                     id="g-svg-466"
                     fill="none"
@@ -5160,10 +4824,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 46.25,290 L 46.25,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,290)">
+                <g>
                   <path
                     id="g-svg-467"
                     fill="none"
@@ -5171,10 +4835,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,290 L 87.5,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,128.750000,290)">
+                <g>
                   <path
                     id="g-svg-468"
                     fill="none"
@@ -5182,10 +4846,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 128.75,290 L 128.75,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,290)">
+                <g>
                   <path
                     id="g-svg-469"
                     fill="none"
@@ -5193,10 +4857,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,290 L 170,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,211.250000,290)">
+                <g>
                   <path
                     id="g-svg-470"
                     fill="none"
@@ -5204,10 +4868,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 211.25,290 L 211.25,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,290)">
+                <g>
                   <path
                     id="g-svg-471"
                     fill="none"
@@ -5215,10 +4879,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,290 L 252.5,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,290)">
+                <g>
                   <path
                     id="g-svg-472"
                     fill="none"
@@ -5226,10 +4890,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,290 L 293.75,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,290)">
+                <g>
                   <path
                     id="g-svg-473"
                     fill="none"
@@ -5237,10 +4901,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,290 L 335,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,376.250000,290)">
+                <g>
                   <path
                     id="g-svg-474"
                     fill="none"
@@ -5248,10 +4912,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 376.25,290 L 376.25,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,290)">
+                <g>
                   <path
                     id="g-svg-475"
                     fill="none"
@@ -5259,10 +4923,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,290 L 417.5,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,458.750000,290)">
+                <g>
                   <path
                     id="g-svg-476"
                     fill="none"
@@ -5270,57 +4934,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 458.75,290 L 458.75,290"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-464"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-464" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-477"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-478"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,290)">
+          <g id="g-svg-477" fill="none" class="axis-main-group">
+            <g id="g-svg-478" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-479"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="290"
+                  x2="500"
+                  y2="290"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-480"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-480" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-481"
                 fill="none"
                 transform="matrix(1,0,0,1,5,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-493"
                     fill="none"
@@ -5340,7 +4984,7 @@
                 transform="matrix(1,0,0,1,46.250000,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-494"
                     fill="none"
@@ -5360,7 +5004,7 @@
                 transform="matrix(1,0,0,1,87.500000,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-495"
                     fill="none"
@@ -5380,7 +5024,7 @@
                 transform="matrix(1,0,0,1,128.750000,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-496"
                     fill="none"
@@ -5400,7 +5044,7 @@
                 transform="matrix(1,0,0,1,170,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-497"
                     fill="none"
@@ -5420,7 +5064,7 @@
                 transform="matrix(1,0,0,1,211.250000,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-498"
                     fill="none"
@@ -5440,7 +5084,7 @@
                 transform="matrix(1,0,0,1,252.500000,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-499"
                     fill="none"
@@ -5460,7 +5104,7 @@
                 transform="matrix(1,0,0,1,293.750000,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-500"
                     fill="none"
@@ -5480,7 +5124,7 @@
                 transform="matrix(1,0,0,1,335,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-501"
                     fill="none"
@@ -5500,7 +5144,7 @@
                 transform="matrix(1,0,0,1,376.250000,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-502"
                     fill="none"
@@ -5520,7 +5164,7 @@
                 transform="matrix(1,0,0,1,417.500000,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-503"
                     fill="none"
@@ -5540,7 +5184,7 @@
                 transform="matrix(1,0,0,1,458.750000,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-504"
                     fill="none"
@@ -5555,19 +5199,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-505"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-505" fill="none" class="axis-label-group">
               <g
                 id="g-svg-506"
                 fill="none"
-                transform="matrix(1,0,0,1,10,293)"
+                transform="matrix(1,0,0,1,5,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-518"
                     fill="rgba(110,110,110,1)"
@@ -5591,10 +5230,10 @@
               <g
                 id="g-svg-507"
                 fill="none"
-                transform="matrix(1,0,0,1,51.250000,293)"
+                transform="matrix(1,0,0,1,46.250000,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-519"
                     fill="rgba(110,110,110,1)"
@@ -5621,10 +5260,10 @@
               <g
                 id="g-svg-508"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,293)"
+                transform="matrix(1,0,0,1,87.500000,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-520"
                     fill="rgba(110,110,110,1)"
@@ -5648,10 +5287,10 @@
               <g
                 id="g-svg-509"
                 fill="none"
-                transform="matrix(1,0,0,1,133.750000,293)"
+                transform="matrix(1,0,0,1,128.750000,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-521"
                     fill="rgba(110,110,110,1)"
@@ -5675,10 +5314,10 @@
               <g
                 id="g-svg-510"
                 fill="none"
-                transform="matrix(1,0,0,1,175,293)"
+                transform="matrix(1,0,0,1,170,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-522"
                     fill="rgba(110,110,110,1)"
@@ -5702,10 +5341,10 @@
               <g
                 id="g-svg-511"
                 fill="none"
-                transform="matrix(1,0,0,1,216.250000,293)"
+                transform="matrix(1,0,0,1,211.250000,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-523"
                     fill="rgba(110,110,110,1)"
@@ -5732,10 +5371,10 @@
               <g
                 id="g-svg-512"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,293)"
+                transform="matrix(1,0,0,1,252.500000,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-524"
                     fill="rgba(110,110,110,1)"
@@ -5759,10 +5398,10 @@
               <g
                 id="g-svg-513"
                 fill="none"
-                transform="matrix(1,0,0,1,298.750000,293)"
+                transform="matrix(1,0,0,1,293.750000,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-525"
                     fill="rgba(110,110,110,1)"
@@ -5786,10 +5425,10 @@
               <g
                 id="g-svg-514"
                 fill="none"
-                transform="matrix(1,0,0,1,340,293)"
+                transform="matrix(1,0,0,1,335,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-526"
                     fill="rgba(110,110,110,1)"
@@ -5813,10 +5452,10 @@
               <g
                 id="g-svg-515"
                 fill="none"
-                transform="matrix(1,0,0,1,381.250000,293)"
+                transform="matrix(1,0,0,1,376.250000,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-527"
                     fill="rgba(110,110,110,1)"
@@ -5843,10 +5482,10 @@
               <g
                 id="g-svg-516"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,293)"
+                transform="matrix(1,0,0,1,417.500000,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-528"
                     fill="rgba(110,110,110,1)"
@@ -5870,10 +5509,10 @@
               <g
                 id="g-svg-517"
                 fill="none"
-                transform="matrix(1,0,0,1,463.750000,293)"
+                transform="matrix(1,0,0,1,458.750000,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-529"
                     fill="rgba(110,110,110,1)"
@@ -5896,33 +5535,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-530"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-530" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-794" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-531"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-532"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-533"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,330)">
+        <g id="g-svg-794" fill="none">
+          <g id="g-svg-531" fill="none" class="axis-grid-group">
+            <g id="g-svg-532" fill="none" class="axis-grid">
+              <g id="g-svg-533" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-535"
                     fill="none"
@@ -5930,10 +5549,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,330 L 5,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,46.250000,330)">
+                <g>
                   <path
                     id="g-svg-536"
                     fill="none"
@@ -5941,10 +5560,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 46.25,330 L 46.25,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,330)">
+                <g>
                   <path
                     id="g-svg-537"
                     fill="none"
@@ -5952,10 +5571,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,330 L 87.5,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,128.750000,330)">
+                <g>
                   <path
                     id="g-svg-538"
                     fill="none"
@@ -5963,10 +5582,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 128.75,330 L 128.75,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,330)">
+                <g>
                   <path
                     id="g-svg-539"
                     fill="none"
@@ -5974,10 +5593,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,330 L 170,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,211.250000,330)">
+                <g>
                   <path
                     id="g-svg-540"
                     fill="none"
@@ -5985,10 +5604,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 211.25,330 L 211.25,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,330)">
+                <g>
                   <path
                     id="g-svg-541"
                     fill="none"
@@ -5996,10 +5615,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,330 L 252.5,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,293.750000,330)">
+                <g>
                   <path
                     id="g-svg-542"
                     fill="none"
@@ -6007,10 +5626,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 293.75,330 L 293.75,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,330)">
+                <g>
                   <path
                     id="g-svg-543"
                     fill="none"
@@ -6018,10 +5637,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,330 L 335,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,376.250000,330)">
+                <g>
                   <path
                     id="g-svg-544"
                     fill="none"
@@ -6029,10 +5648,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 376.25,330 L 376.25,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,330)">
+                <g>
                   <path
                     id="g-svg-545"
                     fill="none"
@@ -6040,10 +5659,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,330 L 417.5,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,458.750000,330)">
+                <g>
                   <path
                     id="g-svg-546"
                     fill="none"
@@ -6051,57 +5670,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 458.75,330 L 458.75,330"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-534"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-534" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-547"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-548"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,330)">
+          <g id="g-svg-547" fill="none" class="axis-main-group">
+            <g id="g-svg-548" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-549"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="330"
+                  x2="500"
+                  y2="330"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-550"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-550" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-551"
                 fill="none"
                 transform="matrix(1,0,0,1,5,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-563"
                     fill="none"
@@ -6121,7 +5720,7 @@
                 transform="matrix(1,0,0,1,46.250000,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-564"
                     fill="none"
@@ -6141,7 +5740,7 @@
                 transform="matrix(1,0,0,1,87.500000,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-565"
                     fill="none"
@@ -6161,7 +5760,7 @@
                 transform="matrix(1,0,0,1,128.750000,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-566"
                     fill="none"
@@ -6181,7 +5780,7 @@
                 transform="matrix(1,0,0,1,170,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-567"
                     fill="none"
@@ -6201,7 +5800,7 @@
                 transform="matrix(1,0,0,1,211.250000,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-568"
                     fill="none"
@@ -6221,7 +5820,7 @@
                 transform="matrix(1,0,0,1,252.500000,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-569"
                     fill="none"
@@ -6241,7 +5840,7 @@
                 transform="matrix(1,0,0,1,293.750000,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-570"
                     fill="none"
@@ -6261,7 +5860,7 @@
                 transform="matrix(1,0,0,1,335,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-571"
                     fill="none"
@@ -6281,7 +5880,7 @@
                 transform="matrix(1,0,0,1,376.250000,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-572"
                     fill="none"
@@ -6301,7 +5900,7 @@
                 transform="matrix(1,0,0,1,417.500000,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-573"
                     fill="none"
@@ -6321,7 +5920,7 @@
                 transform="matrix(1,0,0,1,458.750000,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-574"
                     fill="none"
@@ -6336,19 +5935,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-575"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-575" fill="none" class="axis-label-group">
               <g
                 id="g-svg-576"
                 fill="none"
-                transform="matrix(1,0,0,1,10,333)"
+                transform="matrix(1,0,0,1,5,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-588"
                     fill="rgba(110,110,110,1)"
@@ -6372,10 +5966,10 @@
               <g
                 id="g-svg-577"
                 fill="none"
-                transform="matrix(1,0,0,1,51.250000,333)"
+                transform="matrix(1,0,0,1,46.250000,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-589"
                     fill="rgba(110,110,110,1)"
@@ -6399,10 +5993,10 @@
               <g
                 id="g-svg-578"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,333)"
+                transform="matrix(1,0,0,1,87.500000,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-590"
                     fill="rgba(110,110,110,1)"
@@ -6426,10 +6020,10 @@
               <g
                 id="g-svg-579"
                 fill="none"
-                transform="matrix(1,0,0,1,133.750000,333)"
+                transform="matrix(1,0,0,1,128.750000,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-591"
                     fill="rgba(110,110,110,1)"
@@ -6453,10 +6047,10 @@
               <g
                 id="g-svg-580"
                 fill="none"
-                transform="matrix(1,0,0,1,175,333)"
+                transform="matrix(1,0,0,1,170,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-592"
                     fill="rgba(110,110,110,1)"
@@ -6480,10 +6074,10 @@
               <g
                 id="g-svg-581"
                 fill="none"
-                transform="matrix(1,0,0,1,216.250000,333)"
+                transform="matrix(1,0,0,1,211.250000,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-593"
                     fill="rgba(110,110,110,1)"
@@ -6507,10 +6101,10 @@
               <g
                 id="g-svg-582"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,333)"
+                transform="matrix(1,0,0,1,252.500000,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-594"
                     fill="rgba(110,110,110,1)"
@@ -6534,10 +6128,10 @@
               <g
                 id="g-svg-583"
                 fill="none"
-                transform="matrix(1,0,0,1,298.750000,333)"
+                transform="matrix(1,0,0,1,293.750000,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-595"
                     fill="rgba(110,110,110,1)"
@@ -6561,10 +6155,10 @@
               <g
                 id="g-svg-584"
                 fill="none"
-                transform="matrix(1,0,0,1,340,333)"
+                transform="matrix(1,0,0,1,335,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-596"
                     fill="rgba(110,110,110,1)"
@@ -6588,10 +6182,10 @@
               <g
                 id="g-svg-585"
                 fill="none"
-                transform="matrix(1,0,0,1,381.250000,333)"
+                transform="matrix(1,0,0,1,376.250000,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-597"
                     fill="rgba(110,110,110,1)"
@@ -6615,10 +6209,10 @@
               <g
                 id="g-svg-586"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,333)"
+                transform="matrix(1,0,0,1,417.500000,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-598"
                     fill="rgba(110,110,110,1)"
@@ -6642,10 +6236,10 @@
               <g
                 id="g-svg-587"
                 fill="none"
-                transform="matrix(1,0,0,1,463.750000,333)"
+                transform="matrix(1,0,0,1,458.750000,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-599"
                     fill="rgba(110,110,110,1)"
@@ -6668,12 +6262,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-600"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-600" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearTime2.svg b/__tests__/integration/snapshots/AxisLinearTime2.svg
index aaae511cb..d3b67cec2 100644
--- a/__tests__/integration/snapshots/AxisLinearTime2.svg
+++ b/__tests__/integration/snapshots/AxisLinearTime2.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-601"
-        fill="none"
-        width="500"
-        height="350"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-602" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,10)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-601" fill="none" width="500" height="350">
+        <g id="g-svg-602" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,10 L 5,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,10)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,10 L 87.5,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,10)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,10 L 170,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,10)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,10 L 252.5,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,10)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,10 L 335,10"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,10)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,57 +76,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,10 L 417.5,10"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,10)">
+          <g id="g-svg-11" fill="none" class="axis-main-group">
+            <g id="g-svg-12" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-13"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="10"
+                  x2="500"
+                  y2="10"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-14" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-15"
                 fill="none"
                 transform="matrix(1,0,0,1,5,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-21"
                     fill="none"
@@ -167,7 +126,7 @@
                 transform="matrix(1,0,0,1,87.500000,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-22"
                     fill="none"
@@ -187,7 +146,7 @@
                 transform="matrix(1,0,0,1,170,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-23"
                     fill="none"
@@ -207,7 +166,7 @@
                 transform="matrix(1,0,0,1,252.500000,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
@@ -227,7 +186,7 @@
                 transform="matrix(1,0,0,1,335,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
@@ -247,7 +206,7 @@
                 transform="matrix(1,0,0,1,417.500000,10)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
@@ -262,19 +221,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-27" fill="none" class="axis-label-group">
               <g
                 id="g-svg-28"
                 fill="none"
-                transform="matrix(1,0,0,1,10,13)"
+                transform="matrix(1,0,0,1,5,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-34"
                     fill="rgba(110,110,110,1)"
@@ -298,10 +252,10 @@
               <g
                 id="g-svg-29"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,13)"
+                transform="matrix(1,0,0,1,87.500000,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-35"
                     fill="rgba(110,110,110,1)"
@@ -325,10 +279,10 @@
               <g
                 id="g-svg-30"
                 fill="none"
-                transform="matrix(1,0,0,1,175,13)"
+                transform="matrix(1,0,0,1,170,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-36"
                     fill="rgba(110,110,110,1)"
@@ -352,10 +306,10 @@
               <g
                 id="g-svg-31"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,13)"
+                transform="matrix(1,0,0,1,252.500000,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-37"
                     fill="rgba(110,110,110,1)"
@@ -379,10 +333,10 @@
               <g
                 id="g-svg-32"
                 fill="none"
-                transform="matrix(1,0,0,1,340,13)"
+                transform="matrix(1,0,0,1,335,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-38"
                     fill="rgba(110,110,110,1)"
@@ -409,10 +363,10 @@
               <g
                 id="g-svg-33"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,13)"
+                transform="matrix(1,0,0,1,417.500000,25)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-39"
                     fill="rgba(110,110,110,1)"
@@ -435,33 +389,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-40"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-40" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-603" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-42"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-43"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,50)">
+        <g id="g-svg-603" fill="none">
+          <g id="g-svg-41" fill="none" class="axis-grid-group">
+            <g id="g-svg-42" fill="none" class="axis-grid">
+              <g id="g-svg-43" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-45"
                     fill="none"
@@ -469,10 +403,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,50 L 5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,50)">
+                <g>
                   <path
                     id="g-svg-46"
                     fill="none"
@@ -480,10 +414,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,50 L 87.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,50)">
+                <g>
                   <path
                     id="g-svg-47"
                     fill="none"
@@ -491,10 +425,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,50 L 170,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,50)">
+                <g>
                   <path
                     id="g-svg-48"
                     fill="none"
@@ -502,10 +436,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,50 L 252.5,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,50)">
+                <g>
                   <path
                     id="g-svg-49"
                     fill="none"
@@ -513,10 +447,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,50 L 335,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,50)">
+                <g>
                   <path
                     id="g-svg-50"
                     fill="none"
@@ -524,57 +458,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,50 L 417.5,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-44"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-44" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-51"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-52"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,50)">
+          <g id="g-svg-51" fill="none" class="axis-main-group">
+            <g id="g-svg-52" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-53"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="50"
+                  x2="500"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-54"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-54" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-55"
                 fill="none"
                 transform="matrix(1,0,0,1,5,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -594,7 +508,7 @@
                 transform="matrix(1,0,0,1,87.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -614,7 +528,7 @@
                 transform="matrix(1,0,0,1,170,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
@@ -634,7 +548,7 @@
                 transform="matrix(1,0,0,1,252.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
@@ -654,7 +568,7 @@
                 transform="matrix(1,0,0,1,335,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
@@ -674,7 +588,7 @@
                 transform="matrix(1,0,0,1,417.500000,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
@@ -689,19 +603,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-67"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-67" fill="none" class="axis-label-group">
               <g
                 id="g-svg-68"
                 fill="none"
-                transform="matrix(1,0,0,1,10,53)"
+                transform="matrix(1,0,0,1,5,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-74"
                     fill="rgba(110,110,110,1)"
@@ -725,10 +634,10 @@
               <g
                 id="g-svg-69"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,53)"
+                transform="matrix(1,0,0,1,87.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-75"
                     fill="rgba(110,110,110,1)"
@@ -752,10 +661,10 @@
               <g
                 id="g-svg-70"
                 fill="none"
-                transform="matrix(1,0,0,1,175,53)"
+                transform="matrix(1,0,0,1,170,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-76"
                     fill="rgba(110,110,110,1)"
@@ -782,10 +691,10 @@
               <g
                 id="g-svg-71"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,53)"
+                transform="matrix(1,0,0,1,252.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-77"
                     fill="rgba(110,110,110,1)"
@@ -809,10 +718,10 @@
               <g
                 id="g-svg-72"
                 fill="none"
-                transform="matrix(1,0,0,1,340,53)"
+                transform="matrix(1,0,0,1,335,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-78"
                     fill="rgba(110,110,110,1)"
@@ -836,10 +745,10 @@
               <g
                 id="g-svg-73"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,53)"
+                transform="matrix(1,0,0,1,417.500000,65)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-79"
                     fill="rgba(110,110,110,1)"
@@ -862,33 +771,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-80"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-80" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-604" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-81"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-82"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-83"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,90)">
+        <g id="g-svg-604" fill="none">
+          <g id="g-svg-81" fill="none" class="axis-grid-group">
+            <g id="g-svg-82" fill="none" class="axis-grid">
+              <g id="g-svg-83" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-85"
                     fill="none"
@@ -896,10 +785,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,90 L 5,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,90)">
+                <g>
                   <path
                     id="g-svg-86"
                     fill="none"
@@ -907,10 +796,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,90 L 87.5,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,90)">
+                <g>
                   <path
                     id="g-svg-87"
                     fill="none"
@@ -918,10 +807,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,90 L 170,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,90)">
+                <g>
                   <path
                     id="g-svg-88"
                     fill="none"
@@ -929,10 +818,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,90 L 252.5,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,90)">
+                <g>
                   <path
                     id="g-svg-89"
                     fill="none"
@@ -940,10 +829,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,90 L 335,90"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,90)">
+                <g>
                   <path
                     id="g-svg-90"
                     fill="none"
@@ -951,57 +840,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,90 L 417.5,90"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-84"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-84" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-91"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-92"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,90)">
+          <g id="g-svg-91" fill="none" class="axis-main-group">
+            <g id="g-svg-92" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-93"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="90"
+                  x2="500"
+                  y2="90"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-94"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-94" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-95"
                 fill="none"
                 transform="matrix(1,0,0,1,5,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-101"
                     fill="none"
@@ -1021,7 +890,7 @@
                 transform="matrix(1,0,0,1,87.500000,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-102"
                     fill="none"
@@ -1041,7 +910,7 @@
                 transform="matrix(1,0,0,1,170,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-103"
                     fill="none"
@@ -1061,7 +930,7 @@
                 transform="matrix(1,0,0,1,252.500000,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-104"
                     fill="none"
@@ -1081,7 +950,7 @@
                 transform="matrix(1,0,0,1,335,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-105"
                     fill="none"
@@ -1101,7 +970,7 @@
                 transform="matrix(1,0,0,1,417.500000,90)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-106"
                     fill="none"
@@ -1116,19 +985,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-107"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-107" fill="none" class="axis-label-group">
               <g
                 id="g-svg-108"
                 fill="none"
-                transform="matrix(1,0,0,1,10,93)"
+                transform="matrix(1,0,0,1,5,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-114"
                     fill="rgba(110,110,110,1)"
@@ -1152,10 +1016,10 @@
               <g
                 id="g-svg-109"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,93)"
+                transform="matrix(1,0,0,1,87.500000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-115"
                     fill="rgba(110,110,110,1)"
@@ -1179,10 +1043,10 @@
               <g
                 id="g-svg-110"
                 fill="none"
-                transform="matrix(1,0,0,1,175,93)"
+                transform="matrix(1,0,0,1,170,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-116"
                     fill="rgba(110,110,110,1)"
@@ -1209,10 +1073,10 @@
               <g
                 id="g-svg-111"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,93)"
+                transform="matrix(1,0,0,1,252.500000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-117"
                     fill="rgba(110,110,110,1)"
@@ -1236,10 +1100,10 @@
               <g
                 id="g-svg-112"
                 fill="none"
-                transform="matrix(1,0,0,1,340,93)"
+                transform="matrix(1,0,0,1,335,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-118"
                     fill="rgba(110,110,110,1)"
@@ -1263,10 +1127,10 @@
               <g
                 id="g-svg-113"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,93)"
+                transform="matrix(1,0,0,1,417.500000,105)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-119"
                     fill="rgba(110,110,110,1)"
@@ -1292,33 +1156,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-120"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-120" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-605" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-121"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-122"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-123"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,130)">
+        <g id="g-svg-605" fill="none">
+          <g id="g-svg-121" fill="none" class="axis-grid-group">
+            <g id="g-svg-122" fill="none" class="axis-grid">
+              <g id="g-svg-123" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-125"
                     fill="none"
@@ -1326,10 +1170,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,130 L 5,130"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,130)">
+                <g>
                   <path
                     id="g-svg-126"
                     fill="none"
@@ -1337,10 +1181,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,130 L 170,130"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,130)">
+                <g>
                   <path
                     id="g-svg-127"
                     fill="none"
@@ -1348,57 +1192,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,130 L 335,130"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-124"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-124" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-128"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-129"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,130)">
+          <g id="g-svg-128" fill="none" class="axis-main-group">
+            <g id="g-svg-129" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-130"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="130"
+                  x2="500"
+                  y2="130"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-131"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-131" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-132"
                 fill="none"
                 transform="matrix(1,0,0,1,5,130)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-135"
                     fill="none"
@@ -1418,7 +1242,7 @@
                 transform="matrix(1,0,0,1,170,130)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-136"
                     fill="none"
@@ -1438,7 +1262,7 @@
                 transform="matrix(1,0,0,1,335,130)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-137"
                     fill="none"
@@ -1453,19 +1277,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-138"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-138" fill="none" class="axis-label-group">
               <g
                 id="g-svg-139"
                 fill="none"
-                transform="matrix(1,0,0,1,10,133)"
+                transform="matrix(1,0,0,1,5,145)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-142"
                     fill="rgba(110,110,110,1)"
@@ -1492,10 +1311,10 @@
               <g
                 id="g-svg-140"
                 fill="none"
-                transform="matrix(1,0,0,1,175,133)"
+                transform="matrix(1,0,0,1,170,145)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-143"
                     fill="rgba(110,110,110,1)"
@@ -1519,10 +1338,10 @@
               <g
                 id="g-svg-141"
                 fill="none"
-                transform="matrix(1,0,0,1,340,133)"
+                transform="matrix(1,0,0,1,335,145)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-144"
                     fill="rgba(110,110,110,1)"
@@ -1548,33 +1367,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-145"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-145" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-606" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-146"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-147"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-148"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,170)">
+        <g id="g-svg-606" fill="none">
+          <g id="g-svg-146" fill="none" class="axis-grid-group">
+            <g id="g-svg-147" fill="none" class="axis-grid">
+              <g id="g-svg-148" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-150"
                     fill="none"
@@ -1582,10 +1381,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,170 L 5,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,170)">
+                <g>
                   <path
                     id="g-svg-151"
                     fill="none"
@@ -1593,10 +1392,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,170 L 87.5,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,170)">
+                <g>
                   <path
                     id="g-svg-152"
                     fill="none"
@@ -1604,10 +1403,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,170 L 170,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,170)">
+                <g>
                   <path
                     id="g-svg-153"
                     fill="none"
@@ -1615,10 +1414,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,170 L 252.5,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,170)">
+                <g>
                   <path
                     id="g-svg-154"
                     fill="none"
@@ -1626,10 +1425,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,170 L 335,170"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,170)">
+                <g>
                   <path
                     id="g-svg-155"
                     fill="none"
@@ -1637,57 +1436,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,170 L 417.5,170"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-149"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-149" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-156"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-157"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,170)">
+          <g id="g-svg-156" fill="none" class="axis-main-group">
+            <g id="g-svg-157" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-158"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="170"
+                  x2="500"
+                  y2="170"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-159"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-159" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-160"
                 fill="none"
                 transform="matrix(1,0,0,1,5,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-166"
                     fill="none"
@@ -1707,7 +1486,7 @@
                 transform="matrix(1,0,0,1,87.500000,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-167"
                     fill="none"
@@ -1727,7 +1506,7 @@
                 transform="matrix(1,0,0,1,170,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-168"
                     fill="none"
@@ -1747,7 +1526,7 @@
                 transform="matrix(1,0,0,1,252.500000,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-169"
                     fill="none"
@@ -1767,7 +1546,7 @@
                 transform="matrix(1,0,0,1,335,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-170"
                     fill="none"
@@ -1787,7 +1566,7 @@
                 transform="matrix(1,0,0,1,417.500000,170)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-171"
                     fill="none"
@@ -1802,19 +1581,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-172"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-172" fill="none" class="axis-label-group">
               <g
                 id="g-svg-173"
                 fill="none"
-                transform="matrix(1,0,0,1,10,173)"
+                transform="matrix(1,0,0,1,5,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-179"
                     fill="rgba(110,110,110,1)"
@@ -1841,10 +1615,10 @@
               <g
                 id="g-svg-174"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,173)"
+                transform="matrix(1,0,0,1,87.500000,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-180"
                     fill="rgba(110,110,110,1)"
@@ -1868,10 +1642,10 @@
               <g
                 id="g-svg-175"
                 fill="none"
-                transform="matrix(1,0,0,1,175,173)"
+                transform="matrix(1,0,0,1,170,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-181"
                     fill="rgba(110,110,110,1)"
@@ -1895,10 +1669,10 @@
               <g
                 id="g-svg-176"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,173)"
+                transform="matrix(1,0,0,1,252.500000,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-182"
                     fill="rgba(110,110,110,1)"
@@ -1922,10 +1696,10 @@
               <g
                 id="g-svg-177"
                 fill="none"
-                transform="matrix(1,0,0,1,340,173)"
+                transform="matrix(1,0,0,1,335,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-183"
                     fill="rgba(110,110,110,1)"
@@ -1949,10 +1723,10 @@
               <g
                 id="g-svg-178"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,173)"
+                transform="matrix(1,0,0,1,417.500000,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-184"
                     fill="rgba(110,110,110,1)"
@@ -1975,33 +1749,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-185"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-185" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-607" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-186"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-187"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-188"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,210)">
+        <g id="g-svg-607" fill="none">
+          <g id="g-svg-186" fill="none" class="axis-grid-group">
+            <g id="g-svg-187" fill="none" class="axis-grid">
+              <g id="g-svg-188" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-190"
                     fill="none"
@@ -2009,10 +1763,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,210 L 5,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,210)">
+                <g>
                   <path
                     id="g-svg-191"
                     fill="none"
@@ -2020,10 +1774,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,210 L 87.5,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,210)">
+                <g>
                   <path
                     id="g-svg-192"
                     fill="none"
@@ -2031,10 +1785,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,210 L 170,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,210)">
+                <g>
                   <path
                     id="g-svg-193"
                     fill="none"
@@ -2042,10 +1796,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,210 L 252.5,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,210)">
+                <g>
                   <path
                     id="g-svg-194"
                     fill="none"
@@ -2053,10 +1807,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,210 L 335,210"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,210)">
+                <g>
                   <path
                     id="g-svg-195"
                     fill="none"
@@ -2064,57 +1818,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,210 L 417.5,210"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-189"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-189" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-196"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-197"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,210)">
+          <g id="g-svg-196" fill="none" class="axis-main-group">
+            <g id="g-svg-197" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-198"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="210"
+                  x2="500"
+                  y2="210"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-199"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-199" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-200"
                 fill="none"
                 transform="matrix(1,0,0,1,5,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-206"
                     fill="none"
@@ -2134,7 +1868,7 @@
                 transform="matrix(1,0,0,1,87.500000,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-207"
                     fill="none"
@@ -2154,7 +1888,7 @@
                 transform="matrix(1,0,0,1,170,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-208"
                     fill="none"
@@ -2174,7 +1908,7 @@
                 transform="matrix(1,0,0,1,252.500000,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-209"
                     fill="none"
@@ -2194,7 +1928,7 @@
                 transform="matrix(1,0,0,1,335,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-210"
                     fill="none"
@@ -2214,7 +1948,7 @@
                 transform="matrix(1,0,0,1,417.500000,210)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-211"
                     fill="none"
@@ -2229,19 +1963,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-212"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-212" fill="none" class="axis-label-group">
               <g
                 id="g-svg-213"
                 fill="none"
-                transform="matrix(1,0,0,1,10,213)"
+                transform="matrix(1,0,0,1,5,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-219"
                     fill="rgba(110,110,110,1)"
@@ -2268,10 +1997,10 @@
               <g
                 id="g-svg-214"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,213)"
+                transform="matrix(1,0,0,1,87.500000,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-220"
                     fill="rgba(110,110,110,1)"
@@ -2295,10 +2024,10 @@
               <g
                 id="g-svg-215"
                 fill="none"
-                transform="matrix(1,0,0,1,175,213)"
+                transform="matrix(1,0,0,1,170,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-221"
                     fill="rgba(110,110,110,1)"
@@ -2322,10 +2051,10 @@
               <g
                 id="g-svg-216"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,213)"
+                transform="matrix(1,0,0,1,252.500000,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-222"
                     fill="rgba(110,110,110,1)"
@@ -2349,10 +2078,10 @@
               <g
                 id="g-svg-217"
                 fill="none"
-                transform="matrix(1,0,0,1,340,213)"
+                transform="matrix(1,0,0,1,335,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-223"
                     fill="rgba(110,110,110,1)"
@@ -2376,10 +2105,10 @@
               <g
                 id="g-svg-218"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,213)"
+                transform="matrix(1,0,0,1,417.500000,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-224"
                     fill="rgba(110,110,110,1)"
@@ -2405,33 +2134,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-225"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-225" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-608" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-226"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-227"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-228"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,250)">
+        <g id="g-svg-608" fill="none">
+          <g id="g-svg-226" fill="none" class="axis-grid-group">
+            <g id="g-svg-227" fill="none" class="axis-grid">
+              <g id="g-svg-228" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-230"
                     fill="none"
@@ -2439,10 +2148,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,250 L 5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,250)">
+                <g>
                   <path
                     id="g-svg-231"
                     fill="none"
@@ -2450,10 +2159,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,250 L 87.5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,250)">
+                <g>
                   <path
                     id="g-svg-232"
                     fill="none"
@@ -2461,10 +2170,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,250 L 170,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,250)">
+                <g>
                   <path
                     id="g-svg-233"
                     fill="none"
@@ -2472,10 +2181,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,250 L 252.5,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,250)">
+                <g>
                   <path
                     id="g-svg-234"
                     fill="none"
@@ -2483,10 +2192,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,250 L 335,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,250)">
+                <g>
                   <path
                     id="g-svg-235"
                     fill="none"
@@ -2494,57 +2203,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,250 L 417.5,250"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-229"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-229" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-236"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-237"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,250)">
+          <g id="g-svg-236" fill="none" class="axis-main-group">
+            <g id="g-svg-237" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-238"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="250"
+                  x2="500"
+                  y2="250"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-239"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-239" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-240"
                 fill="none"
                 transform="matrix(1,0,0,1,5,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-246"
                     fill="none"
@@ -2564,7 +2253,7 @@
                 transform="matrix(1,0,0,1,87.500000,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-247"
                     fill="none"
@@ -2584,7 +2273,7 @@
                 transform="matrix(1,0,0,1,170,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-248"
                     fill="none"
@@ -2604,7 +2293,7 @@
                 transform="matrix(1,0,0,1,252.500000,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-249"
                     fill="none"
@@ -2624,7 +2313,7 @@
                 transform="matrix(1,0,0,1,335,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-250"
                     fill="none"
@@ -2644,7 +2333,7 @@
                 transform="matrix(1,0,0,1,417.500000,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-251"
                     fill="none"
@@ -2659,19 +2348,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-252"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-252" fill="none" class="axis-label-group">
               <g
                 id="g-svg-253"
                 fill="none"
-                transform="matrix(1,0,0,1,10,253)"
+                transform="matrix(1,0,0,1,5,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-259"
                     fill="rgba(110,110,110,1)"
@@ -2695,10 +2379,10 @@
               <g
                 id="g-svg-254"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,253)"
+                transform="matrix(1,0,0,1,87.500000,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-260"
                     fill="rgba(110,110,110,1)"
@@ -2725,10 +2409,10 @@
               <g
                 id="g-svg-255"
                 fill="none"
-                transform="matrix(1,0,0,1,175,253)"
+                transform="matrix(1,0,0,1,170,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-261"
                     fill="rgba(110,110,110,1)"
@@ -2752,10 +2436,10 @@
               <g
                 id="g-svg-256"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,253)"
+                transform="matrix(1,0,0,1,252.500000,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-262"
                     fill="rgba(110,110,110,1)"
@@ -2779,10 +2463,10 @@
               <g
                 id="g-svg-257"
                 fill="none"
-                transform="matrix(1,0,0,1,340,253)"
+                transform="matrix(1,0,0,1,335,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-263"
                     fill="rgba(110,110,110,1)"
@@ -2806,10 +2490,10 @@
               <g
                 id="g-svg-258"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,253)"
+                transform="matrix(1,0,0,1,417.500000,265)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-264"
                     fill="rgba(110,110,110,1)"
@@ -2832,33 +2516,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-265"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-265" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-609" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-266"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-267"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-268"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,290)">
+        <g id="g-svg-609" fill="none">
+          <g id="g-svg-266" fill="none" class="axis-grid-group">
+            <g id="g-svg-267" fill="none" class="axis-grid">
+              <g id="g-svg-268" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-270"
                     fill="none"
@@ -2866,10 +2530,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,290 L 5,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,290)">
+                <g>
                   <path
                     id="g-svg-271"
                     fill="none"
@@ -2877,10 +2541,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,290 L 87.5,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,290)">
+                <g>
                   <path
                     id="g-svg-272"
                     fill="none"
@@ -2888,10 +2552,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,290 L 170,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,290)">
+                <g>
                   <path
                     id="g-svg-273"
                     fill="none"
@@ -2899,10 +2563,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,290 L 252.5,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,290)">
+                <g>
                   <path
                     id="g-svg-274"
                     fill="none"
@@ -2910,10 +2574,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,290 L 335,290"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,290)">
+                <g>
                   <path
                     id="g-svg-275"
                     fill="none"
@@ -2921,57 +2585,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,290 L 417.5,290"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-269"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-269" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-276"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-277"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,290)">
+          <g id="g-svg-276" fill="none" class="axis-main-group">
+            <g id="g-svg-277" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-278"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="290"
+                  x2="500"
+                  y2="290"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-279"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-279" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-280"
                 fill="none"
                 transform="matrix(1,0,0,1,5,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-286"
                     fill="none"
@@ -2991,7 +2635,7 @@
                 transform="matrix(1,0,0,1,87.500000,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-287"
                     fill="none"
@@ -3011,7 +2655,7 @@
                 transform="matrix(1,0,0,1,170,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-288"
                     fill="none"
@@ -3031,7 +2675,7 @@
                 transform="matrix(1,0,0,1,252.500000,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-289"
                     fill="none"
@@ -3051,7 +2695,7 @@
                 transform="matrix(1,0,0,1,335,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-290"
                     fill="none"
@@ -3071,7 +2715,7 @@
                 transform="matrix(1,0,0,1,417.500000,290)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-291"
                     fill="none"
@@ -3086,19 +2730,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-292"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-292" fill="none" class="axis-label-group">
               <g
                 id="g-svg-293"
                 fill="none"
-                transform="matrix(1,0,0,1,10,293)"
+                transform="matrix(1,0,0,1,5,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-299"
                     fill="rgba(110,110,110,1)"
@@ -3122,10 +2761,10 @@
               <g
                 id="g-svg-294"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,293)"
+                transform="matrix(1,0,0,1,87.500000,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-300"
                     fill="rgba(110,110,110,1)"
@@ -3152,10 +2791,10 @@
               <g
                 id="g-svg-295"
                 fill="none"
-                transform="matrix(1,0,0,1,175,293)"
+                transform="matrix(1,0,0,1,170,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-301"
                     fill="rgba(110,110,110,1)"
@@ -3179,10 +2818,10 @@
               <g
                 id="g-svg-296"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,293)"
+                transform="matrix(1,0,0,1,252.500000,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-302"
                     fill="rgba(110,110,110,1)"
@@ -3206,10 +2845,10 @@
               <g
                 id="g-svg-297"
                 fill="none"
-                transform="matrix(1,0,0,1,340,293)"
+                transform="matrix(1,0,0,1,335,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-303"
                     fill="rgba(110,110,110,1)"
@@ -3233,10 +2872,10 @@
               <g
                 id="g-svg-298"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,293)"
+                transform="matrix(1,0,0,1,417.500000,305)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-304"
                     fill="rgba(110,110,110,1)"
@@ -3262,33 +2901,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-305"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-305" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-610" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-306"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-307"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-308"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,5,330)">
+        <g id="g-svg-610" fill="none">
+          <g id="g-svg-306" fill="none" class="axis-grid-group">
+            <g id="g-svg-307" fill="none" class="axis-grid">
+              <g id="g-svg-308" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-310"
                     fill="none"
@@ -3296,10 +2915,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 5,330 L 5,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,87.500000,330)">
+                <g>
                   <path
                     id="g-svg-311"
                     fill="none"
@@ -3307,10 +2926,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 87.5,330 L 87.5,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,170,330)">
+                <g>
                   <path
                     id="g-svg-312"
                     fill="none"
@@ -3318,10 +2937,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 170,330 L 170,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,252.500000,330)">
+                <g>
                   <path
                     id="g-svg-313"
                     fill="none"
@@ -3329,10 +2948,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 252.5,330 L 252.5,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,335,330)">
+                <g>
                   <path
                     id="g-svg-314"
                     fill="none"
@@ -3340,10 +2959,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 335,330 L 335,330"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,417.500000,330)">
+                <g>
                   <path
                     id="g-svg-315"
                     fill="none"
@@ -3351,57 +2970,37 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 417.5,330 L 417.5,330"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-309"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-309" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-316"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-317"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,5,330)">
+          <g id="g-svg-316" fill="none" class="axis-main-group">
+            <g id="g-svg-317" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-318"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="495"
-                  y2="0"
+                  x1="5"
+                  y1="330"
+                  x2="500"
+                  y2="330"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(202,205,209,1)"
                 />
               </g>
             </g>
-            <g
-              id="g-svg-319"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-319" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-320"
                 fill="none"
                 transform="matrix(1,0,0,1,5,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-326"
                     fill="none"
@@ -3421,7 +3020,7 @@
                 transform="matrix(1,0,0,1,87.500000,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-327"
                     fill="none"
@@ -3441,7 +3040,7 @@
                 transform="matrix(1,0,0,1,170,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-328"
                     fill="none"
@@ -3461,7 +3060,7 @@
                 transform="matrix(1,0,0,1,252.500000,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-329"
                     fill="none"
@@ -3481,7 +3080,7 @@
                 transform="matrix(1,0,0,1,335,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-330"
                     fill="none"
@@ -3501,7 +3100,7 @@
                 transform="matrix(1,0,0,1,417.500000,330)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-331"
                     fill="none"
@@ -3516,19 +3115,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-332"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-332" fill="none" class="axis-label-group">
               <g
                 id="g-svg-333"
                 fill="none"
-                transform="matrix(1,0,0,1,10,333)"
+                transform="matrix(1,0,0,1,5,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-339"
                     fill="rgba(110,110,110,1)"
@@ -3552,10 +3146,10 @@
               <g
                 id="g-svg-334"
                 fill="none"
-                transform="matrix(1,0,0,1,92.500000,333)"
+                transform="matrix(1,0,0,1,87.500000,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-340"
                     fill="rgba(110,110,110,1)"
@@ -3579,10 +3173,10 @@
               <g
                 id="g-svg-335"
                 fill="none"
-                transform="matrix(1,0,0,1,175,333)"
+                transform="matrix(1,0,0,1,170,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-341"
                     fill="rgba(110,110,110,1)"
@@ -3606,10 +3200,10 @@
               <g
                 id="g-svg-336"
                 fill="none"
-                transform="matrix(1,0,0,1,257.500000,333)"
+                transform="matrix(1,0,0,1,252.500000,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-342"
                     fill="rgba(110,110,110,1)"
@@ -3633,10 +3227,10 @@
               <g
                 id="g-svg-337"
                 fill="none"
-                transform="matrix(1,0,0,1,340,333)"
+                transform="matrix(1,0,0,1,335,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-343"
                     fill="rgba(110,110,110,1)"
@@ -3660,10 +3254,10 @@
               <g
                 id="g-svg-338"
                 fill="none"
-                transform="matrix(1,0,0,1,422.500000,333)"
+                transform="matrix(1,0,0,1,417.500000,345)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,5,-12)">
                   <text
                     id="g-svg-344"
                     fill="rgba(110,110,110,1)"
@@ -3686,12 +3280,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-345"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-345" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/AxisLinearTitle.svg b/__tests__/integration/snapshots/AxisLinearTitle.svg
index fbf2251c1..1f40c5bcf 100644
--- a/__tests__/integration/snapshots/AxisLinearTitle.svg
+++ b/__tests__/integration/snapshots/AxisLinearTitle.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-512"
-        fill="none"
-        width="900"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-513" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-512" fill="none" width="900" height="500">
+        <g id="g-svg-513" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,50 L 100,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,50 L 150,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,50 L 200,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,50 L 250,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,50 L 300,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,50 L 350,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,50 L 400,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 450,50 L 450,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,500,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,67 +120,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,50 L 500,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-15"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-16"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-15" fill="none" class="axis-main-group">
+            <g id="g-svg-16" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-17"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-19"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-20"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-20" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-21"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
@@ -221,7 +179,7 @@
                 transform="matrix(1,0,0,1,100,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
@@ -241,7 +199,7 @@
                 transform="matrix(1,0,0,1,150,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -261,7 +219,7 @@
                 transform="matrix(1,0,0,1,200,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
@@ -281,7 +239,7 @@
                 transform="matrix(1,0,0,1,250,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
@@ -301,7 +259,7 @@
                 transform="matrix(1,0,0,1,300,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
@@ -321,7 +279,7 @@
                 transform="matrix(1,0,0,1,350,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -341,7 +299,7 @@
                 transform="matrix(1,0,0,1,400,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -361,7 +319,7 @@
                 transform="matrix(1,0,0,1,450,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -381,7 +339,7 @@
                 transform="matrix(1,0,0,1,500,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -396,19 +354,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-41"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-41" fill="none" class="axis-label-group">
               <g
                 id="g-svg-42"
                 fill="none"
                 transform="matrix(1,0,0,1,50,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-52"
                     fill="rgba(0,0,0,1)"
@@ -431,7 +384,7 @@
                 transform="matrix(1,0,0,1,100,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-53"
                     fill="rgba(0,0,0,1)"
@@ -454,7 +407,7 @@
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-54"
                     fill="rgba(0,0,0,1)"
@@ -477,7 +430,7 @@
                 transform="matrix(1,0,0,1,200,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-55"
                     fill="rgba(0,0,0,1)"
@@ -500,7 +453,7 @@
                 transform="matrix(1,0,0,1,250,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-56"
                     fill="rgba(0,0,0,1)"
@@ -523,7 +476,7 @@
                 transform="matrix(1,0,0,1,300,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -546,7 +499,7 @@
                 transform="matrix(1,0,0,1,350,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -569,7 +522,7 @@
                 transform="matrix(1,0,0,1,400,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -592,7 +545,7 @@
                 transform="matrix(1,0,0,1,450,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -615,7 +568,7 @@
                 transform="matrix(1,0,0,1,500,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -637,7 +590,7 @@
           <g
             id="g-svg-62"
             fill="none"
-            transform="matrix(1,0,0,1,11.800000,97)"
+            transform="matrix(1,0,0,1,30.900000,78.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,38.200001,0)">
@@ -661,26 +614,11 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-514" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-64"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-65"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-66"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,100)">
+        <g id="g-svg-514" fill="none">
+          <g id="g-svg-64" fill="none" class="axis-grid-group">
+            <g id="g-svg-65" fill="none" class="axis-grid">
+              <g id="g-svg-66" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-68"
                     fill="none"
@@ -688,10 +626,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,100 L 50,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,100)">
+                <g>
                   <path
                     id="g-svg-69"
                     fill="none"
@@ -699,10 +637,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,100 L 100,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,100)">
+                <g>
                   <path
                     id="g-svg-70"
                     fill="none"
@@ -710,10 +648,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,100 L 150,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,100)">
+                <g>
                   <path
                     id="g-svg-71"
                     fill="none"
@@ -721,10 +659,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,100 L 200,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,100)">
+                <g>
                   <path
                     id="g-svg-72"
                     fill="none"
@@ -732,10 +670,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,100 L 250,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,100)">
+                <g>
                   <path
                     id="g-svg-73"
                     fill="none"
@@ -743,10 +681,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,100 L 300,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,100)">
+                <g>
                   <path
                     id="g-svg-74"
                     fill="none"
@@ -754,10 +692,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,100 L 350,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,100)">
+                <g>
                   <path
                     id="g-svg-75"
                     fill="none"
@@ -765,10 +703,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,100 L 400,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,100)">
+                <g>
                   <path
                     id="g-svg-76"
                     fill="none"
@@ -776,10 +714,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 450,100 L 450,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,500,100)">
+                <g>
                   <path
                     id="g-svg-77"
                     fill="none"
@@ -787,67 +725,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,100 L 500,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-67"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-67" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-78"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-79"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,100)">
+          <g id="g-svg-78" fill="none" class="axis-main-group">
+            <g id="g-svg-79" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-80"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="100"
+                  x2="515"
+                  y2="100"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,100)">
                   <path
                     id="g-svg-82"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-83"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-83" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-84"
                 fill="none"
                 transform="matrix(1,0,0,1,50,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-94"
                     fill="none"
@@ -867,7 +784,7 @@
                 transform="matrix(1,0,0,1,100,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-95"
                     fill="none"
@@ -887,7 +804,7 @@
                 transform="matrix(1,0,0,1,150,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-96"
                     fill="none"
@@ -907,7 +824,7 @@
                 transform="matrix(1,0,0,1,200,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-97"
                     fill="none"
@@ -927,7 +844,7 @@
                 transform="matrix(1,0,0,1,250,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-98"
                     fill="none"
@@ -947,7 +864,7 @@
                 transform="matrix(1,0,0,1,300,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-99"
                     fill="none"
@@ -967,7 +884,7 @@
                 transform="matrix(1,0,0,1,350,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-100"
                     fill="none"
@@ -987,7 +904,7 @@
                 transform="matrix(1,0,0,1,400,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-101"
                     fill="none"
@@ -1007,7 +924,7 @@
                 transform="matrix(1,0,0,1,450,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-102"
                     fill="none"
@@ -1027,7 +944,7 @@
                 transform="matrix(1,0,0,1,500,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-103"
                     fill="none"
@@ -1042,19 +959,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-104"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-104" fill="none" class="axis-label-group">
               <g
                 id="g-svg-105"
                 fill="none"
                 transform="matrix(1,0,0,1,50,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-115"
                     fill="rgba(0,0,0,1)"
@@ -1077,7 +989,7 @@
                 transform="matrix(1,0,0,1,100,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-116"
                     fill="rgba(0,0,0,1)"
@@ -1100,7 +1012,7 @@
                 transform="matrix(1,0,0,1,150,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-117"
                     fill="rgba(0,0,0,1)"
@@ -1123,7 +1035,7 @@
                 transform="matrix(1,0,0,1,200,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-118"
                     fill="rgba(0,0,0,1)"
@@ -1146,7 +1058,7 @@
                 transform="matrix(1,0,0,1,250,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-119"
                     fill="rgba(0,0,0,1)"
@@ -1169,7 +1081,7 @@
                 transform="matrix(1,0,0,1,300,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-120"
                     fill="rgba(0,0,0,1)"
@@ -1192,7 +1104,7 @@
                 transform="matrix(1,0,0,1,350,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-121"
                     fill="rgba(0,0,0,1)"
@@ -1215,7 +1127,7 @@
                 transform="matrix(1,0,0,1,400,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-122"
                     fill="rgba(0,0,0,1)"
@@ -1238,7 +1150,7 @@
                 transform="matrix(1,0,0,1,450,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-123"
                     fill="rgba(0,0,0,1)"
@@ -1261,7 +1173,7 @@
                 transform="matrix(1,0,0,1,500,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-124"
                     fill="rgba(0,0,0,1)"
@@ -1283,10 +1195,10 @@
           <g
             id="g-svg-125"
             fill="none"
-            transform="matrix(1,0,0,1,285,147)"
+            transform="matrix(1,0,0,1,285,128.500000)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-126"
                 fill="rgba(255,0,0,1)"
@@ -1307,26 +1219,22 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-515" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-128"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-129"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-130"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,150)">
+        <g id="g-svg-515" fill="none">
+          <g id="g-svg-127" fill="none" class="axis-grid-group">
+            <g id="g-svg-128" fill="none" class="axis-grid">
+              <g id="g-svg-129" fill="none" class="grid-line-group">
+                <g>
+                  <path
+                    id="g-svg-131"
+                    fill="none"
+                    class="grid-line"
+                    stroke="rgba(217,217,217,1)"
+                    stroke-width="1"
+                    stroke-dasharray="4,4"
+                    d="M 50,150 L 50,150"
+                  />
+                </g>
+                <g>
                   <path
                     id="g-svg-132"
                     fill="none"
@@ -1334,10 +1242,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,150 L 100,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,150)">
+                <g>
                   <path
                     id="g-svg-133"
                     fill="none"
@@ -1345,10 +1253,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
                     id="g-svg-134"
                     fill="none"
@@ -1356,10 +1264,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,150 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,150)">
+                <g>
                   <path
                     id="g-svg-135"
                     fill="none"
@@ -1367,10 +1275,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,150 L 250,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,150)">
+                <g>
                   <path
                     id="g-svg-136"
                     fill="none"
@@ -1378,10 +1286,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,150 L 300,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,150)">
+                <g>
                   <path
                     id="g-svg-137"
                     fill="none"
@@ -1389,10 +1297,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,150 L 350,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,150)">
+                <g>
                   <path
                     id="g-svg-138"
                     fill="none"
@@ -1400,10 +1308,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,150 L 400,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,150)">
+                <g>
                   <path
                     id="g-svg-139"
                     fill="none"
@@ -1411,10 +1319,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 450,150 L 450,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,150)">
+                <g>
                   <path
                     id="g-svg-140"
                     fill="none"
@@ -1422,80 +1330,48 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
-                  />
-                </g>
-                <g transform="matrix(1,0,0,1,500,150)">
-                  <path
-                    id="g-svg-141"
-                    fill="none"
-                    class="grid-line"
-                    stroke="rgba(217,217,217,1)"
-                    stroke-width="1"
-                    stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,150 L 500,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-131"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-130" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-142"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-143"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,150)">
+          <g id="g-svg-141" fill="none" class="axis-main-group">
+            <g id="g-svg-142" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-144"
+                  id="g-svg-143"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="150"
+                  x2="515"
+                  y2="150"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,150)">
                   <path
-                    id="g-svg-146"
+                    id="g-svg-145"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-147"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-146" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-148"
+                id="g-svg-147"
                 fill="none"
                 transform="matrix(1,0,0,1,50,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-158"
+                    id="g-svg-157"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1508,14 +1384,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-149"
+                id="g-svg-148"
                 fill="none"
                 transform="matrix(1,0,0,1,100,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-159"
+                    id="g-svg-158"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1528,14 +1404,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-150"
+                id="g-svg-149"
                 fill="none"
                 transform="matrix(1,0,0,1,150,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-160"
+                    id="g-svg-159"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1548,14 +1424,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-151"
+                id="g-svg-150"
                 fill="none"
                 transform="matrix(1,0,0,1,200,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-161"
+                    id="g-svg-160"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1568,14 +1444,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-152"
+                id="g-svg-151"
                 fill="none"
                 transform="matrix(1,0,0,1,250,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-162"
+                    id="g-svg-161"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1588,14 +1464,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-153"
+                id="g-svg-152"
                 fill="none"
                 transform="matrix(1,0,0,1,300,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-163"
+                    id="g-svg-162"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1608,14 +1484,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-154"
+                id="g-svg-153"
                 fill="none"
                 transform="matrix(1,0,0,1,350,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-164"
+                    id="g-svg-163"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1628,14 +1504,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-155"
+                id="g-svg-154"
                 fill="none"
                 transform="matrix(1,0,0,1,400,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-165"
+                    id="g-svg-164"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1648,14 +1524,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-156"
+                id="g-svg-155"
                 fill="none"
                 transform="matrix(1,0,0,1,450,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-166"
+                    id="g-svg-165"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1668,14 +1544,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-157"
+                id="g-svg-156"
                 fill="none"
                 transform="matrix(1,0,0,1,500,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-167"
+                    id="g-svg-166"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1688,21 +1564,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-168"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-167" fill="none" class="axis-label-group">
               <g
-                id="g-svg-169"
+                id="g-svg-168"
                 fill="none"
                 transform="matrix(1,0,0,1,50,170)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-179"
+                    id="g-svg-178"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1718,14 +1589,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-170"
+                id="g-svg-169"
                 fill="none"
                 transform="matrix(1,0,0,1,100,170)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-180"
+                    id="g-svg-179"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1741,14 +1612,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-171"
+                id="g-svg-170"
                 fill="none"
                 transform="matrix(1,0,0,1,150,170)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-181"
+                    id="g-svg-180"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1764,14 +1635,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-172"
+                id="g-svg-171"
                 fill="none"
                 transform="matrix(1,0,0,1,200,170)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-182"
+                    id="g-svg-181"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1787,14 +1658,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-173"
+                id="g-svg-172"
                 fill="none"
                 transform="matrix(1,0,0,1,250,170)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-183"
+                    id="g-svg-182"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1810,14 +1681,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-174"
+                id="g-svg-173"
                 fill="none"
                 transform="matrix(1,0,0,1,300,170)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-184"
+                    id="g-svg-183"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1833,14 +1704,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-175"
+                id="g-svg-174"
                 fill="none"
                 transform="matrix(1,0,0,1,350,170)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-185"
+                    id="g-svg-184"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1856,14 +1727,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-176"
+                id="g-svg-175"
                 fill="none"
                 transform="matrix(1,0,0,1,400,170)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-186"
+                    id="g-svg-185"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1879,14 +1750,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-177"
+                id="g-svg-176"
                 fill="none"
                 transform="matrix(1,0,0,1,450,170)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-187"
+                    id="g-svg-186"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1902,14 +1773,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-178"
+                id="g-svg-177"
                 fill="none"
                 transform="matrix(1,0,0,1,500,170)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-188"
+                    id="g-svg-187"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1927,14 +1798,14 @@
             </g>
           </g>
           <g
-            id="g-svg-189"
+            id="g-svg-188"
             fill="none"
-            transform="matrix(1,0,0,1,539.099976,197)"
+            transform="matrix(1,0,0,1,539.099976,178.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,-38.200001,0)">
               <text
-                id="g-svg-190"
+                id="g-svg-189"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1953,26 +1824,22 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-516" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-191"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-192"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-193"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,500,300)">
+        <g id="g-svg-516" fill="none">
+          <g id="g-svg-190" fill="none" class="axis-grid-group">
+            <g id="g-svg-191" fill="none" class="axis-grid">
+              <g id="g-svg-192" fill="none" class="grid-line-group">
+                <g>
+                  <path
+                    id="g-svg-194"
+                    fill="none"
+                    class="grid-line"
+                    stroke="rgba(217,217,217,1)"
+                    stroke-width="1"
+                    stroke-dasharray="4,4"
+                    d="M 500,300 L 500,300"
+                  />
+                </g>
+                <g>
                   <path
                     id="g-svg-195"
                     fill="none"
@@ -1980,10 +1847,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 450,300 L 450,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,300)">
+                <g>
                   <path
                     id="g-svg-196"
                     fill="none"
@@ -1991,10 +1858,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,300 L 400,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,300)">
+                <g>
                   <path
                     id="g-svg-197"
                     fill="none"
@@ -2002,10 +1869,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,300 L 350,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,300)">
+                <g>
                   <path
                     id="g-svg-198"
                     fill="none"
@@ -2013,10 +1880,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,300 L 300,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,300)">
+                <g>
                   <path
                     id="g-svg-199"
                     fill="none"
@@ -2024,10 +1891,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,300 L 250,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,300)">
+                <g>
                   <path
                     id="g-svg-200"
                     fill="none"
@@ -2035,10 +1902,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,300 L 200,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,300)">
+                <g>
                   <path
                     id="g-svg-201"
                     fill="none"
@@ -2046,10 +1913,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,300 L 150,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,300)">
+                <g>
                   <path
                     id="g-svg-202"
                     fill="none"
@@ -2057,10 +1924,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,300 L 100,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,300)">
+                <g>
                   <path
                     id="g-svg-203"
                     fill="none"
@@ -2068,85 +1935,53 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
-                  />
-                </g>
-                <g transform="matrix(1,0,0,1,50,300)">
-                  <path
-                    id="g-svg-204"
-                    fill="none"
-                    class="grid-line"
-                    stroke="rgba(217,217,217,1)"
-                    stroke-width="1"
-                    stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,300 L 50,300"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-194"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-193" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-205"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-206"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,300)">
+          <g id="g-svg-204" fill="none" class="axis-main-group">
+            <g id="g-svg-205" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-207"
+                  id="g-svg-206"
                   fill="none"
-                  x1="450"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="500"
+                  y1="300"
+                  x2="35"
+                  y2="300"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,35,300)">
                   <path
-                    id="g-svg-209"
+                    id="g-svg-208"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-210"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-209" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-211"
+                id="g-svg-210"
                 fill="none"
                 transform="matrix(1,0,0,1,500,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-221"
+                    id="g-svg-220"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2154,19 +1989,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-212"
+                id="g-svg-211"
                 fill="none"
                 transform="matrix(1,0,0,1,450,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-222"
+                    id="g-svg-221"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2174,19 +2009,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-213"
+                id="g-svg-212"
                 fill="none"
                 transform="matrix(1,0,0,1,400,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-223"
+                    id="g-svg-222"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2194,19 +2029,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-214"
+                id="g-svg-213"
                 fill="none"
                 transform="matrix(1,0,0,1,350,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-224"
+                    id="g-svg-223"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2214,19 +2049,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-215"
+                id="g-svg-214"
                 fill="none"
                 transform="matrix(1,0,0,1,300,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-225"
+                    id="g-svg-224"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2234,19 +2069,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-216"
+                id="g-svg-215"
                 fill="none"
                 transform="matrix(1,0,0,1,250,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-226"
+                    id="g-svg-225"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2254,19 +2089,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-217"
+                id="g-svg-216"
                 fill="none"
                 transform="matrix(1,0,0,1,200,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-227"
+                    id="g-svg-226"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2274,19 +2109,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-218"
+                id="g-svg-217"
                 fill="none"
                 transform="matrix(1,0,0,1,150,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-228"
+                    id="g-svg-227"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2294,19 +2129,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-219"
+                id="g-svg-218"
                 fill="none"
                 transform="matrix(1,0,0,1,100,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-229"
+                    id="g-svg-228"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2314,19 +2149,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-220"
+                id="g-svg-219"
                 fill="none"
                 transform="matrix(1,0,0,1,50,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-230"
+                    id="g-svg-229"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2334,21 +2169,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-231"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-230" fill="none" class="axis-label-group">
               <g
-                id="g-svg-232"
+                id="g-svg-231"
                 fill="none"
                 transform="matrix(1,0,0,1,500,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-242"
+                    id="g-svg-241"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -2364,14 +2194,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-233"
+                id="g-svg-232"
                 fill="none"
                 transform="matrix(1,0,0,1,450,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-243"
+                    id="g-svg-242"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -2387,14 +2217,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-234"
+                id="g-svg-233"
                 fill="none"
                 transform="matrix(1,0,0,1,400,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-244"
+                    id="g-svg-243"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -2410,14 +2240,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-235"
+                id="g-svg-234"
                 fill="none"
                 transform="matrix(1,0,0,1,350,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-245"
+                    id="g-svg-244"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -2433,14 +2263,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-236"
+                id="g-svg-235"
                 fill="none"
                 transform="matrix(1,0,0,1,300,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-246"
+                    id="g-svg-245"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -2456,14 +2286,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-237"
+                id="g-svg-236"
                 fill="none"
                 transform="matrix(1,0,0,1,250,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-247"
+                    id="g-svg-246"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -2479,14 +2309,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-238"
+                id="g-svg-237"
                 fill="none"
                 transform="matrix(1,0,0,1,200,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-248"
+                    id="g-svg-247"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -2502,14 +2332,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-239"
+                id="g-svg-238"
                 fill="none"
                 transform="matrix(1,0,0,1,150,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-249"
+                    id="g-svg-248"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -2525,14 +2355,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-240"
+                id="g-svg-239"
                 fill="none"
                 transform="matrix(1,0,0,1,100,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-250"
+                    id="g-svg-249"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -2548,14 +2378,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-241"
+                id="g-svg-240"
                 fill="none"
                 transform="matrix(1,0,0,1,50,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-251"
+                    id="g-svg-250"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -2573,14 +2403,14 @@
             </g>
           </g>
           <g
-            id="g-svg-252"
+            id="g-svg-251"
             fill="none"
-            transform="matrix(1,0,0,1,-8.200000,271.500000)"
+            transform="matrix(1,0,0,1,10.900000,271.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,38.200001,0)">
               <text
-                id="g-svg-253"
+                id="g-svg-252"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -2599,26 +2429,22 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-517" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-254"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-255"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-256"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,500,350)">
+        <g id="g-svg-517" fill="none">
+          <g id="g-svg-253" fill="none" class="axis-grid-group">
+            <g id="g-svg-254" fill="none" class="axis-grid">
+              <g id="g-svg-255" fill="none" class="grid-line-group">
+                <g>
+                  <path
+                    id="g-svg-257"
+                    fill="none"
+                    class="grid-line"
+                    stroke="rgba(217,217,217,1)"
+                    stroke-width="1"
+                    stroke-dasharray="4,4"
+                    d="M 500,350 L 500,350"
+                  />
+                </g>
+                <g>
                   <path
                     id="g-svg-258"
                     fill="none"
@@ -2626,10 +2452,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 450,350 L 450,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,350)">
+                <g>
                   <path
                     id="g-svg-259"
                     fill="none"
@@ -2637,10 +2463,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,350 L 400,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,350)">
+                <g>
                   <path
                     id="g-svg-260"
                     fill="none"
@@ -2648,10 +2474,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,350 L 350,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,350)">
+                <g>
                   <path
                     id="g-svg-261"
                     fill="none"
@@ -2659,10 +2485,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,350 L 300,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,350)">
+                <g>
                   <path
                     id="g-svg-262"
                     fill="none"
@@ -2670,10 +2496,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,350 L 250,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,350)">
+                <g>
                   <path
                     id="g-svg-263"
                     fill="none"
@@ -2681,10 +2507,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,350 L 200,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,350)">
+                <g>
                   <path
                     id="g-svg-264"
                     fill="none"
@@ -2692,10 +2518,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,350 L 150,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,350)">
+                <g>
                   <path
                     id="g-svg-265"
                     fill="none"
@@ -2703,10 +2529,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,350 L 100,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,350)">
+                <g>
                   <path
                     id="g-svg-266"
                     fill="none"
@@ -2714,85 +2540,53 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
-                  />
-                </g>
-                <g transform="matrix(1,0,0,1,50,350)">
-                  <path
-                    id="g-svg-267"
-                    fill="none"
-                    class="grid-line"
-                    stroke="rgba(217,217,217,1)"
-                    stroke-width="1"
-                    stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,350 L 50,350"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-257"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-256" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-268"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-269"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,350)">
+          <g id="g-svg-267" fill="none" class="axis-main-group">
+            <g id="g-svg-268" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-270"
+                  id="g-svg-269"
                   fill="none"
-                  x1="450"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="500"
+                  y1="350"
+                  x2="35"
+                  y2="350"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,35,350)">
                   <path
-                    id="g-svg-272"
+                    id="g-svg-271"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-273"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-272" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-274"
+                id="g-svg-273"
                 fill="none"
                 transform="matrix(1,0,0,1,500,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-284"
+                    id="g-svg-283"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2800,19 +2594,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-275"
+                id="g-svg-274"
                 fill="none"
                 transform="matrix(1,0,0,1,450,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-285"
+                    id="g-svg-284"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2820,19 +2614,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-276"
+                id="g-svg-275"
                 fill="none"
                 transform="matrix(1,0,0,1,400,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-286"
+                    id="g-svg-285"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2840,19 +2634,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-277"
+                id="g-svg-276"
                 fill="none"
                 transform="matrix(1,0,0,1,350,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-287"
+                    id="g-svg-286"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2860,19 +2654,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-278"
+                id="g-svg-277"
                 fill="none"
                 transform="matrix(1,0,0,1,300,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-288"
+                    id="g-svg-287"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2880,19 +2674,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-279"
+                id="g-svg-278"
                 fill="none"
                 transform="matrix(1,0,0,1,250,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-289"
+                    id="g-svg-288"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2900,19 +2694,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-280"
+                id="g-svg-279"
                 fill="none"
                 transform="matrix(1,0,0,1,200,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-290"
+                    id="g-svg-289"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2920,19 +2714,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-281"
+                id="g-svg-280"
                 fill="none"
                 transform="matrix(1,0,0,1,150,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-291"
+                    id="g-svg-290"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2940,19 +2734,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-282"
+                id="g-svg-281"
                 fill="none"
                 transform="matrix(1,0,0,1,100,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-292"
+                    id="g-svg-291"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2960,19 +2754,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-283"
+                id="g-svg-282"
                 fill="none"
                 transform="matrix(1,0,0,1,50,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-293"
+                    id="g-svg-292"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -2980,21 +2774,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-294"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-293" fill="none" class="axis-label-group">
               <g
-                id="g-svg-295"
+                id="g-svg-294"
                 fill="none"
                 transform="matrix(1,0,0,1,500,330)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-305"
+                    id="g-svg-304"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3010,14 +2799,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-296"
+                id="g-svg-295"
                 fill="none"
                 transform="matrix(1,0,0,1,450,330)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-306"
+                    id="g-svg-305"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3033,14 +2822,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-297"
+                id="g-svg-296"
                 fill="none"
                 transform="matrix(1,0,0,1,400,330)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-307"
+                    id="g-svg-306"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3056,14 +2845,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-298"
+                id="g-svg-297"
                 fill="none"
                 transform="matrix(1,0,0,1,350,330)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-308"
+                    id="g-svg-307"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3079,14 +2868,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-299"
+                id="g-svg-298"
                 fill="none"
                 transform="matrix(1,0,0,1,300,330)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-309"
+                    id="g-svg-308"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3102,14 +2891,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-300"
+                id="g-svg-299"
                 fill="none"
                 transform="matrix(1,0,0,1,250,330)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-310"
+                    id="g-svg-309"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3125,14 +2914,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-301"
+                id="g-svg-300"
                 fill="none"
                 transform="matrix(1,0,0,1,200,330)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-311"
+                    id="g-svg-310"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3148,14 +2937,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-302"
+                id="g-svg-301"
                 fill="none"
                 transform="matrix(1,0,0,1,150,330)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-312"
+                    id="g-svg-311"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3171,14 +2960,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-303"
+                id="g-svg-302"
                 fill="none"
                 transform="matrix(1,0,0,1,100,330)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-313"
+                    id="g-svg-312"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3194,14 +2983,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-304"
+                id="g-svg-303"
                 fill="none"
                 transform="matrix(1,0,0,1,50,330)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-314"
+                    id="g-svg-313"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3219,14 +3008,14 @@
             </g>
           </g>
           <g
-            id="g-svg-315"
+            id="g-svg-314"
             fill="none"
             transform="matrix(1,0,0,1,265,321.500000)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-316"
+                id="g-svg-315"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -3245,200 +3034,164 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-518" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-318"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-319"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-320"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,500,400)">
+        <g id="g-svg-518" fill="none">
+          <g id="g-svg-316" fill="none" class="axis-grid-group">
+            <g id="g-svg-317" fill="none" class="axis-grid">
+              <g id="g-svg-318" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-322"
+                    id="g-svg-320"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,400 L 500,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,400)">
+                <g>
                   <path
-                    id="g-svg-323"
+                    id="g-svg-321"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 450,400 L 450,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,400)">
+                <g>
                   <path
-                    id="g-svg-324"
+                    id="g-svg-322"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,400 L 400,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,400)">
+                <g>
                   <path
-                    id="g-svg-325"
+                    id="g-svg-323"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,400 L 350,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,400)">
+                <g>
                   <path
-                    id="g-svg-326"
+                    id="g-svg-324"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,400 L 300,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,400)">
+                <g>
                   <path
-                    id="g-svg-327"
+                    id="g-svg-325"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,400 L 250,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,400)">
+                <g>
                   <path
-                    id="g-svg-328"
+                    id="g-svg-326"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,400 L 200,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,400)">
+                <g>
                   <path
-                    id="g-svg-329"
+                    id="g-svg-327"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,400 L 150,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,400)">
+                <g>
                   <path
-                    id="g-svg-330"
+                    id="g-svg-328"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,400 L 100,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,400)">
+                <g>
                   <path
-                    id="g-svg-331"
+                    id="g-svg-329"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,400 L 50,400"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-321"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-319" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-332"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-333"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,400)">
+          <g id="g-svg-330" fill="none" class="axis-main-group">
+            <g id="g-svg-331" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-334"
+                  id="g-svg-332"
                   fill="none"
-                  x1="450"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="500"
+                  y1="400"
+                  x2="35"
+                  y2="400"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,35,400)">
                   <path
-                    id="g-svg-336"
+                    id="g-svg-334"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-337"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-335" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-338"
+                id="g-svg-336"
                 fill="none"
                 transform="matrix(1,0,0,1,500,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-348"
+                    id="g-svg-346"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3446,19 +3199,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-339"
+                id="g-svg-337"
                 fill="none"
                 transform="matrix(1,0,0,1,450,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-349"
+                    id="g-svg-347"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3466,19 +3219,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-340"
+                id="g-svg-338"
                 fill="none"
                 transform="matrix(1,0,0,1,400,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-350"
+                    id="g-svg-348"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3486,19 +3239,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-341"
+                id="g-svg-339"
                 fill="none"
                 transform="matrix(1,0,0,1,350,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-351"
+                    id="g-svg-349"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3506,19 +3259,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-342"
+                id="g-svg-340"
                 fill="none"
                 transform="matrix(1,0,0,1,300,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-352"
+                    id="g-svg-350"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3526,19 +3279,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-343"
+                id="g-svg-341"
                 fill="none"
                 transform="matrix(1,0,0,1,250,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-353"
+                    id="g-svg-351"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3546,19 +3299,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-344"
+                id="g-svg-342"
                 fill="none"
                 transform="matrix(1,0,0,1,200,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-354"
+                    id="g-svg-352"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3566,19 +3319,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-345"
+                id="g-svg-343"
                 fill="none"
                 transform="matrix(1,0,0,1,150,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-355"
+                    id="g-svg-353"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3586,19 +3339,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-346"
+                id="g-svg-344"
                 fill="none"
                 transform="matrix(1,0,0,1,100,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-356"
+                    id="g-svg-354"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3606,19 +3359,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-347"
+                id="g-svg-345"
                 fill="none"
                 transform="matrix(1,0,0,1,50,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-357"
+                    id="g-svg-355"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -3626,21 +3379,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-358"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-356" fill="none" class="axis-label-group">
               <g
-                id="g-svg-359"
+                id="g-svg-357"
                 fill="none"
                 transform="matrix(1,0,0,1,500,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-369"
+                    id="g-svg-367"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3656,14 +3404,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-360"
+                id="g-svg-358"
                 fill="none"
                 transform="matrix(1,0,0,1,450,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-370"
+                    id="g-svg-368"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3679,14 +3427,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-361"
+                id="g-svg-359"
                 fill="none"
                 transform="matrix(1,0,0,1,400,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-371"
+                    id="g-svg-369"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3702,14 +3450,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-362"
+                id="g-svg-360"
                 fill="none"
                 transform="matrix(1,0,0,1,350,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-372"
+                    id="g-svg-370"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3725,14 +3473,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-363"
+                id="g-svg-361"
                 fill="none"
                 transform="matrix(1,0,0,1,300,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-373"
+                    id="g-svg-371"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3748,14 +3496,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-364"
+                id="g-svg-362"
                 fill="none"
                 transform="matrix(1,0,0,1,250,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-374"
+                    id="g-svg-372"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3771,14 +3519,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-365"
+                id="g-svg-363"
                 fill="none"
                 transform="matrix(1,0,0,1,200,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-375"
+                    id="g-svg-373"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3794,14 +3542,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-366"
+                id="g-svg-364"
                 fill="none"
                 transform="matrix(1,0,0,1,150,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-376"
+                    id="g-svg-374"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3817,14 +3565,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-367"
+                id="g-svg-365"
                 fill="none"
                 transform="matrix(1,0,0,1,100,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-377"
+                    id="g-svg-375"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3840,14 +3588,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-368"
+                id="g-svg-366"
                 fill="none"
                 transform="matrix(1,0,0,1,50,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-378"
+                    id="g-svg-376"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -3865,14 +3613,14 @@
             </g>
           </g>
           <g
-            id="g-svg-379"
+            id="g-svg-377"
             fill="none"
             transform="matrix(1,0,0,1,519.099976,371.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,-38.200001,0)">
               <text
-                id="g-svg-380"
+                id="g-svg-378"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -3891,199 +3639,163 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-519" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-381"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-382"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-383"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,600,50)">
+        <g id="g-svg-519" fill="none">
+          <g id="g-svg-379" fill="none" class="axis-grid-group">
+            <g id="g-svg-380" fill="none" class="axis-grid">
+              <g id="g-svg-381" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-385"
+                    id="g-svg-383"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,50 L 600,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,94.444443)">
+                <g>
                   <path
-                    id="g-svg-386"
+                    id="g-svg-384"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,94.44444444444444 L 600,94.44444444444444"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,138.888885)">
+                <g>
                   <path
-                    id="g-svg-387"
+                    id="g-svg-385"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,138.88888888888889 L 600,138.88888888888889"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,183.333328)">
+                <g>
                   <path
-                    id="g-svg-388"
+                    id="g-svg-386"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,183.33333333333331 L 600,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,227.777771)">
+                <g>
                   <path
-                    id="g-svg-389"
+                    id="g-svg-387"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,227.77777777777777 L 600,227.77777777777777"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,272.222229)">
+                <g>
                   <path
-                    id="g-svg-390"
+                    id="g-svg-388"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,272.22222222222223 L 600,272.22222222222223"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,316.666656)">
+                <g>
                   <path
-                    id="g-svg-391"
+                    id="g-svg-389"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,316.66666666666663 L 600,316.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,361.111115)">
+                <g>
                   <path
-                    id="g-svg-392"
+                    id="g-svg-390"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,361.11111111111114 L 600,361.11111111111114"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,405.555542)">
+                <g>
                   <path
-                    id="g-svg-393"
+                    id="g-svg-391"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,405.55555555555554 L 600,405.55555555555554"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,600,450)">
+                <g>
                   <path
-                    id="g-svg-394"
+                    id="g-svg-392"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 600,450 L 600,450"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-384"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-382" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-395"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-396"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,600,50)">
+          <g id="g-svg-393" fill="none" class="axis-main-group">
+            <g id="g-svg-394" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-397"
+                  id="g-svg-395"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="415"
+                  x1="600"
+                  y1="50"
+                  x2="600"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,415)">
+                <g transform="matrix(0,-0.500000,0.500000,0,600,465)">
                   <path
-                    id="g-svg-399"
+                    id="g-svg-397"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-400"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-398" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-401"
+                id="g-svg-399"
                 fill="none"
                 transform="matrix(1,0,0,1,600,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-411"
+                    id="g-svg-409"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4092,18 +3804,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-402"
+                id="g-svg-400"
                 fill="none"
                 transform="matrix(1,0,0,1,600,94.444443)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-412"
+                    id="g-svg-410"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4112,18 +3824,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-403"
+                id="g-svg-401"
                 fill="none"
                 transform="matrix(1,0,0,1,600,138.888885)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-413"
+                    id="g-svg-411"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4132,18 +3844,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-404"
+                id="g-svg-402"
                 fill="none"
                 transform="matrix(1,0,0,1,600,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-414"
+                    id="g-svg-412"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4152,18 +3864,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-405"
+                id="g-svg-403"
                 fill="none"
                 transform="matrix(1,0,0,1,600,227.777771)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-415"
+                    id="g-svg-413"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4172,18 +3884,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-406"
+                id="g-svg-404"
                 fill="none"
                 transform="matrix(1,0,0,1,600,272.222229)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-416"
+                    id="g-svg-414"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4192,18 +3904,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-407"
+                id="g-svg-405"
                 fill="none"
                 transform="matrix(1,0,0,1,600,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-417"
+                    id="g-svg-415"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4212,18 +3924,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-408"
+                id="g-svg-406"
                 fill="none"
                 transform="matrix(1,0,0,1,600,361.111115)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-418"
+                    id="g-svg-416"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4232,18 +3944,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-409"
+                id="g-svg-407"
                 fill="none"
                 transform="matrix(1,0,0,1,600,405.555542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-419"
+                    id="g-svg-417"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4252,18 +3964,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-410"
+                id="g-svg-408"
                 fill="none"
                 transform="matrix(1,0,0,1,600,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-420"
+                    id="g-svg-418"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4272,21 +3984,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-421"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-419" fill="none" class="axis-label-group">
               <g
-                id="g-svg-422"
+                id="g-svg-420"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,580,50)"
+                transform="matrix(1,0,0,1,580,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-432"
+                    id="g-svg-430"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4302,14 +4009,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-423"
+                id="g-svg-421"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,580,94.444443)"
+                transform="matrix(1,0,0,1,580,94.444443)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-433"
+                    id="g-svg-431"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4325,14 +4032,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-424"
+                id="g-svg-422"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,580,138.888885)"
+                transform="matrix(1,0,0,1,580,138.888885)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-434"
+                    id="g-svg-432"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4348,14 +4055,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-425"
+                id="g-svg-423"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,580,183.333328)"
+                transform="matrix(1,0,0,1,580,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-435"
+                    id="g-svg-433"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4371,14 +4078,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-426"
+                id="g-svg-424"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,580,227.777771)"
+                transform="matrix(1,0,0,1,580,227.777771)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-436"
+                    id="g-svg-434"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4394,14 +4101,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-427"
+                id="g-svg-425"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,580,272.222229)"
+                transform="matrix(1,0,0,1,580,272.222229)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-437"
+                    id="g-svg-435"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4417,14 +4124,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-428"
+                id="g-svg-426"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,580,316.666656)"
+                transform="matrix(1,0,0,1,580,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-438"
+                    id="g-svg-436"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4440,14 +4147,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-429"
+                id="g-svg-427"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,580,361.111115)"
+                transform="matrix(1,0,0,1,580,361.111115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-439"
+                    id="g-svg-437"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4463,14 +4170,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-430"
+                id="g-svg-428"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,580,405.555542)"
+                transform="matrix(1,0,0,1,580,405.555542)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-440"
+                    id="g-svg-438"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4486,14 +4193,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-431"
+                id="g-svg-429"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,580,450)"
+                transform="matrix(1,0,0,1,580,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-441"
+                    id="g-svg-439"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4511,14 +4218,14 @@
             </g>
           </g>
           <g
-            id="g-svg-442"
+            id="g-svg-440"
             fill="none"
-            transform="matrix(1,0,0,1,551.799988,31.500000)"
+            transform="matrix(1,0,0,1,570.900024,31.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,0,37)">
               <text
-                id="g-svg-443"
+                id="g-svg-441"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -4537,199 +4244,163 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-520" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-444"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-445"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-446"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,650,50)">
+        <g id="g-svg-520" fill="none">
+          <g id="g-svg-442" fill="none" class="axis-grid-group">
+            <g id="g-svg-443" fill="none" class="axis-grid">
+              <g id="g-svg-444" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-448"
+                    id="g-svg-446"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,50 L 650,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,94.444443)">
+                <g>
                   <path
-                    id="g-svg-449"
+                    id="g-svg-447"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,94.44444444444444 L 650,94.44444444444444"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,138.888885)">
+                <g>
                   <path
-                    id="g-svg-450"
+                    id="g-svg-448"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,138.88888888888889 L 650,138.88888888888889"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,183.333328)">
+                <g>
                   <path
-                    id="g-svg-451"
+                    id="g-svg-449"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,183.33333333333331 L 650,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,227.777771)">
+                <g>
                   <path
-                    id="g-svg-452"
+                    id="g-svg-450"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,227.77777777777777 L 650,227.77777777777777"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,272.222229)">
+                <g>
                   <path
-                    id="g-svg-453"
+                    id="g-svg-451"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,272.22222222222223 L 650,272.22222222222223"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,316.666656)">
+                <g>
                   <path
-                    id="g-svg-454"
+                    id="g-svg-452"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,316.66666666666663 L 650,316.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,361.111115)">
+                <g>
                   <path
-                    id="g-svg-455"
+                    id="g-svg-453"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,361.11111111111114 L 650,361.11111111111114"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,405.555542)">
+                <g>
                   <path
-                    id="g-svg-456"
+                    id="g-svg-454"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,405.55555555555554 L 650,405.55555555555554"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,650,450)">
+                <g>
                   <path
-                    id="g-svg-457"
+                    id="g-svg-455"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 650,450 L 650,450"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-447"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-445" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-458"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-459"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,650,50)">
+          <g id="g-svg-456" fill="none" class="axis-main-group">
+            <g id="g-svg-457" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-460"
+                  id="g-svg-458"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="415"
+                  x1="650"
+                  y1="50"
+                  x2="650"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,415)">
+                <g transform="matrix(0,-0.500000,0.500000,0,650,465)">
                   <path
-                    id="g-svg-462"
+                    id="g-svg-460"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-463"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-461" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-464"
+                id="g-svg-462"
                 fill="none"
                 transform="matrix(1,0,0,1,650,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-474"
+                    id="g-svg-472"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4738,18 +4409,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-465"
+                id="g-svg-463"
                 fill="none"
                 transform="matrix(1,0,0,1,650,94.444443)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-475"
+                    id="g-svg-473"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4758,18 +4429,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-466"
+                id="g-svg-464"
                 fill="none"
                 transform="matrix(1,0,0,1,650,138.888885)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-476"
+                    id="g-svg-474"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4778,18 +4449,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-467"
+                id="g-svg-465"
                 fill="none"
                 transform="matrix(1,0,0,1,650,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-477"
+                    id="g-svg-475"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4798,18 +4469,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-468"
+                id="g-svg-466"
                 fill="none"
                 transform="matrix(1,0,0,1,650,227.777771)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-478"
+                    id="g-svg-476"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4818,18 +4489,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-469"
+                id="g-svg-467"
                 fill="none"
                 transform="matrix(1,0,0,1,650,272.222229)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-479"
+                    id="g-svg-477"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4838,18 +4509,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-470"
+                id="g-svg-468"
                 fill="none"
                 transform="matrix(1,0,0,1,650,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-480"
+                    id="g-svg-478"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4858,18 +4529,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-471"
+                id="g-svg-469"
                 fill="none"
                 transform="matrix(1,0,0,1,650,361.111115)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-481"
+                    id="g-svg-479"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4878,18 +4549,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-472"
+                id="g-svg-470"
                 fill="none"
                 transform="matrix(1,0,0,1,650,405.555542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-482"
+                    id="g-svg-480"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4898,18 +4569,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-473"
+                id="g-svg-471"
                 fill="none"
                 transform="matrix(1,0,0,1,650,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-483"
+                    id="g-svg-481"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -4918,21 +4589,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-484"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-482" fill="none" class="axis-label-group">
               <g
-                id="g-svg-485"
+                id="g-svg-483"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,630,50)"
+                transform="matrix(1,0,0,1,630,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-495"
+                    id="g-svg-493"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4948,14 +4614,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-486"
+                id="g-svg-484"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,630,94.444443)"
+                transform="matrix(1,0,0,1,630,94.444443)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-496"
+                    id="g-svg-494"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4971,14 +4637,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-487"
+                id="g-svg-485"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,630,138.888885)"
+                transform="matrix(1,0,0,1,630,138.888885)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-497"
+                    id="g-svg-495"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -4994,14 +4660,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-488"
+                id="g-svg-486"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,630,183.333328)"
+                transform="matrix(1,0,0,1,630,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-498"
+                    id="g-svg-496"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5017,14 +4683,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-489"
+                id="g-svg-487"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,630,227.777771)"
+                transform="matrix(1,0,0,1,630,227.777771)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-499"
+                    id="g-svg-497"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5040,14 +4706,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-490"
+                id="g-svg-488"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,630,272.222229)"
+                transform="matrix(1,0,0,1,630,272.222229)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-500"
+                    id="g-svg-498"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5063,14 +4729,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-491"
+                id="g-svg-489"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,630,316.666656)"
+                transform="matrix(1,0,0,1,630,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-501"
+                    id="g-svg-499"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5086,14 +4752,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-492"
+                id="g-svg-490"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,630,361.111115)"
+                transform="matrix(1,0,0,1,630,361.111115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-502"
+                    id="g-svg-500"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5109,14 +4775,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-493"
+                id="g-svg-491"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,630,405.555542)"
+                transform="matrix(1,0,0,1,630,405.555542)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-503"
+                    id="g-svg-501"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5132,14 +4798,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-494"
+                id="g-svg-492"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,630,450)"
+                transform="matrix(1,0,0,1,630,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-504"
+                    id="g-svg-502"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5157,14 +4823,14 @@
             </g>
           </g>
           <g
-            id="g-svg-505"
+            id="g-svg-503"
             fill="none"
-            transform="matrix(1,0,0,1,601.799988,260)"
+            transform="matrix(1,0,0,1,620.900024,260)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-506"
+                id="g-svg-504"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -5183,199 +4849,163 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-521" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-508"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-509"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-510"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,700,50)">
+        <g id="g-svg-521" fill="none">
+          <g id="g-svg-505" fill="none" class="axis-grid-group">
+            <g id="g-svg-506" fill="none" class="axis-grid">
+              <g id="g-svg-507" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-512"
+                    id="g-svg-509"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,50 L 700,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,94.444443)">
+                <g>
                   <path
-                    id="g-svg-513"
+                    id="g-svg-510"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,94.44444444444444 L 700,94.44444444444444"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,138.888885)">
+                <g>
                   <path
-                    id="g-svg-514"
+                    id="g-svg-511"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,138.88888888888889 L 700,138.88888888888889"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,183.333328)">
+                <g>
                   <path
-                    id="g-svg-515"
+                    id="g-svg-512"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,183.33333333333331 L 700,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,227.777771)">
+                <g>
                   <path
-                    id="g-svg-516"
+                    id="g-svg-513"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,227.77777777777777 L 700,227.77777777777777"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,272.222229)">
+                <g>
                   <path
-                    id="g-svg-517"
+                    id="g-svg-514"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,272.22222222222223 L 700,272.22222222222223"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,316.666656)">
+                <g>
                   <path
-                    id="g-svg-518"
+                    id="g-svg-515"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,316.66666666666663 L 700,316.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,361.111115)">
+                <g>
                   <path
-                    id="g-svg-519"
+                    id="g-svg-516"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,361.11111111111114 L 700,361.11111111111114"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,405.555542)">
+                <g>
                   <path
-                    id="g-svg-520"
+                    id="g-svg-517"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,405.55555555555554 L 700,405.55555555555554"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,700,450)">
+                <g>
                   <path
-                    id="g-svg-521"
+                    id="g-svg-518"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 700,450 L 700,450"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-511"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-508" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-522"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-523"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,700,50)">
+          <g id="g-svg-519" fill="none" class="axis-main-group">
+            <g id="g-svg-520" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-524"
+                  id="g-svg-521"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="415"
+                  x1="700"
+                  y1="50"
+                  x2="700"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,415)">
+                <g transform="matrix(0,-0.500000,0.500000,0,700,465)">
                   <path
-                    id="g-svg-526"
+                    id="g-svg-523"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-527"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-524" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-528"
+                id="g-svg-525"
                 fill="none"
                 transform="matrix(1,0,0,1,700,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-538"
+                    id="g-svg-535"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5384,18 +5014,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-529"
+                id="g-svg-526"
                 fill="none"
                 transform="matrix(1,0,0,1,700,94.444443)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-539"
+                    id="g-svg-536"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5404,18 +5034,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-530"
+                id="g-svg-527"
                 fill="none"
                 transform="matrix(1,0,0,1,700,138.888885)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-540"
+                    id="g-svg-537"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5424,18 +5054,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-531"
+                id="g-svg-528"
                 fill="none"
                 transform="matrix(1,0,0,1,700,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-541"
+                    id="g-svg-538"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5444,18 +5074,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-532"
+                id="g-svg-529"
                 fill="none"
                 transform="matrix(1,0,0,1,700,227.777771)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-542"
+                    id="g-svg-539"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5464,18 +5094,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-533"
+                id="g-svg-530"
                 fill="none"
                 transform="matrix(1,0,0,1,700,272.222229)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-543"
+                    id="g-svg-540"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5484,18 +5114,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-534"
+                id="g-svg-531"
                 fill="none"
                 transform="matrix(1,0,0,1,700,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-544"
+                    id="g-svg-541"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5504,18 +5134,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-535"
+                id="g-svg-532"
                 fill="none"
                 transform="matrix(1,0,0,1,700,361.111115)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-545"
+                    id="g-svg-542"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5524,18 +5154,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-536"
+                id="g-svg-533"
                 fill="none"
                 transform="matrix(1,0,0,1,700,405.555542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-546"
+                    id="g-svg-543"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5544,18 +5174,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-537"
+                id="g-svg-534"
                 fill="none"
                 transform="matrix(1,0,0,1,700,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-547"
+                    id="g-svg-544"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -5564,21 +5194,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-548"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-545" fill="none" class="axis-label-group">
               <g
-                id="g-svg-549"
+                id="g-svg-546"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,680,50)"
+                transform="matrix(1,0,0,1,680,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-559"
+                    id="g-svg-556"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5594,14 +5219,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-550"
+                id="g-svg-547"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,680,94.444443)"
+                transform="matrix(1,0,0,1,680,94.444443)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-560"
+                    id="g-svg-557"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5617,14 +5242,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-551"
+                id="g-svg-548"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,680,138.888885)"
+                transform="matrix(1,0,0,1,680,138.888885)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-561"
+                    id="g-svg-558"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5640,14 +5265,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-552"
+                id="g-svg-549"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,680,183.333328)"
+                transform="matrix(1,0,0,1,680,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-562"
+                    id="g-svg-559"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5663,14 +5288,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-553"
+                id="g-svg-550"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,680,227.777771)"
+                transform="matrix(1,0,0,1,680,227.777771)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-563"
+                    id="g-svg-560"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5686,14 +5311,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-554"
+                id="g-svg-551"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,680,272.222229)"
+                transform="matrix(1,0,0,1,680,272.222229)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-564"
+                    id="g-svg-561"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5709,14 +5334,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-555"
+                id="g-svg-552"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,680,316.666656)"
+                transform="matrix(1,0,0,1,680,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-565"
+                    id="g-svg-562"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5732,14 +5357,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-556"
+                id="g-svg-553"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,680,361.111115)"
+                transform="matrix(1,0,0,1,680,361.111115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-566"
+                    id="g-svg-563"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5755,14 +5380,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-557"
+                id="g-svg-554"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,680,405.555542)"
+                transform="matrix(1,0,0,1,680,405.555542)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-567"
+                    id="g-svg-564"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5778,14 +5403,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-558"
+                id="g-svg-555"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,680,450)"
+                transform="matrix(1,0,0,1,680,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-568"
+                    id="g-svg-565"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -5803,14 +5428,14 @@
             </g>
           </g>
           <g
-            id="g-svg-569"
+            id="g-svg-566"
             fill="none"
-            transform="matrix(1,0,0,1,651.799988,507)"
+            transform="matrix(1,0,0,1,670.900024,488.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,0,-37)">
               <text
-                id="g-svg-570"
+                id="g-svg-567"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -5829,199 +5454,163 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-522" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-571"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-572"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-573"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,750,50)">
+        <g id="g-svg-522" fill="none">
+          <g id="g-svg-568" fill="none" class="axis-grid-group">
+            <g id="g-svg-569" fill="none" class="axis-grid">
+              <g id="g-svg-570" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-575"
+                    id="g-svg-572"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,50 L 750,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,94.444443)">
+                <g>
                   <path
-                    id="g-svg-576"
+                    id="g-svg-573"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,94.44444444444444 L 750,94.44444444444444"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,138.888885)">
+                <g>
                   <path
-                    id="g-svg-577"
+                    id="g-svg-574"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,138.88888888888889 L 750,138.88888888888889"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,183.333328)">
+                <g>
                   <path
-                    id="g-svg-578"
+                    id="g-svg-575"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,183.33333333333331 L 750,183.33333333333331"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,227.777771)">
+                <g>
                   <path
-                    id="g-svg-579"
+                    id="g-svg-576"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,227.77777777777777 L 750,227.77777777777777"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,272.222229)">
+                <g>
                   <path
-                    id="g-svg-580"
+                    id="g-svg-577"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,272.22222222222223 L 750,272.22222222222223"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,316.666656)">
+                <g>
                   <path
-                    id="g-svg-581"
+                    id="g-svg-578"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,316.66666666666663 L 750,316.66666666666663"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,361.111115)">
+                <g>
                   <path
-                    id="g-svg-582"
+                    id="g-svg-579"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,361.11111111111114 L 750,361.11111111111114"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,405.555542)">
+                <g>
                   <path
-                    id="g-svg-583"
+                    id="g-svg-580"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,405.55555555555554 L 750,405.55555555555554"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,750,450)">
+                <g>
                   <path
-                    id="g-svg-584"
+                    id="g-svg-581"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 750,450 L 750,450"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-574"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-571" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-585"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-586"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,750,50)">
+          <g id="g-svg-582" fill="none" class="axis-main-group">
+            <g id="g-svg-583" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-587"
+                  id="g-svg-584"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="415"
+                  x1="750"
+                  y1="50"
+                  x2="750"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,415)">
+                <g transform="matrix(0,-0.500000,0.500000,0,750,465)">
                   <path
-                    id="g-svg-589"
+                    id="g-svg-586"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-590"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-587" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-591"
+                id="g-svg-588"
                 fill="none"
                 transform="matrix(1,0,0,1,750,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-601"
+                    id="g-svg-598"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6030,18 +5619,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-592"
+                id="g-svg-589"
                 fill="none"
                 transform="matrix(1,0,0,1,750,94.444443)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-602"
+                    id="g-svg-599"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6050,18 +5639,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-593"
+                id="g-svg-590"
                 fill="none"
                 transform="matrix(1,0,0,1,750,138.888885)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-603"
+                    id="g-svg-600"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6070,18 +5659,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-594"
+                id="g-svg-591"
                 fill="none"
                 transform="matrix(1,0,0,1,750,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-604"
+                    id="g-svg-601"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6090,18 +5679,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-595"
+                id="g-svg-592"
                 fill="none"
                 transform="matrix(1,0,0,1,750,227.777771)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-605"
+                    id="g-svg-602"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6110,18 +5699,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-596"
+                id="g-svg-593"
                 fill="none"
                 transform="matrix(1,0,0,1,750,272.222229)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-606"
+                    id="g-svg-603"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6130,18 +5719,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-597"
+                id="g-svg-594"
                 fill="none"
                 transform="matrix(1,0,0,1,750,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-607"
+                    id="g-svg-604"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6150,18 +5739,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-598"
+                id="g-svg-595"
                 fill="none"
                 transform="matrix(1,0,0,1,750,361.111115)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-608"
+                    id="g-svg-605"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6170,18 +5759,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-599"
+                id="g-svg-596"
                 fill="none"
                 transform="matrix(1,0,0,1,750,405.555542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-609"
+                    id="g-svg-606"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6190,18 +5779,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-600"
+                id="g-svg-597"
                 fill="none"
                 transform="matrix(1,0,0,1,750,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-610"
+                    id="g-svg-607"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -6210,21 +5799,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-611"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-608" fill="none" class="axis-label-group">
               <g
-                id="g-svg-612"
+                id="g-svg-609"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,730,50)"
+                transform="matrix(1,0,0,1,730,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-622"
+                    id="g-svg-619"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6240,14 +5824,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-613"
+                id="g-svg-610"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,730,94.444443)"
+                transform="matrix(1,0,0,1,730,94.444443)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-623"
+                    id="g-svg-620"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6263,14 +5847,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-614"
+                id="g-svg-611"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,730,138.888885)"
+                transform="matrix(1,0,0,1,730,138.888885)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-624"
+                    id="g-svg-621"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6286,14 +5870,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-615"
+                id="g-svg-612"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,730,183.333328)"
+                transform="matrix(1,0,0,1,730,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-625"
+                    id="g-svg-622"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6309,14 +5893,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-616"
+                id="g-svg-613"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,730,227.777771)"
+                transform="matrix(1,0,0,1,730,227.777771)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-626"
+                    id="g-svg-623"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6332,14 +5916,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-617"
+                id="g-svg-614"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,730,272.222229)"
+                transform="matrix(1,0,0,1,730,272.222229)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-627"
+                    id="g-svg-624"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6355,14 +5939,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-618"
+                id="g-svg-615"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,730,316.666656)"
+                transform="matrix(1,0,0,1,730,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-628"
+                    id="g-svg-625"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6378,14 +5962,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-619"
+                id="g-svg-616"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,730,361.111115)"
+                transform="matrix(1,0,0,1,730,361.111115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-629"
+                    id="g-svg-626"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6401,14 +5985,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-620"
+                id="g-svg-617"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,730,405.555542)"
+                transform="matrix(1,0,0,1,730,405.555542)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-630"
+                    id="g-svg-627"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6424,14 +6008,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-621"
+                id="g-svg-618"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,730,450)"
+                transform="matrix(1,0,0,1,730,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-631"
+                    id="g-svg-628"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6449,14 +6033,14 @@
             </g>
           </g>
           <g
-            id="g-svg-632"
+            id="g-svg-629"
             fill="none"
             transform="matrix(1,0,0,1,774.099976,31.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,0,37)">
               <text
-                id="g-svg-633"
+                id="g-svg-630"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -6475,195 +6059,159 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-523" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-634"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-635"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-636"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,800,450)">
+        <g id="g-svg-523" fill="none">
+          <g id="g-svg-631" fill="none" class="axis-grid-group">
+            <g id="g-svg-632" fill="none" class="axis-grid">
+              <g id="g-svg-633" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-638"
+                    id="g-svg-635"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,450 L 800,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,405.555542)">
+                <g>
                   <path
-                    id="g-svg-639"
+                    id="g-svg-636"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,405.55555555555554 L 800,405.55555555555554"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,361.111115)">
+                <g>
                   <path
-                    id="g-svg-640"
+                    id="g-svg-637"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,361.1111111111111 L 800,361.1111111111111"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,316.666656)">
+                <g>
                   <path
-                    id="g-svg-641"
+                    id="g-svg-638"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,316.6666666666667 L 800,316.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,272.222229)">
+                <g>
                   <path
-                    id="g-svg-642"
+                    id="g-svg-639"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,272.22222222222223 L 800,272.22222222222223"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,227.777771)">
+                <g>
                   <path
-                    id="g-svg-643"
+                    id="g-svg-640"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,227.77777777777777 L 800,227.77777777777777"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,183.333328)">
+                <g>
                   <path
-                    id="g-svg-644"
+                    id="g-svg-641"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,183.33333333333337 L 800,183.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,138.888885)">
+                <g>
                   <path
-                    id="g-svg-645"
+                    id="g-svg-642"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,138.88888888888886 L 800,138.88888888888886"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,94.444443)">
+                <g>
                   <path
-                    id="g-svg-646"
+                    id="g-svg-643"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,94.44444444444446 L 800,94.44444444444446"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,800,50)">
+                <g>
                   <path
-                    id="g-svg-647"
+                    id="g-svg-644"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 800,50 L 800,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-637"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-634" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-648"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-649"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,800,50)">
+          <g id="g-svg-645" fill="none" class="axis-main-group">
+            <g id="g-svg-646" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-650"
+                  id="g-svg-647"
                   fill="none"
-                  x1="0"
-                  y1="400"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="800"
+                  y1="450"
+                  x2="800"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,800,35)">
                   <path
-                    id="g-svg-652"
+                    id="g-svg-649"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-653"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-650" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-654"
+                id="g-svg-651"
                 fill="none"
                 transform="matrix(1,0,0,1,800,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-664"
+                    id="g-svg-661"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -6676,14 +6224,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-655"
+                id="g-svg-652"
                 fill="none"
                 transform="matrix(1,0,0,1,800,405.555542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-665"
+                    id="g-svg-662"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -6696,14 +6244,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-656"
+                id="g-svg-653"
                 fill="none"
                 transform="matrix(1,0,0,1,800,361.111115)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-666"
+                    id="g-svg-663"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -6716,14 +6264,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-657"
+                id="g-svg-654"
                 fill="none"
                 transform="matrix(1,0,0,1,800,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-667"
+                    id="g-svg-664"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -6736,14 +6284,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-658"
+                id="g-svg-655"
                 fill="none"
                 transform="matrix(1,0,0,1,800,272.222229)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-668"
+                    id="g-svg-665"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -6756,14 +6304,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-659"
+                id="g-svg-656"
                 fill="none"
                 transform="matrix(1,0,0,1,800,227.777771)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-669"
+                    id="g-svg-666"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -6776,14 +6324,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-660"
+                id="g-svg-657"
                 fill="none"
                 transform="matrix(1,0,0,1,800,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-670"
+                    id="g-svg-667"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -6796,14 +6344,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-661"
+                id="g-svg-658"
                 fill="none"
                 transform="matrix(1,0,0,1,800,138.888885)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-671"
+                    id="g-svg-668"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -6816,14 +6364,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-662"
+                id="g-svg-659"
                 fill="none"
                 transform="matrix(1,0,0,1,800,94.444443)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-672"
+                    id="g-svg-669"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -6836,14 +6384,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-663"
+                id="g-svg-660"
                 fill="none"
                 transform="matrix(1,0,0,1,800,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-673"
+                    id="g-svg-670"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -6856,21 +6404,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-674"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-671" fill="none" class="axis-label-group">
               <g
-                id="g-svg-675"
+                id="g-svg-672"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,820,450)"
+                transform="matrix(1,0,0,1,820,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-685"
+                    id="g-svg-682"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6886,14 +6429,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-676"
+                id="g-svg-673"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,820,405.555542)"
+                transform="matrix(1,0,0,1,820,405.555542)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-686"
+                    id="g-svg-683"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6909,14 +6452,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-677"
+                id="g-svg-674"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,820,361.111115)"
+                transform="matrix(1,0,0,1,820,361.111115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-687"
+                    id="g-svg-684"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6932,14 +6475,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-678"
+                id="g-svg-675"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,820,316.666656)"
+                transform="matrix(1,0,0,1,820,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-688"
+                    id="g-svg-685"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6955,14 +6498,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-679"
+                id="g-svg-676"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,820,272.222229)"
+                transform="matrix(1,0,0,1,820,272.222229)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-689"
+                    id="g-svg-686"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -6978,14 +6521,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-680"
+                id="g-svg-677"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,820,227.777771)"
+                transform="matrix(1,0,0,1,820,227.777771)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-690"
+                    id="g-svg-687"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7001,14 +6544,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-681"
+                id="g-svg-678"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,820,183.333328)"
+                transform="matrix(1,0,0,1,820,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-691"
+                    id="g-svg-688"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7024,14 +6567,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-682"
+                id="g-svg-679"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,820,138.888885)"
+                transform="matrix(1,0,0,1,820,138.888885)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-692"
+                    id="g-svg-689"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7047,14 +6590,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-683"
+                id="g-svg-680"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,820,94.444443)"
+                transform="matrix(1,0,0,1,820,94.444443)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-693"
+                    id="g-svg-690"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7070,14 +6613,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-684"
+                id="g-svg-681"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,820,50)"
+                transform="matrix(1,0,0,1,820,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-694"
+                    id="g-svg-691"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7095,14 +6638,14 @@
             </g>
           </g>
           <g
-            id="g-svg-695"
+            id="g-svg-692"
             fill="none"
             transform="matrix(1,0,0,1,829.099976,240)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-696"
+                id="g-svg-693"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -7121,195 +6664,159 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-524" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-698"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-699"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-700"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,850,450)">
+        <g id="g-svg-524" fill="none">
+          <g id="g-svg-694" fill="none" class="axis-grid-group">
+            <g id="g-svg-695" fill="none" class="axis-grid">
+              <g id="g-svg-696" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-702"
+                    id="g-svg-698"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,450 L 850,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,405.555542)">
+                <g>
                   <path
-                    id="g-svg-703"
+                    id="g-svg-699"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,405.55555555555554 L 850,405.55555555555554"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,361.111115)">
+                <g>
                   <path
-                    id="g-svg-704"
+                    id="g-svg-700"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,361.1111111111111 L 850,361.1111111111111"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,316.666656)">
+                <g>
                   <path
-                    id="g-svg-705"
+                    id="g-svg-701"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,316.6666666666667 L 850,316.6666666666667"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,272.222229)">
+                <g>
                   <path
-                    id="g-svg-706"
+                    id="g-svg-702"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,272.22222222222223 L 850,272.22222222222223"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,227.777771)">
+                <g>
                   <path
-                    id="g-svg-707"
+                    id="g-svg-703"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,227.77777777777777 L 850,227.77777777777777"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,183.333328)">
+                <g>
                   <path
-                    id="g-svg-708"
+                    id="g-svg-704"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,183.33333333333337 L 850,183.33333333333337"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,138.888885)">
+                <g>
                   <path
-                    id="g-svg-709"
+                    id="g-svg-705"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,138.88888888888886 L 850,138.88888888888886"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,94.444443)">
+                <g>
                   <path
-                    id="g-svg-710"
+                    id="g-svg-706"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,94.44444444444446 L 850,94.44444444444446"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,850,50)">
+                <g>
                   <path
-                    id="g-svg-711"
+                    id="g-svg-707"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 850,50 L 850,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-701"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-697" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-712"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-713"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,850,50)">
+          <g id="g-svg-708" fill="none" class="axis-main-group">
+            <g id="g-svg-709" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-714"
+                  id="g-svg-710"
                   fill="none"
-                  x1="0"
-                  y1="400"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="850"
+                  y1="450"
+                  x2="850"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,850,35)">
                   <path
-                    id="g-svg-716"
+                    id="g-svg-712"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-717"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-713" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-718"
+                id="g-svg-714"
                 fill="none"
                 transform="matrix(1,0,0,1,850,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-728"
+                    id="g-svg-724"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -7322,14 +6829,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-719"
+                id="g-svg-715"
                 fill="none"
                 transform="matrix(1,0,0,1,850,405.555542)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-729"
+                    id="g-svg-725"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -7342,14 +6849,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-720"
+                id="g-svg-716"
                 fill="none"
                 transform="matrix(1,0,0,1,850,361.111115)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-730"
+                    id="g-svg-726"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -7362,14 +6869,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-721"
+                id="g-svg-717"
                 fill="none"
                 transform="matrix(1,0,0,1,850,316.666656)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-731"
+                    id="g-svg-727"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -7382,14 +6889,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-722"
+                id="g-svg-718"
                 fill="none"
                 transform="matrix(1,0,0,1,850,272.222229)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-732"
+                    id="g-svg-728"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -7402,14 +6909,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-723"
+                id="g-svg-719"
                 fill="none"
                 transform="matrix(1,0,0,1,850,227.777771)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-733"
+                    id="g-svg-729"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -7422,14 +6929,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-724"
+                id="g-svg-720"
                 fill="none"
                 transform="matrix(1,0,0,1,850,183.333328)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-734"
+                    id="g-svg-730"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -7442,14 +6949,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-725"
+                id="g-svg-721"
                 fill="none"
                 transform="matrix(1,0,0,1,850,138.888885)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-735"
+                    id="g-svg-731"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -7462,14 +6969,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-726"
+                id="g-svg-722"
                 fill="none"
                 transform="matrix(1,0,0,1,850,94.444443)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-736"
+                    id="g-svg-732"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -7482,14 +6989,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-727"
+                id="g-svg-723"
                 fill="none"
                 transform="matrix(1,0,0,1,850,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-737"
+                    id="g-svg-733"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -7502,21 +7009,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-738"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-734" fill="none" class="axis-label-group">
               <g
-                id="g-svg-739"
+                id="g-svg-735"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,870,450)"
+                transform="matrix(1,0,0,1,870,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-749"
+                    id="g-svg-745"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7532,14 +7034,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-740"
+                id="g-svg-736"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,870,405.555542)"
+                transform="matrix(1,0,0,1,870,405.555542)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-750"
+                    id="g-svg-746"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7555,14 +7057,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-741"
+                id="g-svg-737"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,870,361.111115)"
+                transform="matrix(1,0,0,1,870,361.111115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-751"
+                    id="g-svg-747"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7578,14 +7080,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-742"
+                id="g-svg-738"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,870,316.666656)"
+                transform="matrix(1,0,0,1,870,316.666656)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-752"
+                    id="g-svg-748"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7601,14 +7103,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-743"
+                id="g-svg-739"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,870,272.222229)"
+                transform="matrix(1,0,0,1,870,272.222229)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-753"
+                    id="g-svg-749"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7624,14 +7126,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-744"
+                id="g-svg-740"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,870,227.777771)"
+                transform="matrix(1,0,0,1,870,227.777771)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-754"
+                    id="g-svg-750"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7647,14 +7149,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-745"
+                id="g-svg-741"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,870,183.333328)"
+                transform="matrix(1,0,0,1,870,183.333328)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-755"
+                    id="g-svg-751"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7670,14 +7172,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-746"
+                id="g-svg-742"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,870,138.888885)"
+                transform="matrix(1,0,0,1,870,138.888885)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-756"
+                    id="g-svg-752"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7693,14 +7195,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-747"
+                id="g-svg-743"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,870,94.444443)"
+                transform="matrix(1,0,0,1,870,94.444443)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-757"
+                    id="g-svg-753"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7716,14 +7218,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-748"
+                id="g-svg-744"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,870,50)"
+                transform="matrix(1,0,0,1,870,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-758"
+                    id="g-svg-754"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -7741,14 +7243,14 @@
             </g>
           </g>
           <g
-            id="g-svg-759"
+            id="g-svg-755"
             fill="none"
-            transform="matrix(1,0,0,1,879.099976,487)"
+            transform="matrix(1,0,0,1,879.099976,468.500000)"
             class="axis-title-group"
           >
             <g transform="matrix(1,0,0,1,0,-37)">
               <text
-                id="g-svg-760"
+                id="g-svg-756"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -7767,200 +7269,164 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-528" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-761"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-762"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-763"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,500,500)">
+        <g id="g-svg-528" fill="none">
+          <g id="g-svg-757" fill="none" class="axis-grid-group">
+            <g id="g-svg-758" fill="none" class="axis-grid">
+              <g id="g-svg-759" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-765"
+                    id="g-svg-761"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,500 L 500,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,500)">
+                <g>
                   <path
-                    id="g-svg-766"
+                    id="g-svg-762"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 450,500 L 450,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,500)">
+                <g>
                   <path
-                    id="g-svg-767"
+                    id="g-svg-763"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,500 L 400,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,500)">
+                <g>
                   <path
-                    id="g-svg-768"
+                    id="g-svg-764"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,500 L 350,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,500)">
+                <g>
                   <path
-                    id="g-svg-769"
+                    id="g-svg-765"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,500 L 300,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,500)">
+                <g>
                   <path
-                    id="g-svg-770"
+                    id="g-svg-766"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,500 L 250,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,500)">
+                <g>
                   <path
-                    id="g-svg-771"
+                    id="g-svg-767"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,500 L 200,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,500)">
+                <g>
                   <path
-                    id="g-svg-772"
+                    id="g-svg-768"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,500 L 150,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,500)">
+                <g>
                   <path
-                    id="g-svg-773"
+                    id="g-svg-769"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,500 L 100,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,500)">
+                <g>
                   <path
-                    id="g-svg-774"
+                    id="g-svg-770"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,500 L 50,500"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-764"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-760" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-775"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-776"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,500)">
+          <g id="g-svg-771" fill="none" class="axis-main-group">
+            <g id="g-svg-772" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-777"
+                  id="g-svg-773"
                   fill="none"
-                  x1="450"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="500"
+                  y1="500"
+                  x2="35"
+                  y2="500"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,35,500)">
                   <path
-                    id="g-svg-779"
+                    id="g-svg-775"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-780"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-776" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-781"
+                id="g-svg-777"
                 fill="none"
                 transform="matrix(1,0,0,1,500,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-791"
+                    id="g-svg-787"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7968,19 +7434,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-782"
+                id="g-svg-778"
                 fill="none"
                 transform="matrix(1,0,0,1,450,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-792"
+                    id="g-svg-788"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -7988,19 +7454,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-783"
+                id="g-svg-779"
                 fill="none"
                 transform="matrix(1,0,0,1,400,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-793"
+                    id="g-svg-789"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8008,19 +7474,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-784"
+                id="g-svg-780"
                 fill="none"
                 transform="matrix(1,0,0,1,350,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-794"
+                    id="g-svg-790"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8028,19 +7494,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-785"
+                id="g-svg-781"
                 fill="none"
                 transform="matrix(1,0,0,1,300,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-795"
+                    id="g-svg-791"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8048,19 +7514,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-786"
+                id="g-svg-782"
                 fill="none"
                 transform="matrix(1,0,0,1,250,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-796"
+                    id="g-svg-792"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8068,19 +7534,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-787"
+                id="g-svg-783"
                 fill="none"
                 transform="matrix(1,0,0,1,200,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-797"
+                    id="g-svg-793"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8088,19 +7554,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-788"
+                id="g-svg-784"
                 fill="none"
                 transform="matrix(1,0,0,1,150,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-798"
+                    id="g-svg-794"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8108,19 +7574,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-789"
+                id="g-svg-785"
                 fill="none"
                 transform="matrix(1,0,0,1,100,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-799"
+                    id="g-svg-795"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8128,19 +7594,19 @@
                 </g>
               </g>
               <g
-                id="g-svg-790"
+                id="g-svg-786"
                 fill="none"
                 transform="matrix(1,0,0,1,50,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,-10)">
+                <g>
                   <line
-                    id="g-svg-800"
+                    id="g-svg-796"
                     fill="none"
                     x1="0"
-                    y1="10"
+                    y1="0"
                     x2="0"
-                    y2="0"
+                    y2="-10"
                     class="axis-tick-item"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
@@ -8148,21 +7614,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-801"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-797" fill="none" class="axis-label-group">
               <g
-                id="g-svg-802"
+                id="g-svg-798"
                 fill="none"
                 transform="matrix(1,0,0,1,500,480)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-812"
+                    id="g-svg-808"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -8178,14 +7639,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-803"
+                id="g-svg-799"
                 fill="none"
                 transform="matrix(1,0,0,1,450,480)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-813"
+                    id="g-svg-809"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -8201,14 +7662,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-804"
+                id="g-svg-800"
                 fill="none"
                 transform="matrix(1,0,0,1,400,480)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-814"
+                    id="g-svg-810"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -8224,14 +7685,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-805"
+                id="g-svg-801"
                 fill="none"
                 transform="matrix(1,0,0,1,350,480)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-815"
+                    id="g-svg-811"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -8247,14 +7708,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-806"
+                id="g-svg-802"
                 fill="none"
                 transform="matrix(1,0,0,1,300,480)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-816"
+                    id="g-svg-812"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -8270,14 +7731,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-807"
+                id="g-svg-803"
                 fill="none"
                 transform="matrix(1,0,0,1,250,480)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-817"
+                    id="g-svg-813"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -8293,14 +7754,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-808"
+                id="g-svg-804"
                 fill="none"
                 transform="matrix(1,0,0,1,200,480)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-818"
+                    id="g-svg-814"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -8316,14 +7777,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-809"
+                id="g-svg-805"
                 fill="none"
                 transform="matrix(1,0,0,1,150,480)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-819"
+                    id="g-svg-815"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -8339,14 +7800,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-810"
+                id="g-svg-806"
                 fill="none"
                 transform="matrix(1,0,0,1,100,480)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-820"
+                    id="g-svg-816"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -8362,14 +7823,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-811"
+                id="g-svg-807"
                 fill="none"
                 transform="matrix(1,0,0,1,50,480)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-821"
+                    id="g-svg-817"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -8387,9 +7848,9 @@
             </g>
           </g>
           <g
-            id="g-svg-822"
+            id="g-svg-818"
             fill="none"
-            transform="matrix(1,0,0,1,-123.400002,471.500000)"
+            transform="matrix(1,0,0,1,-46.700001,471.500000)"
             class="axis-title-group"
           >
             <g
@@ -8398,7 +7859,7 @@
               transform="matrix(1,0,0,1,76.699997,-18.500000)"
               class="axis-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <image
                   id="g-svg-526"
                   fill="none"
@@ -8410,12 +7871,14 @@
                   width="30"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,80,15)">
+              <g>
                 <text
                   id="g-svg-527"
                   fill="rgba(0,0,0,1)"
                   dominant-baseline="central"
                   paint-order="stroke"
+                  x="80"
+                  y="15"
                   dx="0.5"
                   font-family="sans-serif"
                   font-size="20"
diff --git a/__tests__/integration/snapshots/AxisLinearTitleEnd.svg b/__tests__/integration/snapshots/AxisLinearTitleEnd.svg
index b4195f30c..577fa8fc1 100644
--- a/__tests__/integration/snapshots/AxisLinearTitleEnd.svg
+++ b/__tests__/integration/snapshots/AxisLinearTitleEnd.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-349"
-        fill="none"
-        width="400"
-        height="400"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-350" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-337" fill="none" width="400" height="400">
+        <g id="g-svg-338" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,225,200)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 225,200 L 225,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,200)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,200 L 250,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,275,200)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 275,200 L 275,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,200)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,73 +65,47 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,200 L 300,200"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,200)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="115"
-                  y2="-1.83697019872103e-15"
+                  x1="200"
+                  y1="200"
+                  x2="315"
+                  y2="200"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,115,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,315,200)">
                   <path
                     id="g-svg-14"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-15"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-16"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-15" fill="none" class="axis-tick-group" />
+            <g id="g-svg-16" fill="none" class="axis-label-group">
               <g
                 id="g-svg-17"
                 fill="none"
                 transform="matrix(1,0,0,1,200,210)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -175,7 +128,7 @@
                 transform="matrix(1,0,0,1,225,210)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -198,7 +151,7 @@
                 transform="matrix(1,0,0,1,250,210)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -221,7 +174,7 @@
                 transform="matrix(1,0,0,1,275,210)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-25"
                     fill="rgba(0,0,0,1)"
@@ -244,7 +197,7 @@
                 transform="matrix(1,0,0,1,300,210)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-26"
                     fill="rgba(0,0,0,1)"
@@ -269,7 +222,7 @@
             transform="matrix(1,0,0,1,340,200)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-28"
                 fill="rgba(255,0,0,1)"
@@ -290,146 +243,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-351" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-30"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-31"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-32"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+        <g id="g-svg-339" fill="none">
+          <g id="g-svg-29" fill="none" class="axis-grid-group">
+            <g id="g-svg-30" fill="none" class="axis-grid">
+              <g id="g-svg-31" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-34"
+                    id="g-svg-33"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,221.650635,212.500000)">
+                <g>
                   <path
-                    id="g-svg-35"
+                    id="g-svg-34"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 221.65063509461098,212.5 L 221.65063509461098,212.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,243.301270,225)">
+                <g>
                   <path
-                    id="g-svg-36"
+                    id="g-svg-35"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 243.30127018922195,225 L 243.30127018922195,225"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,264.951904,237.500000)">
+                <g>
                   <path
-                    id="g-svg-37"
+                    id="g-svg-36"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 264.95190528383296,237.5 L 264.95190528383296,237.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,286.602539,250)">
+                <g>
                   <path
-                    id="g-svg-38"
+                    id="g-svg-37"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 286.6025403784439,250 L 286.6025403784439,250"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-33"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-32" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-39"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-40"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,200)">
+          <g id="g-svg-38" fill="none" class="axis-main-group">
+            <g id="g-svg-39" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-41"
+                  id="g-svg-40"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="99.59292143521049"
-                  y2="57.5"
+                  x1="200"
+                  y1="200"
+                  x2="299.5929214352105"
+                  y2="257.5"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.433013,-0.250000,0.250000,-0.433013,99.592918,57.500000)">
+                <g transform="matrix(-0.433013,-0.250000,0.250000,-0.433013,299.592926,257.500000)">
                   <path
-                    id="g-svg-43"
+                    id="g-svg-42"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-44"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-45"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-43" fill="none" class="axis-tick-group" />
+            <g id="g-svg-44" fill="none" class="axis-label-group">
               <g
-                id="g-svg-46"
+                id="g-svg-45"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,195,208.660248)"
+                transform="matrix(1,0,0,1,195,208.660248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-51"
+                    id="g-svg-50"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -445,14 +357,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-47"
+                id="g-svg-46"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,216.650635,221.160248)"
+                transform="matrix(1,0,0,1,216.650635,221.160248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-52"
+                    id="g-svg-51"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -468,14 +380,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-48"
+                id="g-svg-47"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,238.301270,233.660248)"
+                transform="matrix(1,0,0,1,238.301270,233.660248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-53"
+                    id="g-svg-52"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -491,14 +403,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-49"
+                id="g-svg-48"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,259.951904,246.160248)"
+                transform="matrix(1,0,0,1,259.951904,246.160248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-54"
+                    id="g-svg-53"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -514,14 +426,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-50"
+                id="g-svg-49"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,281.602539,258.660248)"
+                transform="matrix(1,0,0,1,281.602539,258.660248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-55"
+                    id="g-svg-54"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -539,14 +451,14 @@
             </g>
           </g>
           <g
-            id="g-svg-56"
+            id="g-svg-55"
             fill="none"
             transform="matrix(1,0,0,1,321.243561,270)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-57"
+                id="g-svg-56"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -565,146 +477,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-352" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-59"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-60"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-61"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+        <g id="g-svg-340" fill="none">
+          <g id="g-svg-57" fill="none" class="axis-grid-group">
+            <g id="g-svg-58" fill="none" class="axis-grid">
+              <g id="g-svg-59" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-63"
+                    id="g-svg-61"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,212.500000,221.650635)">
+                <g>
                   <path
-                    id="g-svg-64"
+                    id="g-svg-62"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 212.5,221.65063509461095 L 212.5,221.65063509461095"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,225,243.301270)">
+                <g>
                   <path
-                    id="g-svg-65"
+                    id="g-svg-63"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 225,243.30127018922192 L 225,243.30127018922192"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,264.951904)">
+                <g>
                   <path
-                    id="g-svg-66"
+                    id="g-svg-64"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.5,264.9519052838329 L 237.5,264.9519052838329"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,286.602539)">
+                <g>
                   <path
-                    id="g-svg-67"
+                    id="g-svg-65"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,286.60254037844385 L 250,286.60254037844385"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-62"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-60" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-68"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-69"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,200)">
+          <g id="g-svg-66" fill="none" class="axis-main-group">
+            <g id="g-svg-67" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-70"
+                  id="g-svg-68"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="57.5"
-                  y2="99.59292143521043"
+                  x1="200"
+                  y1="200"
+                  x2="257.5"
+                  y2="299.5929214352104"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.250000,-0.433013,0.433013,-0.250000,57.500000,99.592918)">
+                <g transform="matrix(-0.250000,-0.433013,0.433013,-0.250000,257.500000,299.592926)">
                   <path
-                    id="g-svg-72"
+                    id="g-svg-70"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-73"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-74"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-tick-group" />
+            <g id="g-svg-72" fill="none" class="axis-label-group">
               <g
-                id="g-svg-75"
+                id="g-svg-73"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,191.339752,205)"
+                transform="matrix(1,0,0,1,191.339752,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-80"
+                    id="g-svg-78"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -720,14 +591,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-76"
+                id="g-svg-74"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,203.839752,226.650635)"
+                transform="matrix(1,0,0,1,203.839752,226.650635)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-81"
+                    id="g-svg-79"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -743,14 +614,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-77"
+                id="g-svg-75"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,216.339752,248.301270)"
+                transform="matrix(1,0,0,1,216.339752,248.301270)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-82"
+                    id="g-svg-80"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -766,14 +637,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-78"
+                id="g-svg-76"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,228.839752,269.951904)"
+                transform="matrix(1,0,0,1,228.839752,269.951904)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-83"
+                    id="g-svg-81"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -789,14 +660,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-79"
+                id="g-svg-77"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,241.339752,291.602539)"
+                transform="matrix(1,0,0,1,241.339752,291.602539)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-84"
+                    id="g-svg-82"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -814,14 +685,14 @@
             </g>
           </g>
           <g
-            id="g-svg-85"
+            id="g-svg-83"
             fill="none"
             transform="matrix(1,0,0,1,270,321.243561)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-86"
+                id="g-svg-84"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -840,146 +711,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-353" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-88"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-89"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-90"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+        <g id="g-svg-341" fill="none">
+          <g id="g-svg-85" fill="none" class="axis-grid-group">
+            <g id="g-svg-86" fill="none" class="axis-grid">
+              <g id="g-svg-87" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-92"
+                    id="g-svg-89"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,225)">
+                <g>
                   <path
-                    id="g-svg-93"
+                    id="g-svg-90"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,225 L 200,225"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,250)">
+                <g>
                   <path
-                    id="g-svg-94"
+                    id="g-svg-91"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,250 L 200,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,275)">
+                <g>
                   <path
-                    id="g-svg-95"
+                    id="g-svg-92"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,275 L 200,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,300)">
+                <g>
                   <path
-                    id="g-svg-96"
+                    id="g-svg-93"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,300 L 200,300"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-91"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-88" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-97"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-98"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,200)">
+          <g id="g-svg-94" fill="none" class="axis-main-group">
+            <g id="g-svg-95" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-99"
+                  id="g-svg-96"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="115"
+                  x1="200"
+                  y1="200"
+                  x2="200"
+                  y2="315"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,115)">
+                <g transform="matrix(0,-0.500000,0.500000,0,200,315)">
                   <path
-                    id="g-svg-101"
+                    id="g-svg-98"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-102"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-103"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-99" fill="none" class="axis-tick-group" />
+            <g id="g-svg-100" fill="none" class="axis-label-group">
               <g
-                id="g-svg-104"
+                id="g-svg-101"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,190,200)"
+                transform="matrix(1,0,0,1,190,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-109"
+                    id="g-svg-106"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -995,14 +825,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-105"
+                id="g-svg-102"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,190,225)"
+                transform="matrix(1,0,0,1,190,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-110"
+                    id="g-svg-107"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1018,14 +848,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-106"
+                id="g-svg-103"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,190,250)"
+                transform="matrix(1,0,0,1,190,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-111"
+                    id="g-svg-108"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1041,14 +871,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-107"
+                id="g-svg-104"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,190,275)"
+                transform="matrix(1,0,0,1,190,275)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-112"
+                    id="g-svg-109"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1064,14 +894,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-108"
+                id="g-svg-105"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,190,300)"
+                transform="matrix(1,0,0,1,190,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-113"
+                    id="g-svg-110"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1089,14 +919,14 @@
             </g>
           </g>
           <g
-            id="g-svg-114"
+            id="g-svg-111"
             fill="none"
             transform="matrix(1,0,0,1,200,340)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-115"
+                id="g-svg-112"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1115,146 +945,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-354" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-117"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-118"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-119"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+        <g id="g-svg-342" fill="none">
+          <g id="g-svg-113" fill="none" class="axis-grid-group">
+            <g id="g-svg-114" fill="none" class="axis-grid">
+              <g id="g-svg-115" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-121"
+                    id="g-svg-117"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,187.500000,221.650635)">
+                <g>
                   <path
-                    id="g-svg-122"
+                    id="g-svg-118"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 187.5,221.65063509461098 L 187.5,221.65063509461098"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,175,243.301270)">
+                <g>
                   <path
-                    id="g-svg-123"
+                    id="g-svg-119"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 175,243.30127018922195 L 175,243.30127018922195"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,264.951904)">
+                <g>
                   <path
-                    id="g-svg-124"
+                    id="g-svg-120"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.50000000000003,264.95190528383296 L 162.50000000000003,264.95190528383296"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,286.602539)">
+                <g>
                   <path
-                    id="g-svg-125"
+                    id="g-svg-121"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150.00000000000003,286.6025403784439 L 150.00000000000003,286.6025403784439"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-120"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-116" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-126"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-127"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,150,200)">
+          <g id="g-svg-122" fill="none" class="axis-main-group">
+            <g id="g-svg-123" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-128"
+                  id="g-svg-124"
                   fill="none"
-                  x1="49.99999999999997"
-                  y1="0"
-                  x2="-7.499999999999993"
-                  y2="99.59292143521049"
+                  x1="200"
+                  y1="200"
+                  x2="142.50000000000003"
+                  y2="299.5929214352105"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.250000,-0.433013,0.433013,0.250000,-7.500000,99.592918)">
+                <g transform="matrix(0.250000,-0.433013,0.433013,0.250000,142.500000,299.592926)">
                   <path
-                    id="g-svg-130"
+                    id="g-svg-126"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-131"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-132"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-127" fill="none" class="axis-tick-group" />
+            <g id="g-svg-128" fill="none" class="axis-label-group">
               <g
-                id="g-svg-133"
+                id="g-svg-129"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,191.339752,195)"
+                transform="matrix(1,0,0,1,191.339752,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-138"
+                    id="g-svg-134"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1270,14 +1059,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-134"
+                id="g-svg-130"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,178.839752,216.650635)"
+                transform="matrix(1,0,0,1,178.839752,216.650635)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-139"
+                    id="g-svg-135"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1293,14 +1082,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-135"
+                id="g-svg-131"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,166.339752,238.301270)"
+                transform="matrix(1,0,0,1,166.339752,238.301270)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-140"
+                    id="g-svg-136"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1316,14 +1105,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-136"
+                id="g-svg-132"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,153.839752,259.951904)"
+                transform="matrix(1,0,0,1,153.839752,259.951904)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-141"
+                    id="g-svg-137"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1339,14 +1128,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-137"
+                id="g-svg-133"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,141.339752,281.602539)"
+                transform="matrix(1,0,0,1,141.339752,281.602539)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-142"
+                    id="g-svg-138"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1364,14 +1153,14 @@
             </g>
           </g>
           <g
-            id="g-svg-143"
+            id="g-svg-139"
             fill="none"
             transform="matrix(1,0,0,1,130,321.243561)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-144"
+                id="g-svg-140"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1390,146 +1179,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-355" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-146"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-147"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-148"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+        <g id="g-svg-343" fill="none">
+          <g id="g-svg-141" fill="none" class="axis-grid-group">
+            <g id="g-svg-142" fill="none" class="axis-grid">
+              <g id="g-svg-143" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-150"
+                    id="g-svg-145"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,178.349365,212.500000)">
+                <g>
                   <path
-                    id="g-svg-151"
+                    id="g-svg-146"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 178.34936490538902,212.5 L 178.34936490538902,212.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,156.698730,225)">
+                <g>
                   <path
-                    id="g-svg-152"
+                    id="g-svg-147"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 156.69872981077805,225 L 156.69872981077805,225"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,135.048096,237.500000)">
+                <g>
                   <path
-                    id="g-svg-153"
+                    id="g-svg-148"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 135.0480947161671,237.5 L 135.0480947161671,237.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,113.397461,250)">
+                <g>
                   <path
-                    id="g-svg-154"
+                    id="g-svg-149"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 113.39745962155612,250 L 113.39745962155612,250"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-149"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-144" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-155"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-156"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,113.397461,200)">
+          <g id="g-svg-150" fill="none" class="axis-main-group">
+            <g id="g-svg-151" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-157"
+                  id="g-svg-152"
                   fill="none"
-                  x1="86.60254037844388"
-                  y1="0"
-                  x2="-12.99038105676658"
-                  y2="57.5"
+                  x1="200"
+                  y1="200"
+                  x2="100.40707856478954"
+                  y2="257.5"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.433013,-0.250000,0.250000,0.433013,-12.990381,57.500000)">
+                <g transform="matrix(0.433013,-0.250000,0.250000,0.433013,100.407082,257.500000)">
                   <path
-                    id="g-svg-159"
+                    id="g-svg-154"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-160"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-161"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-155" fill="none" class="axis-tick-group" />
+            <g id="g-svg-156" fill="none" class="axis-label-group">
               <g
-                id="g-svg-162"
+                id="g-svg-157"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,195,191.339752)"
+                transform="matrix(1,0,0,1,195,191.339752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-167"
+                    id="g-svg-162"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1545,14 +1293,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-163"
+                id="g-svg-158"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,173.349365,203.839752)"
+                transform="matrix(1,0,0,1,173.349365,203.839752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-168"
+                    id="g-svg-163"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1568,14 +1316,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-164"
+                id="g-svg-159"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,151.698730,216.339752)"
+                transform="matrix(1,0,0,1,151.698730,216.339752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-169"
+                    id="g-svg-164"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1591,14 +1339,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-165"
+                id="g-svg-160"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,130.048096,228.839752)"
+                transform="matrix(1,0,0,1,130.048096,228.839752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-170"
+                    id="g-svg-165"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1614,14 +1362,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-166"
+                id="g-svg-161"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,108.397461,241.339752)"
+                transform="matrix(1,0,0,1,108.397461,241.339752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-171"
+                    id="g-svg-166"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1639,14 +1387,14 @@
             </g>
           </g>
           <g
-            id="g-svg-172"
+            id="g-svg-167"
             fill="none"
             transform="matrix(1,0,0,1,78.756447,270)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-173"
+                id="g-svg-168"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1665,146 +1413,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-356" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-175"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-176"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-177"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+        <g id="g-svg-344" fill="none">
+          <g id="g-svg-169" fill="none" class="axis-grid-group">
+            <g id="g-svg-170" fill="none" class="axis-grid">
+              <g id="g-svg-171" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-179"
+                    id="g-svg-173"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,175,200)">
+                <g>
                   <path
-                    id="g-svg-180"
+                    id="g-svg-174"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 175,200 L 175,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,200)">
+                <g>
                   <path
-                    id="g-svg-181"
+                    id="g-svg-175"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,200 L 150,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,200)">
+                <g>
                   <path
-                    id="g-svg-182"
+                    id="g-svg-176"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,200 L 125,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,200)">
+                <g>
                   <path
-                    id="g-svg-183"
+                    id="g-svg-177"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,200 L 100,200"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-178"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-172" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-184"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-185"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,100,200)">
+          <g id="g-svg-178" fill="none" class="axis-main-group">
+            <g id="g-svg-179" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-186"
+                  id="g-svg-180"
                   fill="none"
-                  x1="100"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="200"
+                  y1="200"
+                  x2="85"
+                  y2="200"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,85,200)">
                   <path
-                    id="g-svg-188"
+                    id="g-svg-182"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-189"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-190"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-183" fill="none" class="axis-tick-group" />
+            <g id="g-svg-184" fill="none" class="axis-label-group">
               <g
-                id="g-svg-191"
+                id="g-svg-185"
                 fill="none"
                 transform="matrix(1,0,0,1,200,190)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-196"
+                    id="g-svg-190"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -1820,14 +1527,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-192"
+                id="g-svg-186"
                 fill="none"
                 transform="matrix(1,0,0,1,175,190)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-197"
+                    id="g-svg-191"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -1843,14 +1550,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-193"
+                id="g-svg-187"
                 fill="none"
                 transform="matrix(1,0,0,1,150,190)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-198"
+                    id="g-svg-192"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -1866,14 +1573,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-194"
+                id="g-svg-188"
                 fill="none"
                 transform="matrix(1,0,0,1,125,190)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-199"
+                    id="g-svg-193"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -1889,14 +1596,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-195"
+                id="g-svg-189"
                 fill="none"
                 transform="matrix(1,0,0,1,100,190)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-200"
+                    id="g-svg-194"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="text-after-edge"
                     paint-order="stroke"
@@ -1914,14 +1621,14 @@
             </g>
           </g>
           <g
-            id="g-svg-201"
+            id="g-svg-195"
             fill="none"
             transform="matrix(1,0,0,1,60,200)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-202"
+                id="g-svg-196"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1940,146 +1647,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-357" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-204"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-205"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-206"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+        <g id="g-svg-345" fill="none">
+          <g id="g-svg-197" fill="none" class="axis-grid-group">
+            <g id="g-svg-198" fill="none" class="axis-grid">
+              <g id="g-svg-199" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-208"
+                    id="g-svg-201"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,178.349365,187.500000)">
+                <g>
                   <path
-                    id="g-svg-209"
+                    id="g-svg-202"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 178.34936490538902,187.5 L 178.34936490538902,187.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,156.698730,175)">
+                <g>
                   <path
-                    id="g-svg-210"
+                    id="g-svg-203"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 156.69872981077805,175 L 156.69872981077805,175"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,135.048096,162.500000)">
+                <g>
                   <path
-                    id="g-svg-211"
+                    id="g-svg-204"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 135.0480947161671,162.50000000000003 L 135.0480947161671,162.50000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,113.397461,150)">
+                <g>
                   <path
-                    id="g-svg-212"
+                    id="g-svg-205"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 113.39745962155612,150.00000000000003 L 113.39745962155612,150.00000000000003"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-207"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-200" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-213"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-214"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,113.397461,150)">
+          <g id="g-svg-206" fill="none" class="axis-main-group">
+            <g id="g-svg-207" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-215"
+                  id="g-svg-208"
                   fill="none"
-                  x1="86.60254037844388"
-                  y1="49.99999999999997"
-                  x2="-12.990381056766582"
-                  y2="-7.4999999999999964"
+                  x1="200"
+                  y1="200"
+                  x2="100.40707856478954"
+                  y2="142.50000000000003"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.433013,0.250000,-0.250000,0.433013,-12.990381,-7.500000)">
+                <g transform="matrix(0.433013,0.250000,-0.250000,0.433013,100.407082,142.500000)">
                   <path
-                    id="g-svg-217"
+                    id="g-svg-210"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-218"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-219"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-211" fill="none" class="axis-tick-group" />
+            <g id="g-svg-212" fill="none" class="axis-label-group">
               <g
-                id="g-svg-220"
+                id="g-svg-213"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,205,191.339752)"
+                transform="matrix(1,0,0,1,205,191.339752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-225"
+                    id="g-svg-218"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2095,14 +1761,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-221"
+                id="g-svg-214"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,183.349365,178.839752)"
+                transform="matrix(1,0,0,1,183.349365,178.839752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-226"
+                    id="g-svg-219"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2118,14 +1784,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-222"
+                id="g-svg-215"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,161.698730,166.339752)"
+                transform="matrix(1,0,0,1,161.698730,166.339752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-227"
+                    id="g-svg-220"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2141,14 +1807,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-223"
+                id="g-svg-216"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,140.048096,153.839752)"
+                transform="matrix(1,0,0,1,140.048096,153.839752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-228"
+                    id="g-svg-221"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2164,14 +1830,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-224"
+                id="g-svg-217"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,118.397461,141.339752)"
+                transform="matrix(1,0,0,1,118.397461,141.339752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-229"
+                    id="g-svg-222"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2189,14 +1855,14 @@
             </g>
           </g>
           <g
-            id="g-svg-230"
+            id="g-svg-223"
             fill="none"
             transform="matrix(1,0,0,1,78.756447,130)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-231"
+                id="g-svg-224"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -2215,146 +1881,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-358" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-233"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-234"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-235"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+        <g id="g-svg-346" fill="none">
+          <g id="g-svg-225" fill="none" class="axis-grid-group">
+            <g id="g-svg-226" fill="none" class="axis-grid">
+              <g id="g-svg-227" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-237"
+                    id="g-svg-229"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,187.500000,178.349365)">
+                <g>
                   <path
-                    id="g-svg-238"
+                    id="g-svg-230"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 187.5,178.34936490538905 L 187.5,178.34936490538905"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,175,156.698730)">
+                <g>
                   <path
-                    id="g-svg-239"
+                    id="g-svg-231"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 174.99999999999997,156.69872981077808 L 174.99999999999997,156.69872981077808"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,135.048096)">
+                <g>
                   <path
-                    id="g-svg-240"
+                    id="g-svg-232"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.49999999999994,135.0480947161671 L 162.49999999999994,135.0480947161671"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,113.397461)">
+                <g>
                   <path
-                    id="g-svg-241"
+                    id="g-svg-233"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 149.99999999999994,113.39745962155615 L 149.99999999999994,113.39745962155615"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-236"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-228" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-242"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-243"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,150,113.397461)">
+          <g id="g-svg-234" fill="none" class="axis-main-group">
+            <g id="g-svg-235" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-244"
+                  id="g-svg-236"
                   fill="none"
-                  x1="50.00000000000006"
-                  y1="86.60254037844385"
-                  x2="-7.500000000000007"
-                  y2="-12.990381056766577"
+                  x1="200"
+                  y1="200"
+                  x2="142.49999999999994"
+                  y2="100.40707856478957"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.250000,0.433013,-0.433013,0.250000,-7.500000,-12.990381)">
+                <g transform="matrix(0.250000,0.433013,-0.433013,0.250000,142.500000,100.407082)">
                   <path
-                    id="g-svg-246"
+                    id="g-svg-238"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-247"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-248"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-239" fill="none" class="axis-tick-group" />
+            <g id="g-svg-240" fill="none" class="axis-label-group">
               <g
-                id="g-svg-249"
+                id="g-svg-241"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,208.660248,195)"
+                transform="matrix(1,0,0,1,208.660248,195)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-254"
+                    id="g-svg-246"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2370,14 +1995,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-250"
+                id="g-svg-242"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,196.160248,173.349365)"
+                transform="matrix(1,0,0,1,196.160248,173.349365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-255"
+                    id="g-svg-247"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2393,14 +2018,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-251"
+                id="g-svg-243"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,183.660248,151.698730)"
+                transform="matrix(1,0,0,1,183.660248,151.698730)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-256"
+                    id="g-svg-248"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2416,14 +2041,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-252"
+                id="g-svg-244"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,171.160248,130.048096)"
+                transform="matrix(1,0,0,1,171.160248,130.048096)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-257"
+                    id="g-svg-249"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2439,14 +2064,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-253"
+                id="g-svg-245"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,158.660248,108.397461)"
+                transform="matrix(1,0,0,1,158.660248,108.397461)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-258"
+                    id="g-svg-250"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2464,14 +2089,14 @@
             </g>
           </g>
           <g
-            id="g-svg-259"
+            id="g-svg-251"
             fill="none"
             transform="matrix(1,0,0,1,130,78.756447)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-260"
+                id="g-svg-252"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -2490,146 +2115,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-359" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-262"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-263"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-264"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+        <g id="g-svg-347" fill="none">
+          <g id="g-svg-253" fill="none" class="axis-grid-group">
+            <g id="g-svg-254" fill="none" class="axis-grid">
+              <g id="g-svg-255" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-266"
+                    id="g-svg-257"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,175)">
+                <g>
                   <path
-                    id="g-svg-267"
+                    id="g-svg-258"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,175 L 200,175"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,150)">
+                <g>
                   <path
-                    id="g-svg-268"
+                    id="g-svg-259"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,150 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,125)">
+                <g>
                   <path
-                    id="g-svg-269"
+                    id="g-svg-260"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 199.99999999999997,125 L 199.99999999999997,125"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,100)">
+                <g>
                   <path
-                    id="g-svg-270"
+                    id="g-svg-261"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 199.99999999999997,100 L 199.99999999999997,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-265"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-256" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-271"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-272"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,100)">
+          <g id="g-svg-262" fill="none" class="axis-main-group">
+            <g id="g-svg-263" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-273"
+                  id="g-svg-264"
                   fill="none"
-                  x1="2.842170943040401e-14"
-                  y1="100"
-                  x2="-4.249154173235985e-15"
-                  y2="-15"
+                  x1="200"
+                  y1="200"
+                  x2="199.99999999999997"
+                  y2="85"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,200,85)">
                   <path
-                    id="g-svg-275"
+                    id="g-svg-266"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-276"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-277"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-267" fill="none" class="axis-tick-group" />
+            <g id="g-svg-268" fill="none" class="axis-label-group">
               <g
-                id="g-svg-278"
+                id="g-svg-269"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,210,200)"
+                transform="matrix(1,0,0,1,210,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-283"
+                    id="g-svg-274"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2645,14 +2229,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-279"
+                id="g-svg-270"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,210,175)"
+                transform="matrix(1,0,0,1,210,175)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-284"
+                    id="g-svg-275"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2668,14 +2252,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-280"
+                id="g-svg-271"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,210,150)"
+                transform="matrix(1,0,0,1,210,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-285"
+                    id="g-svg-276"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2691,14 +2275,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-281"
+                id="g-svg-272"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,210,125)"
+                transform="matrix(1,0,0,1,210,125)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-286"
+                    id="g-svg-277"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2714,14 +2298,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-282"
+                id="g-svg-273"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,210,100)"
+                transform="matrix(1,0,0,1,210,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-287"
+                    id="g-svg-278"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2739,14 +2323,14 @@
             </g>
           </g>
           <g
-            id="g-svg-288"
+            id="g-svg-279"
             fill="none"
             transform="matrix(1,0,0,1,200,60)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-289"
+                id="g-svg-280"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -2765,146 +2349,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-360" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-291"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-292"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-293"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+        <g id="g-svg-348" fill="none">
+          <g id="g-svg-281" fill="none" class="axis-grid-group">
+            <g id="g-svg-282" fill="none" class="axis-grid">
+              <g id="g-svg-283" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-295"
+                    id="g-svg-285"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,212.500000,178.349365)">
+                <g>
                   <path
-                    id="g-svg-296"
+                    id="g-svg-286"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 212.5,178.34936490538902 L 212.5,178.34936490538902"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,225,156.698730)">
+                <g>
                   <path
-                    id="g-svg-297"
+                    id="g-svg-287"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 225,156.69872981077808 L 225,156.69872981077808"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,237.500000,135.048096)">
+                <g>
                   <path
-                    id="g-svg-298"
+                    id="g-svg-288"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 237.5,135.0480947161671 L 237.5,135.0480947161671"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,113.397461)">
+                <g>
                   <path
-                    id="g-svg-299"
+                    id="g-svg-289"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,113.39745962155614 L 250,113.39745962155614"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-294"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-284" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-300"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-301"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,113.397461)">
+          <g id="g-svg-290" fill="none" class="axis-main-group">
+            <g id="g-svg-291" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-302"
+                  id="g-svg-292"
                   fill="none"
-                  x1="0"
-                  y1="86.60254037844386"
-                  x2="57.5"
-                  y2="-12.990381056766578"
+                  x1="200"
+                  y1="200"
+                  x2="257.5"
+                  y2="100.40707856478956"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.250000,0.433013,-0.433013,-0.250000,57.500000,-12.990381)">
+                <g transform="matrix(-0.250000,0.433013,-0.433013,-0.250000,257.500000,100.407082)">
                   <path
-                    id="g-svg-304"
+                    id="g-svg-294"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-305"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-306"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-295" fill="none" class="axis-tick-group" />
+            <g id="g-svg-296" fill="none" class="axis-label-group">
               <g
-                id="g-svg-307"
+                id="g-svg-297"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,208.660248,205)"
+                transform="matrix(1,0,0,1,208.660248,205)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-312"
+                    id="g-svg-302"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2920,14 +2463,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-308"
+                id="g-svg-298"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,221.160248,183.349365)"
+                transform="matrix(1,0,0,1,221.160248,183.349365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-313"
+                    id="g-svg-303"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2943,14 +2486,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-309"
+                id="g-svg-299"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,233.660248,161.698730)"
+                transform="matrix(1,0,0,1,233.660248,161.698730)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-314"
+                    id="g-svg-304"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2966,14 +2509,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-310"
+                id="g-svg-300"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,246.160248,140.048096)"
+                transform="matrix(1,0,0,1,246.160248,140.048096)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-315"
+                    id="g-svg-305"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2989,14 +2532,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-311"
+                id="g-svg-301"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,258.660248,118.397461)"
+                transform="matrix(1,0,0,1,258.660248,118.397461)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-316"
+                    id="g-svg-306"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3014,14 +2557,14 @@
             </g>
           </g>
           <g
-            id="g-svg-317"
+            id="g-svg-307"
             fill="none"
             transform="matrix(1,0,0,1,270,78.756447)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-318"
+                id="g-svg-308"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -3040,146 +2583,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-361" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-320"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-321"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-322"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,200)">
+        <g id="g-svg-349" fill="none">
+          <g id="g-svg-309" fill="none" class="axis-grid-group">
+            <g id="g-svg-310" fill="none" class="axis-grid">
+              <g id="g-svg-311" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-324"
+                    id="g-svg-313"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,200 L 200,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,221.650635,187.500000)">
+                <g>
                   <path
-                    id="g-svg-325"
+                    id="g-svg-314"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 221.65063509461095,187.5 L 221.65063509461095,187.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,243.301270,175)">
+                <g>
                   <path
-                    id="g-svg-326"
+                    id="g-svg-315"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 243.30127018922192,174.99999999999997 L 243.30127018922192,174.99999999999997"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,264.951904,162.500000)">
+                <g>
                   <path
-                    id="g-svg-327"
+                    id="g-svg-316"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 264.9519052838329,162.49999999999994 L 264.9519052838329,162.49999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,286.602539,150)">
+                <g>
                   <path
-                    id="g-svg-328"
+                    id="g-svg-317"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 286.60254037844385,149.99999999999994 L 286.60254037844385,149.99999999999994"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-323"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-312" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-329"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-330"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,200,150)">
+          <g id="g-svg-318" fill="none" class="axis-main-group">
+            <g id="g-svg-319" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-331"
+                  id="g-svg-320"
                   fill="none"
-                  x1="0"
-                  y1="50.00000000000006"
-                  x2="99.59292143521043"
-                  y2="-7.500000000000005"
+                  x1="200"
+                  y1="200"
+                  x2="299.5929214352104"
+                  y2="142.49999999999994"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.433013,0.250000,-0.250000,-0.433013,99.592918,-7.500000)">
+                <g transform="matrix(-0.433013,0.250000,-0.250000,-0.433013,299.592926,142.500000)">
                   <path
-                    id="g-svg-333"
+                    id="g-svg-322"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-334"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-335"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-323" fill="none" class="axis-tick-group" />
+            <g id="g-svg-324" fill="none" class="axis-label-group">
               <g
-                id="g-svg-336"
+                id="g-svg-325"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,205,208.660248)"
+                transform="matrix(1,0,0,1,205,208.660248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-341"
+                    id="g-svg-330"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3195,14 +2697,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-337"
+                id="g-svg-326"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,226.650635,196.160248)"
+                transform="matrix(1,0,0,1,226.650635,196.160248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-342"
+                    id="g-svg-331"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3218,14 +2720,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-338"
+                id="g-svg-327"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,248.301270,183.660248)"
+                transform="matrix(1,0,0,1,248.301270,183.660248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-343"
+                    id="g-svg-332"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3241,14 +2743,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-339"
+                id="g-svg-328"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,269.951904,171.160248)"
+                transform="matrix(1,0,0,1,269.951904,171.160248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-344"
+                    id="g-svg-333"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3264,14 +2766,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-340"
+                id="g-svg-329"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,291.602539,158.660248)"
+                transform="matrix(1,0,0,1,291.602539,158.660248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-345"
+                    id="g-svg-334"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3289,14 +2791,14 @@
             </g>
           </g>
           <g
-            id="g-svg-346"
+            id="g-svg-335"
             fill="none"
             transform="matrix(1,0,0,1,321.243561,130)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-347"
+                id="g-svg-336"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
diff --git a/__tests__/integration/snapshots/AxisLinearTitlePosition.svg b/__tests__/integration/snapshots/AxisLinearTitlePosition.svg
index 954074fd5..11fe165ed 100644
--- a/__tests__/integration/snapshots/AxisLinearTitlePosition.svg
+++ b/__tests__/integration/snapshots/AxisLinearTitlePosition.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-15"
-        fill="none"
-        width="800"
-        height="600"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-16" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-15" fill="none" width="800" height="600">
+        <g id="g-svg-16" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,50 L 50,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,50)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,50 L 100,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,50)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,50 L 150,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,50)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,50 L 200,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,50)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,50 L 250,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,50)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,50 L 300,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,50)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,50 L 350,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,50)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,50 L 400,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,50)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 450,50 L 450,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,500,50)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,67 +120,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,50 L 500,50"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-15"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-16"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+          <g id="g-svg-15" fill="none" class="axis-main-group">
+            <g id="g-svg-16" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-17"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="50"
+                  x2="515"
+                  y2="50"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,50)">
                   <path
                     id="g-svg-19"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-20"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-20" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-21"
                 fill="none"
                 transform="matrix(1,0,0,1,50,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
@@ -221,7 +179,7 @@
                 transform="matrix(1,0,0,1,100,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
@@ -241,7 +199,7 @@
                 transform="matrix(1,0,0,1,150,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
@@ -261,7 +219,7 @@
                 transform="matrix(1,0,0,1,200,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
@@ -281,7 +239,7 @@
                 transform="matrix(1,0,0,1,250,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
@@ -301,7 +259,7 @@
                 transform="matrix(1,0,0,1,300,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
@@ -321,7 +279,7 @@
                 transform="matrix(1,0,0,1,350,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
@@ -341,7 +299,7 @@
                 transform="matrix(1,0,0,1,400,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
@@ -361,7 +319,7 @@
                 transform="matrix(1,0,0,1,450,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
@@ -381,7 +339,7 @@
                 transform="matrix(1,0,0,1,500,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-40"
                     fill="none"
@@ -396,19 +354,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-41"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-41" fill="none" class="axis-label-group">
               <g
                 id="g-svg-42"
                 fill="none"
                 transform="matrix(1,0,0,1,50,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-52"
                     fill="rgba(0,0,0,1)"
@@ -431,7 +384,7 @@
                 transform="matrix(1,0,0,1,100,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-53"
                     fill="rgba(0,0,0,1)"
@@ -454,7 +407,7 @@
                 transform="matrix(1,0,0,1,150,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-54"
                     fill="rgba(0,0,0,1)"
@@ -477,7 +430,7 @@
                 transform="matrix(1,0,0,1,200,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-55"
                     fill="rgba(0,0,0,1)"
@@ -500,7 +453,7 @@
                 transform="matrix(1,0,0,1,250,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-56"
                     fill="rgba(0,0,0,1)"
@@ -523,7 +476,7 @@
                 transform="matrix(1,0,0,1,300,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -546,7 +499,7 @@
                 transform="matrix(1,0,0,1,350,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -569,7 +522,7 @@
                 transform="matrix(1,0,0,1,400,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -592,7 +545,7 @@
                 transform="matrix(1,0,0,1,450,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -615,7 +568,7 @@
                 transform="matrix(1,0,0,1,500,70)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -640,7 +593,7 @@
             transform="matrix(1,0,0,1,285,26.500000)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-63"
                 fill="rgba(255,0,0,1)"
@@ -661,26 +614,22 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-17" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-65"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-66"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-67"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,100)">
+        <g id="g-svg-17" fill="none">
+          <g id="g-svg-64" fill="none" class="axis-grid-group">
+            <g id="g-svg-65" fill="none" class="axis-grid">
+              <g id="g-svg-66" fill="none" class="grid-line-group">
+                <g>
+                  <path
+                    id="g-svg-68"
+                    fill="none"
+                    class="grid-line"
+                    stroke="rgba(217,217,217,1)"
+                    stroke-width="1"
+                    stroke-dasharray="4,4"
+                    d="M 50,100 L 50,100"
+                  />
+                </g>
+                <g>
                   <path
                     id="g-svg-69"
                     fill="none"
@@ -688,10 +637,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,138.88888888888889 L 50,138.88888888888889"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,138.888885)">
+                <g>
                   <path
                     id="g-svg-70"
                     fill="none"
@@ -699,10 +648,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,177.77777777777777 L 50,177.77777777777777"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,177.777771)">
+                <g>
                   <path
                     id="g-svg-71"
                     fill="none"
@@ -710,10 +659,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,216.66666666666666 L 50,216.66666666666666"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,216.666672)">
+                <g>
                   <path
                     id="g-svg-72"
                     fill="none"
@@ -721,10 +670,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,255.55555555555554 L 50,255.55555555555554"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,255.555557)">
+                <g>
                   <path
                     id="g-svg-73"
                     fill="none"
@@ -732,10 +681,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,294.44444444444446 L 50,294.44444444444446"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,294.444458)">
+                <g>
                   <path
                     id="g-svg-74"
                     fill="none"
@@ -743,10 +692,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,333.3333333333333 L 50,333.3333333333333"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,333.333344)">
+                <g>
                   <path
                     id="g-svg-75"
                     fill="none"
@@ -754,10 +703,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,372.22222222222223 L 50,372.22222222222223"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,372.222229)">
+                <g>
                   <path
                     id="g-svg-76"
                     fill="none"
@@ -765,10 +714,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,411.1111111111111 L 50,411.1111111111111"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,50,411.111115)">
+                <g>
                   <path
                     id="g-svg-77"
                     fill="none"
@@ -776,84 +725,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
-                  />
-                </g>
-                <g transform="matrix(1,0,0,1,50,450)">
-                  <path
-                    id="g-svg-78"
-                    fill="none"
-                    class="grid-line"
-                    stroke="rgba(217,217,217,1)"
-                    stroke-width="1"
-                    stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,450 L 50,450"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-68"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-67" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-79"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-80"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,100)">
+          <g id="g-svg-78" fill="none" class="axis-main-group">
+            <g id="g-svg-79" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-81"
+                  id="g-svg-80"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="365"
+                  x1="50"
+                  y1="100"
+                  x2="50"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,365)">
+                <g transform="matrix(0,-0.500000,0.500000,0,50,465)">
                   <path
-                    id="g-svg-83"
+                    id="g-svg-82"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-84"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-83" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-85"
+                id="g-svg-84"
                 fill="none"
                 transform="matrix(1,0,0,1,50,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-95"
+                    id="g-svg-94"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -862,18 +779,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-86"
+                id="g-svg-85"
                 fill="none"
                 transform="matrix(1,0,0,1,50,138.888885)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-96"
+                    id="g-svg-95"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -882,18 +799,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-87"
+                id="g-svg-86"
                 fill="none"
                 transform="matrix(1,0,0,1,50,177.777771)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-97"
+                    id="g-svg-96"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -902,18 +819,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-88"
+                id="g-svg-87"
                 fill="none"
                 transform="matrix(1,0,0,1,50,216.666672)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-98"
+                    id="g-svg-97"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -922,18 +839,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-89"
+                id="g-svg-88"
                 fill="none"
                 transform="matrix(1,0,0,1,50,255.555557)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-99"
+                    id="g-svg-98"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -942,18 +859,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-90"
+                id="g-svg-89"
                 fill="none"
                 transform="matrix(1,0,0,1,50,294.444458)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-100"
+                    id="g-svg-99"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -962,18 +879,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-91"
+                id="g-svg-90"
                 fill="none"
                 transform="matrix(1,0,0,1,50,333.333344)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-101"
+                    id="g-svg-100"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -982,18 +899,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-92"
+                id="g-svg-91"
                 fill="none"
                 transform="matrix(1,0,0,1,50,372.222229)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-102"
+                    id="g-svg-101"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -1002,18 +919,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-93"
+                id="g-svg-92"
                 fill="none"
                 transform="matrix(1,0,0,1,50,411.111115)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-103"
+                    id="g-svg-102"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -1022,18 +939,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-94"
+                id="g-svg-93"
                 fill="none"
                 transform="matrix(1,0,0,1,50,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-104"
+                    id="g-svg-103"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -1042,21 +959,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-105"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-104" fill="none" class="axis-label-group">
               <g
-                id="g-svg-106"
+                id="g-svg-105"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,100)"
+                transform="matrix(1,0,0,1,30,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-116"
+                    id="g-svg-115"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1072,14 +984,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-107"
+                id="g-svg-106"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,138.888885)"
+                transform="matrix(1,0,0,1,30,138.888885)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-117"
+                    id="g-svg-116"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1095,14 +1007,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-108"
+                id="g-svg-107"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,177.777771)"
+                transform="matrix(1,0,0,1,30,177.777771)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-118"
+                    id="g-svg-117"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1118,14 +1030,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-109"
+                id="g-svg-108"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,216.666672)"
+                transform="matrix(1,0,0,1,30,216.666672)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-119"
+                    id="g-svg-118"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1141,14 +1053,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-110"
+                id="g-svg-109"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,255.555557)"
+                transform="matrix(1,0,0,1,30,255.555557)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-120"
+                    id="g-svg-119"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1164,14 +1076,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-111"
+                id="g-svg-110"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,294.444458)"
+                transform="matrix(1,0,0,1,30,294.444458)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-121"
+                    id="g-svg-120"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1187,14 +1099,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-112"
+                id="g-svg-111"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,333.333344)"
+                transform="matrix(1,0,0,1,30,333.333344)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-122"
+                    id="g-svg-121"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1210,14 +1122,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-113"
+                id="g-svg-112"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,372.222229)"
+                transform="matrix(1,0,0,1,30,372.222229)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-123"
+                    id="g-svg-122"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1233,14 +1145,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-114"
+                id="g-svg-113"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,411.111115)"
+                transform="matrix(1,0,0,1,30,411.111115)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-124"
+                    id="g-svg-123"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1256,14 +1168,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-115"
+                id="g-svg-114"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,30,450)"
+                transform="matrix(1,0,0,1,30,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-125"
+                    id="g-svg-124"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1281,14 +1193,14 @@
             </g>
           </g>
           <g
-            id="g-svg-126"
+            id="g-svg-125"
             fill="none"
-            transform="matrix(1,0,0,1,-7,285)"
+            transform="matrix(1,0,0,1,11.500000,285)"
             class="axis-title-group"
           >
-            <g transform="matrix(0,-1,1,0,18.500000,0)">
+            <g transform="matrix(0,-1,1,0,0,0)">
               <text
-                id="g-svg-127"
+                id="g-svg-126"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1307,26 +1219,22 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-128"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-129"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-130"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,500)">
+        <g id="g-svg-18" fill="none">
+          <g id="g-svg-127" fill="none" class="axis-grid-group">
+            <g id="g-svg-128" fill="none" class="axis-grid">
+              <g id="g-svg-129" fill="none" class="grid-line-group">
+                <g>
+                  <path
+                    id="g-svg-131"
+                    fill="none"
+                    class="grid-line"
+                    stroke="rgba(217,217,217,1)"
+                    stroke-width="1"
+                    stroke-dasharray="4,4"
+                    d="M 50,500 L 50,500"
+                  />
+                </g>
+                <g>
                   <path
                     id="g-svg-132"
                     fill="none"
@@ -1334,10 +1242,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,500 L 100,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,500)">
+                <g>
                   <path
                     id="g-svg-133"
                     fill="none"
@@ -1345,10 +1253,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,500 L 150,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,500)">
+                <g>
                   <path
                     id="g-svg-134"
                     fill="none"
@@ -1356,10 +1264,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,500 L 200,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,500)">
+                <g>
                   <path
                     id="g-svg-135"
                     fill="none"
@@ -1367,10 +1275,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,500 L 250,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,250,500)">
+                <g>
                   <path
                     id="g-svg-136"
                     fill="none"
@@ -1378,10 +1286,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 300,500 L 300,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,500)">
+                <g>
                   <path
                     id="g-svg-137"
                     fill="none"
@@ -1389,10 +1297,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 350,500 L 350,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,350,500)">
+                <g>
                   <path
                     id="g-svg-138"
                     fill="none"
@@ -1400,10 +1308,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 400,500 L 400,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,500)">
+                <g>
                   <path
                     id="g-svg-139"
                     fill="none"
@@ -1411,10 +1319,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 450,500 L 450,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,450,500)">
+                <g>
                   <path
                     id="g-svg-140"
                     fill="none"
@@ -1422,80 +1330,48 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
-                  />
-                </g>
-                <g transform="matrix(1,0,0,1,500,500)">
-                  <path
-                    id="g-svg-141"
-                    fill="none"
-                    class="grid-line"
-                    stroke="rgba(217,217,217,1)"
-                    stroke-width="1"
-                    stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 500,500 L 500,500"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-131"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-130" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-142"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-143"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,500)">
+          <g id="g-svg-141" fill="none" class="axis-main-group">
+            <g id="g-svg-142" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-144"
+                  id="g-svg-143"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="465"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="500"
+                  x2="515"
+                  y2="500"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,465,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,515,500)">
                   <path
-                    id="g-svg-146"
+                    id="g-svg-145"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-147"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-146" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-148"
+                id="g-svg-147"
                 fill="none"
                 transform="matrix(1,0,0,1,50,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-158"
+                    id="g-svg-157"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1508,14 +1384,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-149"
+                id="g-svg-148"
                 fill="none"
                 transform="matrix(1,0,0,1,100,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-159"
+                    id="g-svg-158"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1528,14 +1404,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-150"
+                id="g-svg-149"
                 fill="none"
                 transform="matrix(1,0,0,1,150,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-160"
+                    id="g-svg-159"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1548,14 +1424,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-151"
+                id="g-svg-150"
                 fill="none"
                 transform="matrix(1,0,0,1,200,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-161"
+                    id="g-svg-160"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1568,14 +1444,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-152"
+                id="g-svg-151"
                 fill="none"
                 transform="matrix(1,0,0,1,250,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-162"
+                    id="g-svg-161"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1588,14 +1464,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-153"
+                id="g-svg-152"
                 fill="none"
                 transform="matrix(1,0,0,1,300,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-163"
+                    id="g-svg-162"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1608,14 +1484,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-154"
+                id="g-svg-153"
                 fill="none"
                 transform="matrix(1,0,0,1,350,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-164"
+                    id="g-svg-163"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1628,14 +1504,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-155"
+                id="g-svg-154"
                 fill="none"
                 transform="matrix(1,0,0,1,400,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-165"
+                    id="g-svg-164"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1648,14 +1524,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-156"
+                id="g-svg-155"
                 fill="none"
                 transform="matrix(1,0,0,1,450,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-166"
+                    id="g-svg-165"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1668,14 +1544,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-157"
+                id="g-svg-156"
                 fill="none"
                 transform="matrix(1,0,0,1,500,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
-                    id="g-svg-167"
+                    id="g-svg-166"
                     fill="none"
                     x1="0"
                     y1="0"
@@ -1688,21 +1564,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-168"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-167" fill="none" class="axis-label-group">
               <g
-                id="g-svg-169"
+                id="g-svg-168"
                 fill="none"
                 transform="matrix(1,0,0,1,50,520)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-179"
+                    id="g-svg-178"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1718,14 +1589,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-170"
+                id="g-svg-169"
                 fill="none"
                 transform="matrix(1,0,0,1,100,520)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-180"
+                    id="g-svg-179"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1741,14 +1612,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-171"
+                id="g-svg-170"
                 fill="none"
                 transform="matrix(1,0,0,1,150,520)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-181"
+                    id="g-svg-180"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1764,14 +1635,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-172"
+                id="g-svg-171"
                 fill="none"
                 transform="matrix(1,0,0,1,200,520)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-182"
+                    id="g-svg-181"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1787,14 +1658,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-173"
+                id="g-svg-172"
                 fill="none"
                 transform="matrix(1,0,0,1,250,520)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-183"
+                    id="g-svg-182"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1810,14 +1681,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-174"
+                id="g-svg-173"
                 fill="none"
                 transform="matrix(1,0,0,1,300,520)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-184"
+                    id="g-svg-183"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1833,14 +1704,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-175"
+                id="g-svg-174"
                 fill="none"
                 transform="matrix(1,0,0,1,350,520)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-185"
+                    id="g-svg-184"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1856,14 +1727,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-176"
+                id="g-svg-175"
                 fill="none"
                 transform="matrix(1,0,0,1,400,520)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-186"
+                    id="g-svg-185"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1879,14 +1750,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-177"
+                id="g-svg-176"
                 fill="none"
                 transform="matrix(1,0,0,1,450,520)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-187"
+                    id="g-svg-186"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1902,14 +1773,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-178"
+                id="g-svg-177"
                 fill="none"
                 transform="matrix(1,0,0,1,500,520)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-188"
+                    id="g-svg-187"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1927,14 +1798,14 @@
             </g>
           </g>
           <g
-            id="g-svg-189"
+            id="g-svg-188"
             fill="none"
-            transform="matrix(1,0,0,1,285,547)"
+            transform="matrix(1,0,0,1,285,528.500000)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-190"
+                id="g-svg-189"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1953,199 +1824,163 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-19" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-192"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-193"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-194"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,550,50)">
+        <g id="g-svg-19" fill="none">
+          <g id="g-svg-190" fill="none" class="axis-grid-group">
+            <g id="g-svg-191" fill="none" class="axis-grid">
+              <g id="g-svg-192" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-196"
+                    id="g-svg-194"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,50 L 550,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,100)">
+                <g>
                   <path
-                    id="g-svg-197"
+                    id="g-svg-195"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,100 L 550,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,150)">
+                <g>
                   <path
-                    id="g-svg-198"
+                    id="g-svg-196"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,150 L 550,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,200)">
+                <g>
                   <path
-                    id="g-svg-199"
+                    id="g-svg-197"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,200 L 550,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,250)">
+                <g>
                   <path
-                    id="g-svg-200"
+                    id="g-svg-198"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,250 L 550,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,300)">
+                <g>
                   <path
-                    id="g-svg-201"
+                    id="g-svg-199"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,300 L 550,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,350)">
+                <g>
                   <path
-                    id="g-svg-202"
+                    id="g-svg-200"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,350 L 550,350"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,400)">
+                <g>
                   <path
-                    id="g-svg-203"
+                    id="g-svg-201"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,400 L 550,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,450)">
+                <g>
                   <path
-                    id="g-svg-204"
+                    id="g-svg-202"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,450 L 550,450"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,500)">
+                <g>
                   <path
-                    id="g-svg-205"
+                    id="g-svg-203"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,500 L 550,500"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-195"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-193" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-206"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-207"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,550,50)">
+          <g id="g-svg-204" fill="none" class="axis-main-group">
+            <g id="g-svg-205" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-208"
+                  id="g-svg-206"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="465"
+                  x1="550"
+                  y1="50"
+                  x2="550"
+                  y2="515"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,465)">
+                <g transform="matrix(0,-0.500000,0.500000,0,550,515)">
                   <path
-                    id="g-svg-210"
+                    id="g-svg-208"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-211"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-209" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-212"
+                id="g-svg-210"
                 fill="none"
                 transform="matrix(1,0,0,1,550,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-222"
+                    id="g-svg-220"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -2154,18 +1989,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-213"
+                id="g-svg-211"
                 fill="none"
                 transform="matrix(1,0,0,1,550,100)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-223"
+                    id="g-svg-221"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -2174,18 +2009,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-214"
+                id="g-svg-212"
                 fill="none"
                 transform="matrix(1,0,0,1,550,150)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-224"
+                    id="g-svg-222"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -2194,18 +2029,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-215"
+                id="g-svg-213"
                 fill="none"
                 transform="matrix(1,0,0,1,550,200)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-225"
+                    id="g-svg-223"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -2214,18 +2049,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-216"
+                id="g-svg-214"
                 fill="none"
                 transform="matrix(1,0,0,1,550,250)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-226"
+                    id="g-svg-224"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -2234,18 +2069,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-217"
+                id="g-svg-215"
                 fill="none"
                 transform="matrix(1,0,0,1,550,300)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-227"
+                    id="g-svg-225"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -2254,18 +2089,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-218"
+                id="g-svg-216"
                 fill="none"
                 transform="matrix(1,0,0,1,550,350)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-228"
+                    id="g-svg-226"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -2274,18 +2109,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-219"
+                id="g-svg-217"
                 fill="none"
                 transform="matrix(1,0,0,1,550,400)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-229"
+                    id="g-svg-227"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -2294,18 +2129,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-220"
+                id="g-svg-218"
                 fill="none"
                 transform="matrix(1,0,0,1,550,450)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-230"
+                    id="g-svg-228"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -2314,18 +2149,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-221"
+                id="g-svg-219"
                 fill="none"
                 transform="matrix(1,0,0,1,550,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
-                    id="g-svg-231"
+                    id="g-svg-229"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="5"
@@ -2334,21 +2169,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-232"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-230" fill="none" class="axis-label-group">
               <g
-                id="g-svg-233"
+                id="g-svg-231"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,530,50)"
+                transform="matrix(1,0,0,1,530,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-243"
+                    id="g-svg-241"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2364,14 +2194,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-234"
+                id="g-svg-232"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,530,100)"
+                transform="matrix(1,0,0,1,530,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-244"
+                    id="g-svg-242"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2387,14 +2217,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-235"
+                id="g-svg-233"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,530,150)"
+                transform="matrix(1,0,0,1,530,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-245"
+                    id="g-svg-243"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2410,14 +2240,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-236"
+                id="g-svg-234"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,530,200)"
+                transform="matrix(1,0,0,1,530,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-246"
+                    id="g-svg-244"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2433,14 +2263,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-237"
+                id="g-svg-235"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,530,250)"
+                transform="matrix(1,0,0,1,530,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-247"
+                    id="g-svg-245"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2456,14 +2286,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-238"
+                id="g-svg-236"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,530,300)"
+                transform="matrix(1,0,0,1,530,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-248"
+                    id="g-svg-246"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2479,14 +2309,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-239"
+                id="g-svg-237"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,530,350)"
+                transform="matrix(1,0,0,1,530,350)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-249"
+                    id="g-svg-247"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2502,14 +2332,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-240"
+                id="g-svg-238"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,530,400)"
+                transform="matrix(1,0,0,1,530,400)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-250"
+                    id="g-svg-248"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2525,14 +2355,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-241"
+                id="g-svg-239"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,530,450)"
+                transform="matrix(1,0,0,1,530,450)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-251"
+                    id="g-svg-249"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2548,14 +2378,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-242"
+                id="g-svg-240"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,530,500)"
+                transform="matrix(1,0,0,1,530,500)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-252"
+                    id="g-svg-250"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2573,14 +2403,14 @@
             </g>
           </g>
           <g
-            id="g-svg-253"
+            id="g-svg-251"
             fill="none"
-            transform="matrix(1,0,0,1,583.500000,285)"
+            transform="matrix(1,0,0,1,573.500000,285)"
             class="axis-title-group"
           >
-            <g transform="matrix(0,-1,1,0,-18.500000,0)">
+            <g transform="matrix(0,-1,1,0,0,0)">
               <text
-                id="g-svg-254"
+                id="g-svg-252"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -2599,200 +2429,164 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-20" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-255"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid-group"
-            >
-              <g
-                id="g-svg-256"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-257"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                >
-                  <g transform="matrix(1,0,0,1,650,50)">
+        <g id="g-svg-20" fill="none">
+          <g id="g-svg-21" fill="none">
+            <g id="g-svg-253" fill="none" class="axis-grid-group">
+              <g id="g-svg-254" fill="none" class="axis-grid">
+                <g id="g-svg-255" fill="none" class="grid-line-group">
+                  <g>
                     <path
-                      id="g-svg-259"
+                      id="g-svg-257"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,50 L 650,50"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,100)">
+                  <g>
                     <path
-                      id="g-svg-260"
+                      id="g-svg-258"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,100 L 650,100"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,150)">
+                  <g>
                     <path
-                      id="g-svg-261"
+                      id="g-svg-259"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,150 L 650,150"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,200)">
+                  <g>
                     <path
-                      id="g-svg-262"
+                      id="g-svg-260"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,200 L 650,200"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,250)">
+                  <g>
                     <path
-                      id="g-svg-263"
+                      id="g-svg-261"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,250 L 650,250"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,300)">
+                  <g>
                     <path
-                      id="g-svg-264"
+                      id="g-svg-262"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,300 L 650,300"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,350)">
+                  <g>
                     <path
-                      id="g-svg-265"
+                      id="g-svg-263"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,350 L 650,350"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,400)">
+                  <g>
                     <path
-                      id="g-svg-266"
+                      id="g-svg-264"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,400 L 650,400"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,450)">
+                  <g>
                     <path
-                      id="g-svg-267"
+                      id="g-svg-265"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,450 L 650,450"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,500)">
+                  <g>
                     <path
-                      id="g-svg-268"
+                      id="g-svg-266"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,500 L 650,500"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-258"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
+                <g id="g-svg-256" fill="none" class="grid-region-group" />
               </g>
             </g>
-            <g
-              id="g-svg-269"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-270"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,650,50)">
+            <g id="g-svg-267" fill="none" class="axis-main-group">
+              <g id="g-svg-268" fill="none" class="axis-line-group">
+                <g>
                   <line
-                    id="g-svg-271"
+                    id="g-svg-269"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="-9.18485099360515e-16"
-                    y2="465"
+                    x1="650"
+                    y1="50"
+                    x2="650"
+                    y2="515"
                     class="axis-line axis-line"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
-                  <g transform="matrix(0,-0.500000,0.500000,0,-0,465)">
+                  <g transform="matrix(0,-0.500000,0.500000,0,650,515)">
                     <path
-                      id="g-svg-273"
+                      id="g-svg-271"
                       fill="rgba(0,0,0,1)"
-                      d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                      transform="translate(-10,-10)"
+                      d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                       stroke-width="5"
                       stroke="rgba(0,0,0,1)"
                     />
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-274"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
+              <g id="g-svg-272" fill="none" class="axis-tick-group">
                 <g
-                  id="g-svg-275"
+                  id="g-svg-273"
                   fill="none"
                   transform="matrix(1,0,0,1,650,50)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-285"
+                      id="g-svg-283"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -2801,18 +2595,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-276"
+                  id="g-svg-274"
                   fill="none"
                   transform="matrix(1,0,0,1,650,100)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-286"
+                      id="g-svg-284"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -2821,18 +2615,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-277"
+                  id="g-svg-275"
                   fill="none"
                   transform="matrix(1,0,0,1,650,150)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-287"
+                      id="g-svg-285"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -2841,18 +2635,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-278"
+                  id="g-svg-276"
                   fill="none"
                   transform="matrix(1,0,0,1,650,200)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-288"
+                      id="g-svg-286"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -2861,18 +2655,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-279"
+                  id="g-svg-277"
                   fill="none"
                   transform="matrix(1,0,0,1,650,250)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-289"
+                      id="g-svg-287"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -2881,18 +2675,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-280"
+                  id="g-svg-278"
                   fill="none"
                   transform="matrix(1,0,0,1,650,300)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-290"
+                      id="g-svg-288"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -2901,18 +2695,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-281"
+                  id="g-svg-279"
                   fill="none"
                   transform="matrix(1,0,0,1,650,350)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-291"
+                      id="g-svg-289"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -2921,18 +2715,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-282"
+                  id="g-svg-280"
                   fill="none"
                   transform="matrix(1,0,0,1,650,400)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-292"
+                      id="g-svg-290"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -2941,18 +2735,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-283"
+                  id="g-svg-281"
                   fill="none"
                   transform="matrix(1,0,0,1,650,450)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-293"
+                      id="g-svg-291"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -2961,18 +2755,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-284"
+                  id="g-svg-282"
                   fill="none"
                   transform="matrix(1,0,0,1,650,500)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-294"
+                      id="g-svg-292"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -2981,21 +2775,16 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-295"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
+              <g id="g-svg-293" fill="none" class="axis-label-group">
                 <g
-                  id="g-svg-296"
+                  id="g-svg-294"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,50)"
+                  transform="matrix(1,0,0,1,630,50)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-306"
+                      id="g-svg-304"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3011,14 +2800,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-297"
+                  id="g-svg-295"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,100)"
+                  transform="matrix(1,0,0,1,630,100)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-307"
+                      id="g-svg-305"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3034,14 +2823,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-298"
+                  id="g-svg-296"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,150)"
+                  transform="matrix(1,0,0,1,630,150)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-308"
+                      id="g-svg-306"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3057,14 +2846,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-299"
+                  id="g-svg-297"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,200)"
+                  transform="matrix(1,0,0,1,630,200)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-309"
+                      id="g-svg-307"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3080,14 +2869,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-300"
+                  id="g-svg-298"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,250)"
+                  transform="matrix(1,0,0,1,630,250)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-310"
+                      id="g-svg-308"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3103,14 +2892,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-301"
+                  id="g-svg-299"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,300)"
+                  transform="matrix(1,0,0,1,630,300)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-311"
+                      id="g-svg-309"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3126,14 +2915,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-302"
+                  id="g-svg-300"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,350)"
+                  transform="matrix(1,0,0,1,630,350)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-312"
+                      id="g-svg-310"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3149,14 +2938,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-303"
+                  id="g-svg-301"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,400)"
+                  transform="matrix(1,0,0,1,630,400)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-313"
+                      id="g-svg-311"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3172,14 +2961,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-304"
+                  id="g-svg-302"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,450)"
+                  transform="matrix(1,0,0,1,630,450)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-314"
+                      id="g-svg-312"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3195,14 +2984,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-305"
+                  id="g-svg-303"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,500)"
+                  transform="matrix(1,0,0,1,630,500)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-315"
+                      id="g-svg-313"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3220,14 +3009,14 @@
               </g>
             </g>
             <g
-              id="g-svg-316"
+              id="g-svg-314"
               fill="none"
               transform="matrix(1,0,0,1,683.500000,285)"
               class="axis-title-group"
             >
-              <g transform="matrix(0,-1,1,0,-18.500000,0)">
+              <g transform="matrix(0,-1,1,0,0,0)">
                 <text
-                  id="g-svg-317"
+                  id="g-svg-315"
                   fill="rgba(255,0,0,1)"
                   dominant-baseline="central"
                   paint-order="stroke"
@@ -3248,199 +3037,163 @@
           </g>
         </g>
         <g id="g-svg-22" fill="none" transform="matrix(1,0,0,1,60,60)">
-          <g id="g-svg-23" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-318"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid-group"
-            >
-              <g
-                id="g-svg-319"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-320"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                >
-                  <g transform="matrix(1,0,0,1,650,50)">
+          <g id="g-svg-23" fill="none">
+            <g id="g-svg-316" fill="none" class="axis-grid-group">
+              <g id="g-svg-317" fill="none" class="axis-grid">
+                <g id="g-svg-318" fill="none" class="grid-line-group">
+                  <g>
                     <path
-                      id="g-svg-322"
+                      id="g-svg-320"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,50 L 650,50"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,100)">
+                  <g>
                     <path
-                      id="g-svg-323"
+                      id="g-svg-321"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,100 L 650,100"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,150)">
+                  <g>
                     <path
-                      id="g-svg-324"
+                      id="g-svg-322"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,150 L 650,150"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,200)">
+                  <g>
                     <path
-                      id="g-svg-325"
+                      id="g-svg-323"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,200 L 650,200"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,250)">
+                  <g>
                     <path
-                      id="g-svg-326"
+                      id="g-svg-324"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,250 L 650,250"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,300)">
+                  <g>
                     <path
-                      id="g-svg-327"
+                      id="g-svg-325"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,300 L 650,300"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,350)">
+                  <g>
                     <path
-                      id="g-svg-328"
+                      id="g-svg-326"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,350 L 650,350"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,400)">
+                  <g>
                     <path
-                      id="g-svg-329"
+                      id="g-svg-327"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,400 L 650,400"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,450)">
+                  <g>
                     <path
-                      id="g-svg-330"
+                      id="g-svg-328"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,450 L 650,450"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,650,500)">
+                  <g>
                     <path
-                      id="g-svg-331"
+                      id="g-svg-329"
                       fill="none"
                       class="grid-line"
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 650,500 L 650,500"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-321"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
+                <g id="g-svg-319" fill="none" class="grid-region-group" />
               </g>
             </g>
-            <g
-              id="g-svg-332"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-333"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,650,50)">
+            <g id="g-svg-330" fill="none" class="axis-main-group">
+              <g id="g-svg-331" fill="none" class="axis-line-group">
+                <g>
                   <line
-                    id="g-svg-334"
+                    id="g-svg-332"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="-9.18485099360515e-16"
-                    y2="465"
+                    x1="650"
+                    y1="50"
+                    x2="650"
+                    y2="515"
                     class="axis-line axis-line"
                     stroke-width="5"
                     stroke="rgba(0,0,0,1)"
                   />
-                  <g transform="matrix(0,-0.500000,0.500000,0,-0,465)">
+                  <g transform="matrix(0,-0.500000,0.500000,0,650,515)">
                     <path
-                      id="g-svg-336"
+                      id="g-svg-334"
                       fill="rgba(0,0,0,1)"
-                      d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                      transform="translate(-10,-10)"
+                      d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                       stroke-width="5"
                       stroke="rgba(0,0,0,1)"
                     />
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-337"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
+              <g id="g-svg-335" fill="none" class="axis-tick-group">
                 <g
-                  id="g-svg-338"
+                  id="g-svg-336"
                   fill="none"
                   transform="matrix(1,0,0,1,650,50)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-348"
+                      id="g-svg-346"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -3449,18 +3202,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-339"
+                  id="g-svg-337"
                   fill="none"
                   transform="matrix(1,0,0,1,650,100)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-349"
+                      id="g-svg-347"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -3469,18 +3222,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-340"
+                  id="g-svg-338"
                   fill="none"
                   transform="matrix(1,0,0,1,650,150)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-350"
+                      id="g-svg-348"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -3489,18 +3242,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-341"
+                  id="g-svg-339"
                   fill="none"
                   transform="matrix(1,0,0,1,650,200)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-351"
+                      id="g-svg-349"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -3509,18 +3262,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-342"
+                  id="g-svg-340"
                   fill="none"
                   transform="matrix(1,0,0,1,650,250)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-352"
+                      id="g-svg-350"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -3529,18 +3282,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-343"
+                  id="g-svg-341"
                   fill="none"
                   transform="matrix(1,0,0,1,650,300)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-353"
+                      id="g-svg-351"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -3549,18 +3302,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-344"
+                  id="g-svg-342"
                   fill="none"
                   transform="matrix(1,0,0,1,650,350)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-354"
+                      id="g-svg-352"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -3569,18 +3322,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-345"
+                  id="g-svg-343"
                   fill="none"
                   transform="matrix(1,0,0,1,650,400)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-355"
+                      id="g-svg-353"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -3589,18 +3342,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-346"
+                  id="g-svg-344"
                   fill="none"
                   transform="matrix(1,0,0,1,650,450)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-356"
+                      id="g-svg-354"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -3609,18 +3362,18 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-347"
+                  id="g-svg-345"
                   fill="none"
                   transform="matrix(1,0,0,1,650,500)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,-10,0)">
+                  <g>
                     <line
-                      id="g-svg-357"
+                      id="g-svg-355"
                       fill="none"
-                      x1="10"
+                      x1="0"
                       y1="0"
-                      x2="0"
+                      x2="-10"
                       y2="0"
                       class="axis-tick-item"
                       stroke-width="5"
@@ -3629,21 +3382,16 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-358"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
+              <g id="g-svg-356" fill="none" class="axis-label-group">
                 <g
-                  id="g-svg-359"
+                  id="g-svg-357"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,50)"
+                  transform="matrix(1,0,0,1,630,50)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-369"
+                      id="g-svg-367"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3659,14 +3407,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-360"
+                  id="g-svg-358"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,100)"
+                  transform="matrix(1,0,0,1,630,100)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-370"
+                      id="g-svg-368"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3682,14 +3430,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-361"
+                  id="g-svg-359"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,150)"
+                  transform="matrix(1,0,0,1,630,150)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-371"
+                      id="g-svg-369"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3705,14 +3453,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-362"
+                  id="g-svg-360"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,200)"
+                  transform="matrix(1,0,0,1,630,200)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-372"
+                      id="g-svg-370"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3728,14 +3476,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-363"
+                  id="g-svg-361"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,250)"
+                  transform="matrix(1,0,0,1,630,250)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-373"
+                      id="g-svg-371"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3751,14 +3499,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-364"
+                  id="g-svg-362"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,300)"
+                  transform="matrix(1,0,0,1,630,300)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-374"
+                      id="g-svg-372"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3774,14 +3522,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-365"
+                  id="g-svg-363"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,350)"
+                  transform="matrix(1,0,0,1,630,350)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-375"
+                      id="g-svg-373"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3797,14 +3545,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-366"
+                  id="g-svg-364"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,400)"
+                  transform="matrix(1,0,0,1,630,400)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-376"
+                      id="g-svg-374"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3820,14 +3568,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-367"
+                  id="g-svg-365"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,450)"
+                  transform="matrix(1,0,0,1,630,450)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-377"
+                      id="g-svg-375"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3843,14 +3591,14 @@
                   </g>
                 </g>
                 <g
-                  id="g-svg-368"
+                  id="g-svg-366"
                   fill="none"
-                  transform="matrix(-0,-1,1,-0,630,500)"
+                  transform="matrix(1,0,0,1,630,500)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(-0,-1,1,-0,0,0)">
                     <text
-                      id="g-svg-378"
+                      id="g-svg-376"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
@@ -3868,14 +3616,14 @@
               </g>
             </g>
             <g
-              id="g-svg-379"
+              id="g-svg-377"
               fill="none"
               transform="matrix(1,0,0,1,683.500000,285)"
               class="axis-title-group"
             >
-              <g transform="matrix(0,-1,1,0,-18.500000,0)">
+              <g transform="matrix(0,-1,1,0,0,0)">
                 <text
-                  id="g-svg-380"
+                  id="g-svg-378"
                   fill="rgba(255,0,0,1)"
                   dominant-baseline="central"
                   paint-order="stroke"
diff --git a/__tests__/integration/snapshots/AxisLinearTitleStart.svg b/__tests__/integration/snapshots/AxisLinearTitleStart.svg
index 1a2ca2055..69df54d27 100644
--- a/__tests__/integration/snapshots/AxisLinearTitleStart.svg
+++ b/__tests__/integration/snapshots/AxisLinearTitleStart.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-823"
-        fill="none"
-        width="300"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-824" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,250,150)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-819" fill="none" width="300" height="300">
+        <g id="g-svg-820" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 250,150 L 250,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,225,150)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 225,150 L 225,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,150)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,150 L 200,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,175,150)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 175,150 L 175,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,73 +65,47 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,150,150)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
-                  x1="100"
-                  y1="0"
-                  x2="-15"
-                  y2="0"
+                  x1="250"
+                  y1="150"
+                  x2="135"
+                  y2="150"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.500000,0,0,0.500000,-15,0)">
+                <g transform="matrix(0.500000,0,0,0.500000,135,150)">
                   <path
                     id="g-svg-14"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-15"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-16"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-15" fill="none" class="axis-tick-group" />
+            <g id="g-svg-16" fill="none" class="axis-label-group">
               <g
                 id="g-svg-17"
                 fill="none"
                 transform="matrix(1,0,0,1,250,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -175,7 +128,7 @@
                 transform="matrix(1,0,0,1,225,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -198,7 +151,7 @@
                 transform="matrix(1,0,0,1,200,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -221,7 +174,7 @@
                 transform="matrix(1,0,0,1,175,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-25"
                     fill="rgba(0,0,0,1)"
@@ -244,7 +197,7 @@
                 transform="matrix(1,0,0,1,150,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-26"
                     fill="rgba(0,0,0,1)"
@@ -269,7 +222,7 @@
             transform="matrix(1,0,0,1,260,150)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-28"
                 fill="rgba(255,0,0,1)"
@@ -290,146 +243,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-825" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-30"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-31"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-32"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,236.602539,200)">
+        <g id="g-svg-821" fill="none">
+          <g id="g-svg-29" fill="none" class="axis-grid-group">
+            <g id="g-svg-30" fill="none" class="axis-grid">
+              <g id="g-svg-31" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-34"
+                    id="g-svg-33"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 236.60254037844388,200 L 236.60254037844388,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,214.951904,187.500000)">
+                <g>
                   <path
-                    id="g-svg-35"
+                    id="g-svg-34"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 214.9519052838329,187.5 L 214.9519052838329,187.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,193.301270,175)">
+                <g>
                   <path
-                    id="g-svg-36"
+                    id="g-svg-35"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 193.30127018922195,175 L 193.30127018922195,175"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,171.650635,162.500000)">
+                <g>
                   <path
-                    id="g-svg-37"
+                    id="g-svg-36"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 171.65063509461098,162.5 L 171.65063509461098,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
-                    id="g-svg-38"
+                    id="g-svg-37"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-33"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-32" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-39"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-40"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,150,150)">
+          <g id="g-svg-38" fill="none" class="axis-main-group">
+            <g id="g-svg-39" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-41"
+                  id="g-svg-40"
                   fill="none"
-                  x1="86.60254037844388"
-                  y1="50"
-                  x2="-12.99038105676658"
-                  y2="-7.499999999999999"
+                  x1="236.60254037844388"
+                  y1="200"
+                  x2="137.00961894323342"
+                  y2="142.5"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.433013,0.250000,-0.250000,0.433013,-12.990381,-7.500000)">
+                <g transform="matrix(0.433013,0.250000,-0.250000,0.433013,137.009613,142.500000)">
                   <path
-                    id="g-svg-43"
+                    id="g-svg-42"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-44"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-45"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-43" fill="none" class="axis-tick-group" />
+            <g id="g-svg-44" fill="none" class="axis-label-group">
               <g
-                id="g-svg-46"
+                id="g-svg-45"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,241.602539,191.339752)"
+                transform="matrix(1,0,0,1,241.602539,191.339752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-51"
+                    id="g-svg-50"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -445,14 +357,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-47"
+                id="g-svg-46"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,219.951904,178.839752)"
+                transform="matrix(1,0,0,1,219.951904,178.839752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-52"
+                    id="g-svg-51"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -468,14 +380,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-48"
+                id="g-svg-47"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,198.301270,166.339752)"
+                transform="matrix(1,0,0,1,198.301270,166.339752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-53"
+                    id="g-svg-52"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -491,14 +403,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-49"
+                id="g-svg-48"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,176.650635,153.839752)"
+                transform="matrix(1,0,0,1,176.650635,153.839752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-54"
+                    id="g-svg-53"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -514,14 +426,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-50"
+                id="g-svg-49"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,155,141.339752)"
+                transform="matrix(1,0,0,1,155,141.339752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-55"
+                    id="g-svg-54"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -539,14 +451,14 @@
             </g>
           </g>
           <g
-            id="g-svg-56"
+            id="g-svg-55"
             fill="none"
             transform="matrix(1,0,0,1,245.262787,205)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-57"
+                id="g-svg-56"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -565,146 +477,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-826" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-59"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-60"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-61"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,236.602539)">
+        <g id="g-svg-822" fill="none">
+          <g id="g-svg-57" fill="none" class="axis-grid-group">
+            <g id="g-svg-58" fill="none" class="axis-grid">
+              <g id="g-svg-59" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-63"
+                    id="g-svg-61"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,236.60254037844385 L 200,236.60254037844385"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,187.500000,214.951904)">
+                <g>
                   <path
-                    id="g-svg-64"
+                    id="g-svg-62"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 187.5,214.9519052838329 L 187.5,214.9519052838329"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,175,193.301270)">
+                <g>
                   <path
-                    id="g-svg-65"
+                    id="g-svg-63"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 175,193.30127018922192 L 175,193.30127018922192"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,171.650635)">
+                <g>
                   <path
-                    id="g-svg-66"
+                    id="g-svg-64"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,171.65063509461095 L 162.5,171.65063509461095"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
-                    id="g-svg-67"
+                    id="g-svg-65"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-62"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-60" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-68"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-69"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,150,150)">
+          <g id="g-svg-66" fill="none" class="axis-main-group">
+            <g id="g-svg-67" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-70"
+                  id="g-svg-68"
                   fill="none"
-                  x1="50"
-                  y1="86.60254037844385"
-                  x2="-7.500000000000002"
-                  y2="-12.990381056766578"
+                  x1="200"
+                  y1="236.60254037844385"
+                  x2="142.5"
+                  y2="137.00961894323342"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.250000,0.433013,-0.433013,0.250000,-7.500000,-12.990381)">
+                <g transform="matrix(0.250000,0.433013,-0.433013,0.250000,142.500000,137.009613)">
                   <path
-                    id="g-svg-72"
+                    id="g-svg-70"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-73"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-74"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-tick-group" />
+            <g id="g-svg-72" fill="none" class="axis-label-group">
               <g
-                id="g-svg-75"
+                id="g-svg-73"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,208.660248,231.602539)"
+                transform="matrix(1,0,0,1,208.660248,231.602539)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-80"
+                    id="g-svg-78"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -720,14 +591,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-76"
+                id="g-svg-74"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,196.160248,209.951904)"
+                transform="matrix(1,0,0,1,196.160248,209.951904)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-81"
+                    id="g-svg-79"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -743,14 +614,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-77"
+                id="g-svg-75"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,183.660248,188.301270)"
+                transform="matrix(1,0,0,1,183.660248,188.301270)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-82"
+                    id="g-svg-80"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -766,14 +637,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-78"
+                id="g-svg-76"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,171.160248,166.650635)"
+                transform="matrix(1,0,0,1,171.160248,166.650635)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-83"
+                    id="g-svg-81"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -789,14 +660,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-79"
+                id="g-svg-77"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,158.660248,145)"
+                transform="matrix(1,0,0,1,158.660248,145)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-84"
+                    id="g-svg-82"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -814,14 +685,14 @@
             </g>
           </g>
           <g
-            id="g-svg-85"
+            id="g-svg-83"
             fill="none"
             transform="matrix(1,0,0,1,205,245.262787)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-86"
+                id="g-svg-84"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -840,146 +711,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-827" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-88"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-89"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-90"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,250)">
+        <g id="g-svg-823" fill="none">
+          <g id="g-svg-85" fill="none" class="axis-grid-group">
+            <g id="g-svg-86" fill="none" class="axis-grid">
+              <g id="g-svg-87" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-92"
+                    id="g-svg-89"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,250 L 150,250"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,225)">
+                <g>
                   <path
-                    id="g-svg-93"
+                    id="g-svg-90"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,225 L 150,225"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,200)">
+                <g>
                   <path
-                    id="g-svg-94"
+                    id="g-svg-91"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,200 L 150,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,175)">
+                <g>
                   <path
-                    id="g-svg-95"
+                    id="g-svg-92"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,175 L 150,175"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
-                    id="g-svg-96"
+                    id="g-svg-93"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-91"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-88" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-97"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-98"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,150,150)">
+          <g id="g-svg-94" fill="none" class="axis-main-group">
+            <g id="g-svg-95" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-99"
+                  id="g-svg-96"
                   fill="none"
-                  x1="0"
-                  y1="100"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="150"
+                  y1="250"
+                  x2="150"
+                  y2="135"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,150,135)">
                   <path
-                    id="g-svg-101"
+                    id="g-svg-98"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-102"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-103"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-99" fill="none" class="axis-tick-group" />
+            <g id="g-svg-100" fill="none" class="axis-label-group">
               <g
-                id="g-svg-104"
+                id="g-svg-101"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,160,250)"
+                transform="matrix(1,0,0,1,160,250)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-109"
+                    id="g-svg-106"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -995,14 +825,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-105"
+                id="g-svg-102"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,160,225)"
+                transform="matrix(1,0,0,1,160,225)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-110"
+                    id="g-svg-107"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1018,14 +848,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-106"
+                id="g-svg-103"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,160,200)"
+                transform="matrix(1,0,0,1,160,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-111"
+                    id="g-svg-108"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1041,14 +871,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-107"
+                id="g-svg-104"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,160,175)"
+                transform="matrix(1,0,0,1,160,175)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-112"
+                    id="g-svg-109"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1064,14 +894,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-108"
+                id="g-svg-105"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,160,150)"
+                transform="matrix(1,0,0,1,160,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-113"
+                    id="g-svg-110"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1089,14 +919,14 @@
             </g>
           </g>
           <g
-            id="g-svg-114"
+            id="g-svg-111"
             fill="none"
             transform="matrix(1,0,0,1,150,260)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-115"
+                id="g-svg-112"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1115,146 +945,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-828" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-117"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-118"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-119"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,100,236.602539)">
+        <g id="g-svg-824" fill="none">
+          <g id="g-svg-113" fill="none" class="axis-grid-group">
+            <g id="g-svg-114" fill="none" class="axis-grid">
+              <g id="g-svg-115" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-121"
+                    id="g-svg-117"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100.00000000000003,236.60254037844388 L 100.00000000000003,236.60254037844388"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,112.500000,214.951904)">
+                <g>
                   <path
-                    id="g-svg-122"
+                    id="g-svg-118"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 112.50000000000003,214.9519052838329 L 112.50000000000003,214.9519052838329"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,193.301270)">
+                <g>
                   <path
-                    id="g-svg-123"
+                    id="g-svg-119"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125.00000000000001,193.30127018922195 L 125.00000000000001,193.30127018922195"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,137.500000,171.650635)">
+                <g>
                   <path
-                    id="g-svg-124"
+                    id="g-svg-120"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 137.5,171.65063509461098 L 137.5,171.65063509461098"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
-                    id="g-svg-125"
+                    id="g-svg-121"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-120"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-116" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-126"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-127"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,100,150)">
+          <g id="g-svg-122" fill="none" class="axis-main-group">
+            <g id="g-svg-123" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-128"
+                  id="g-svg-124"
                   fill="none"
-                  x1="0"
-                  y1="86.60254037844388"
-                  x2="57.49999999999997"
-                  y2="-12.99038105676658"
+                  x1="100.00000000000003"
+                  y1="236.60254037844388"
+                  x2="157.5"
+                  y2="137.00961894323342"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.250000,0.433013,-0.433013,-0.250000,57.500000,-12.990381)">
+                <g transform="matrix(-0.250000,0.433013,-0.433013,-0.250000,157.500000,137.009613)">
                   <path
-                    id="g-svg-130"
+                    id="g-svg-126"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-131"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-132"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-127" fill="none" class="axis-tick-group" />
+            <g id="g-svg-128" fill="none" class="axis-label-group">
               <g
-                id="g-svg-133"
+                id="g-svg-129"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,108.660255,241.602539)"
+                transform="matrix(1,0,0,1,108.660255,241.602539)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-138"
+                    id="g-svg-134"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1270,14 +1059,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-134"
+                id="g-svg-130"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,121.160255,219.951904)"
+                transform="matrix(1,0,0,1,121.160255,219.951904)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-139"
+                    id="g-svg-135"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1293,14 +1082,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-135"
+                id="g-svg-131"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,133.660248,198.301270)"
+                transform="matrix(1,0,0,1,133.660248,198.301270)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-140"
+                    id="g-svg-136"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1316,14 +1105,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-136"
+                id="g-svg-132"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,146.160248,176.650635)"
+                transform="matrix(1,0,0,1,146.160248,176.650635)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-141"
+                    id="g-svg-137"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1339,14 +1128,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-137"
+                id="g-svg-133"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,158.660248,155)"
+                transform="matrix(1,0,0,1,158.660248,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-142"
+                    id="g-svg-138"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1364,14 +1153,14 @@
             </g>
           </g>
           <g
-            id="g-svg-143"
+            id="g-svg-139"
             fill="none"
             transform="matrix(1,0,0,1,95,245.262787)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-144"
+                id="g-svg-140"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1390,146 +1179,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-829" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-146"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-147"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-148"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,63.397461,200)">
+        <g id="g-svg-825" fill="none">
+          <g id="g-svg-141" fill="none" class="axis-grid-group">
+            <g id="g-svg-142" fill="none" class="axis-grid">
+              <g id="g-svg-143" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-150"
+                    id="g-svg-145"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 63.39745962155612,200 L 63.39745962155612,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,85.048096,187.500000)">
+                <g>
                   <path
-                    id="g-svg-151"
+                    id="g-svg-146"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 85.0480947161671,187.5 L 85.0480947161671,187.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,106.698730,175)">
+                <g>
                   <path
-                    id="g-svg-152"
+                    id="g-svg-147"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 106.69872981077806,175 L 106.69872981077806,175"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,128.349365,162.500000)">
+                <g>
                   <path
-                    id="g-svg-153"
+                    id="g-svg-148"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 128.34936490538902,162.5 L 128.34936490538902,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
-                    id="g-svg-154"
+                    id="g-svg-149"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-149"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-144" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-155"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-156"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,63.397461,150)">
+          <g id="g-svg-150" fill="none" class="axis-main-group">
+            <g id="g-svg-151" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-157"
+                  id="g-svg-152"
                   fill="none"
-                  x1="0"
-                  y1="50"
-                  x2="99.59292143521046"
-                  y2="-7.499999999999999"
+                  x1="63.39745962155612"
+                  y1="200"
+                  x2="162.99038105676658"
+                  y2="142.5"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.433013,0.250000,-0.250000,-0.433013,99.592918,-7.500000)">
+                <g transform="matrix(-0.433013,0.250000,-0.250000,-0.433013,162.990387,142.500000)">
                   <path
-                    id="g-svg-159"
+                    id="g-svg-154"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-160"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-161"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-155" fill="none" class="axis-tick-group" />
+            <g id="g-svg-156" fill="none" class="axis-label-group">
               <g
-                id="g-svg-162"
+                id="g-svg-157"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,68.397461,208.660248)"
+                transform="matrix(1,0,0,1,68.397461,208.660248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-167"
+                    id="g-svg-162"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1545,14 +1293,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-163"
+                id="g-svg-158"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,90.048096,196.160248)"
+                transform="matrix(1,0,0,1,90.048096,196.160248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-168"
+                    id="g-svg-163"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1568,14 +1316,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-164"
+                id="g-svg-159"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,111.698730,183.660248)"
+                transform="matrix(1,0,0,1,111.698730,183.660248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-169"
+                    id="g-svg-164"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1591,14 +1339,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-165"
+                id="g-svg-160"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,133.349365,171.160248)"
+                transform="matrix(1,0,0,1,133.349365,171.160248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-170"
+                    id="g-svg-165"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1614,14 +1362,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-166"
+                id="g-svg-161"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,155,158.660248)"
+                transform="matrix(1,0,0,1,155,158.660248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-171"
+                    id="g-svg-166"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -1639,14 +1387,14 @@
             </g>
           </g>
           <g
-            id="g-svg-172"
+            id="g-svg-167"
             fill="none"
             transform="matrix(1,0,0,1,54.737206,205)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-173"
+                id="g-svg-168"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1665,146 +1413,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-830" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-175"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-176"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-177"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,50,150)">
+        <g id="g-svg-826" fill="none">
+          <g id="g-svg-169" fill="none" class="axis-grid-group">
+            <g id="g-svg-170" fill="none" class="axis-grid">
+              <g id="g-svg-171" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-179"
+                    id="g-svg-173"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 50,150 L 50,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,75,150)">
+                <g>
                   <path
-                    id="g-svg-180"
+                    id="g-svg-174"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 75,150 L 75,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,150)">
+                <g>
                   <path
-                    id="g-svg-181"
+                    id="g-svg-175"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 100,150 L 100,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,150)">
+                <g>
                   <path
-                    id="g-svg-182"
+                    id="g-svg-176"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 125,150 L 125,150"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
-                    id="g-svg-183"
+                    id="g-svg-177"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-178"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-172" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-184"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-185"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,50,150)">
+          <g id="g-svg-178" fill="none" class="axis-main-group">
+            <g id="g-svg-179" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-186"
+                  id="g-svg-180"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="115"
-                  y2="-1.83697019872103e-15"
+                  x1="50"
+                  y1="150"
+                  x2="165"
+                  y2="150"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.500000,0,-0,-0.500000,115,-0)">
+                <g transform="matrix(-0.500000,0,-0,-0.500000,165,150)">
                   <path
-                    id="g-svg-188"
+                    id="g-svg-182"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-189"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-190"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-183" fill="none" class="axis-tick-group" />
+            <g id="g-svg-184" fill="none" class="axis-label-group">
               <g
-                id="g-svg-191"
+                id="g-svg-185"
                 fill="none"
                 transform="matrix(1,0,0,1,50,160)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-196"
+                    id="g-svg-190"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1820,14 +1527,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-192"
+                id="g-svg-186"
                 fill="none"
                 transform="matrix(1,0,0,1,75,160)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-197"
+                    id="g-svg-191"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1843,14 +1550,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-193"
+                id="g-svg-187"
                 fill="none"
                 transform="matrix(1,0,0,1,100,160)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-198"
+                    id="g-svg-192"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1866,14 +1573,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-194"
+                id="g-svg-188"
                 fill="none"
                 transform="matrix(1,0,0,1,125,160)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-199"
+                    id="g-svg-193"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1889,14 +1596,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-195"
+                id="g-svg-189"
                 fill="none"
                 transform="matrix(1,0,0,1,150,160)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-200"
+                    id="g-svg-194"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="hanging"
                     paint-order="stroke"
@@ -1914,14 +1621,14 @@
             </g>
           </g>
           <g
-            id="g-svg-201"
+            id="g-svg-195"
             fill="none"
             transform="matrix(1,0,0,1,40,150)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-202"
+                id="g-svg-196"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -1940,146 +1647,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-831" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-204"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-205"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-206"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,63.397461,100)">
+        <g id="g-svg-827" fill="none">
+          <g id="g-svg-197" fill="none" class="axis-grid-group">
+            <g id="g-svg-198" fill="none" class="axis-grid">
+              <g id="g-svg-199" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-208"
+                    id="g-svg-201"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 63.39745962155612,100.00000000000003 L 63.39745962155612,100.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,85.048096,112.500000)">
+                <g>
                   <path
-                    id="g-svg-209"
+                    id="g-svg-202"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 85.0480947161671,112.50000000000003 L 85.0480947161671,112.50000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,106.698730,125)">
+                <g>
                   <path
-                    id="g-svg-210"
+                    id="g-svg-203"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 106.69872981077806,125.00000000000001 L 106.69872981077806,125.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,128.349365,137.500000)">
+                <g>
                   <path
-                    id="g-svg-211"
+                    id="g-svg-204"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 128.34936490538902,137.5 L 128.34936490538902,137.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
-                    id="g-svg-212"
+                    id="g-svg-205"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-207"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-200" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-213"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-214"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,63.397461,100)">
+          <g id="g-svg-206" fill="none" class="axis-main-group">
+            <g id="g-svg-207" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-215"
+                  id="g-svg-208"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="99.59292143521046"
-                  y2="57.499999999999964"
+                  x1="63.39745962155612"
+                  y1="100.00000000000003"
+                  x2="162.99038105676658"
+                  y2="157.5"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.433013,-0.250000,0.250000,-0.433013,99.592918,57.500000)">
+                <g transform="matrix(-0.433013,-0.250000,0.250000,-0.433013,162.990387,157.500000)">
                   <path
-                    id="g-svg-217"
+                    id="g-svg-210"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-218"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-219"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-211" fill="none" class="axis-tick-group" />
+            <g id="g-svg-212" fill="none" class="axis-label-group">
               <g
-                id="g-svg-220"
+                id="g-svg-213"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,58.397461,108.660255)"
+                transform="matrix(1,0,0,1,58.397461,108.660255)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-225"
+                    id="g-svg-218"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2095,14 +1761,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-221"
+                id="g-svg-214"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,80.048096,121.160255)"
+                transform="matrix(1,0,0,1,80.048096,121.160255)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-226"
+                    id="g-svg-219"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2118,14 +1784,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-222"
+                id="g-svg-215"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,101.698730,133.660248)"
+                transform="matrix(1,0,0,1,101.698730,133.660248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-227"
+                    id="g-svg-220"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2141,14 +1807,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-223"
+                id="g-svg-216"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,123.349365,146.160248)"
+                transform="matrix(1,0,0,1,123.349365,146.160248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-228"
+                    id="g-svg-221"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2164,14 +1830,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-224"
+                id="g-svg-217"
                 fill="none"
-                transform="matrix(0.866025,0.500000,-0.500000,0.866025,145,158.660248)"
+                transform="matrix(1,0,0,1,145,158.660248)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,0.500000,-0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-229"
+                    id="g-svg-222"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2189,14 +1855,14 @@
             </g>
           </g>
           <g
-            id="g-svg-230"
+            id="g-svg-223"
             fill="none"
             transform="matrix(1,0,0,1,54.737206,95)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-231"
+                id="g-svg-224"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -2215,146 +1881,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-832" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-233"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-234"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-235"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,100,63.397461)">
+        <g id="g-svg-828" fill="none">
+          <g id="g-svg-225" fill="none" class="axis-grid-group">
+            <g id="g-svg-226" fill="none" class="axis-grid">
+              <g id="g-svg-227" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-237"
+                    id="g-svg-229"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 99.99999999999996,63.39745962155615 L 99.99999999999996,63.39745962155615"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,112.500000,85.048096)">
+                <g>
                   <path
-                    id="g-svg-238"
+                    id="g-svg-230"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 112.49999999999997,85.04809471616711 L 112.49999999999997,85.04809471616711"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,125,106.698730)">
+                <g>
                   <path
-                    id="g-svg-239"
+                    id="g-svg-231"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 124.99999999999997,106.69872981077808 L 124.99999999999997,106.69872981077808"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,137.500000,128.349365)">
+                <g>
                   <path
-                    id="g-svg-240"
+                    id="g-svg-232"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 137.5,128.34936490538905 L 137.5,128.34936490538905"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
-                    id="g-svg-241"
+                    id="g-svg-233"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-236"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-228" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-242"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-243"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,100,63.397461)">
+          <g id="g-svg-234" fill="none" class="axis-main-group">
+            <g id="g-svg-235" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-244"
+                  id="g-svg-236"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="57.50000000000005"
-                  y2="99.59292143521043"
+                  x1="99.99999999999996"
+                  y1="63.39745962155615"
+                  x2="157.5"
+                  y2="162.99038105676658"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(-0.250000,-0.433013,0.433013,-0.250000,57.500000,99.592918)">
+                <g transform="matrix(-0.250000,-0.433013,0.433013,-0.250000,157.500000,162.990387)">
                   <path
-                    id="g-svg-246"
+                    id="g-svg-238"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-247"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-248"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-239" fill="none" class="axis-tick-group" />
+            <g id="g-svg-240" fill="none" class="axis-label-group">
               <g
-                id="g-svg-249"
+                id="g-svg-241"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,91.339745,68.397461)"
+                transform="matrix(1,0,0,1,91.339745,68.397461)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-254"
+                    id="g-svg-246"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2370,14 +1995,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-250"
+                id="g-svg-242"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,103.839745,90.048096)"
+                transform="matrix(1,0,0,1,103.839745,90.048096)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-255"
+                    id="g-svg-247"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2393,14 +2018,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-251"
+                id="g-svg-243"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,116.339745,111.698730)"
+                transform="matrix(1,0,0,1,116.339745,111.698730)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-256"
+                    id="g-svg-248"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2416,14 +2041,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-252"
+                id="g-svg-244"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,128.839752,133.349365)"
+                transform="matrix(1,0,0,1,128.839752,133.349365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-257"
+                    id="g-svg-249"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2439,14 +2064,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-253"
+                id="g-svg-245"
                 fill="none"
-                transform="matrix(0.500000,0.866025,-0.866025,0.500000,141.339752,155)"
+                transform="matrix(1,0,0,1,141.339752,155)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,0.866025,-0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-258"
+                    id="g-svg-250"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2464,14 +2089,14 @@
             </g>
           </g>
           <g
-            id="g-svg-259"
+            id="g-svg-251"
             fill="none"
             transform="matrix(1,0,0,1,95,54.737206)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-260"
+                id="g-svg-252"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -2490,146 +2115,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-833" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-262"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-263"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-264"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,150,50)">
+        <g id="g-svg-829" fill="none">
+          <g id="g-svg-253" fill="none" class="axis-grid-group">
+            <g id="g-svg-254" fill="none" class="axis-grid">
+              <g id="g-svg-255" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-266"
+                    id="g-svg-257"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 149.99999999999997,50 L 149.99999999999997,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,75)">
+                <g>
                   <path
-                    id="g-svg-267"
+                    id="g-svg-258"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 149.99999999999997,75 L 149.99999999999997,75"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,100)">
+                <g>
                   <path
-                    id="g-svg-268"
+                    id="g-svg-259"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,100 L 150,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,125)">
+                <g>
                   <path
-                    id="g-svg-269"
+                    id="g-svg-260"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,125 L 150,125"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
-                    id="g-svg-270"
+                    id="g-svg-261"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-265"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-256" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-271"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-272"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,150,50)">
+          <g id="g-svg-262" fill="none" class="axis-main-group">
+            <g id="g-svg-263" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-273"
+                  id="g-svg-264"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="3.416456247879443e-14"
-                  y2="115"
+                  x1="149.99999999999997"
+                  y1="50"
+                  x2="150"
+                  y2="165"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,0,115)">
+                <g transform="matrix(0,-0.500000,0.500000,0,150,165)">
                   <path
-                    id="g-svg-275"
+                    id="g-svg-266"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-276"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-277"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-267" fill="none" class="axis-tick-group" />
+            <g id="g-svg-268" fill="none" class="axis-label-group">
               <g
-                id="g-svg-278"
+                id="g-svg-269"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,140,50)"
+                transform="matrix(1,0,0,1,140,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-283"
+                    id="g-svg-274"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2645,14 +2229,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-279"
+                id="g-svg-270"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,140,75)"
+                transform="matrix(1,0,0,1,140,75)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-284"
+                    id="g-svg-275"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2668,14 +2252,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-280"
+                id="g-svg-271"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,140,100)"
+                transform="matrix(1,0,0,1,140,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-285"
+                    id="g-svg-276"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2691,14 +2275,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-281"
+                id="g-svg-272"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,140,125)"
+                transform="matrix(1,0,0,1,140,125)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-286"
+                    id="g-svg-277"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2714,14 +2298,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-282"
+                id="g-svg-273"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,140,150)"
+                transform="matrix(1,0,0,1,140,150)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
-                    id="g-svg-287"
+                    id="g-svg-278"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2739,14 +2323,14 @@
             </g>
           </g>
           <g
-            id="g-svg-288"
+            id="g-svg-279"
             fill="none"
             transform="matrix(1,0,0,1,150,40)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-289"
+                id="g-svg-280"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -2765,146 +2349,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-834" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-291"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-292"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-293"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,200,63.397461)">
+        <g id="g-svg-830" fill="none">
+          <g id="g-svg-281" fill="none" class="axis-grid-group">
+            <g id="g-svg-282" fill="none" class="axis-grid">
+              <g id="g-svg-283" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-295"
+                    id="g-svg-285"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 200,63.39745962155614 L 200,63.39745962155614"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,187.500000,85.048096)">
+                <g>
                   <path
-                    id="g-svg-296"
+                    id="g-svg-286"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 187.5,85.0480947161671 L 187.5,85.0480947161671"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,175,106.698730)">
+                <g>
                   <path
-                    id="g-svg-297"
+                    id="g-svg-287"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 175,106.69872981077808 L 175,106.69872981077808"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,162.500000,128.349365)">
+                <g>
                   <path
-                    id="g-svg-298"
+                    id="g-svg-288"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 162.5,128.34936490538905 L 162.5,128.34936490538905"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
-                    id="g-svg-299"
+                    id="g-svg-289"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-294"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-284" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-300"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-301"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,150,63.397461)">
+          <g id="g-svg-290" fill="none" class="axis-main-group">
+            <g id="g-svg-291" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-302"
+                  id="g-svg-292"
                   fill="none"
-                  x1="50"
-                  y1="0"
-                  x2="-7.500000000000002"
-                  y2="99.59292143521044"
+                  x1="200"
+                  y1="63.39745962155614"
+                  x2="142.5"
+                  y2="162.99038105676658"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.250000,-0.433013,0.433013,0.250000,-7.500000,99.592918)">
+                <g transform="matrix(0.250000,-0.433013,0.433013,0.250000,142.500000,162.990387)">
                   <path
-                    id="g-svg-304"
+                    id="g-svg-294"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-305"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-306"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-295" fill="none" class="axis-tick-group" />
+            <g id="g-svg-296" fill="none" class="axis-label-group">
               <g
-                id="g-svg-307"
+                id="g-svg-297"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,191.339752,58.397461)"
+                transform="matrix(1,0,0,1,191.339752,58.397461)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-312"
+                    id="g-svg-302"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2920,14 +2463,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-308"
+                id="g-svg-298"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,178.839752,80.048096)"
+                transform="matrix(1,0,0,1,178.839752,80.048096)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-313"
+                    id="g-svg-303"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2943,14 +2486,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-309"
+                id="g-svg-299"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,166.339752,101.698730)"
+                transform="matrix(1,0,0,1,166.339752,101.698730)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-314"
+                    id="g-svg-304"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2966,14 +2509,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-310"
+                id="g-svg-300"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,153.839752,123.349365)"
+                transform="matrix(1,0,0,1,153.839752,123.349365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-315"
+                    id="g-svg-305"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -2989,14 +2532,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-311"
+                id="g-svg-301"
                 fill="none"
-                transform="matrix(0.500000,-0.866025,0.866025,0.500000,141.339752,145)"
+                transform="matrix(1,0,0,1,141.339752,145)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.500000,-0.866025,0.866025,0.500000,0,0)">
                   <text
-                    id="g-svg-316"
+                    id="g-svg-306"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3014,14 +2557,14 @@
             </g>
           </g>
           <g
-            id="g-svg-317"
+            id="g-svg-307"
             fill="none"
             transform="matrix(1,0,0,1,205,54.737206)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-318"
+                id="g-svg-308"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
@@ -3040,146 +2583,105 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-835" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-320"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-321"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-322"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,236.602539,100)">
+        <g id="g-svg-831" fill="none">
+          <g id="g-svg-309" fill="none" class="axis-grid-group">
+            <g id="g-svg-310" fill="none" class="axis-grid">
+              <g id="g-svg-311" fill="none" class="grid-line-group">
+                <g>
                   <path
-                    id="g-svg-324"
+                    id="g-svg-313"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 236.60254037844385,99.99999999999996 L 236.60254037844385,99.99999999999996"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,214.951904,112.500000)">
+                <g>
                   <path
-                    id="g-svg-325"
+                    id="g-svg-314"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 214.9519052838329,112.49999999999997 L 214.9519052838329,112.49999999999997"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,193.301270,125)">
+                <g>
                   <path
-                    id="g-svg-326"
+                    id="g-svg-315"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 193.30127018922192,124.99999999999997 L 193.30127018922192,124.99999999999997"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,171.650635,137.500000)">
+                <g>
                   <path
-                    id="g-svg-327"
+                    id="g-svg-316"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 171.65063509461095,137.5 L 171.65063509461095,137.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,150,150)">
+                <g>
                   <path
-                    id="g-svg-328"
+                    id="g-svg-317"
                     fill="none"
                     class="grid-line"
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 150,150 L 150,150"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-323"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-312" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-329"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-330"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,150,100)">
+          <g id="g-svg-318" fill="none" class="axis-main-group">
+            <g id="g-svg-319" fill="none" class="axis-line-group">
+              <g>
                 <line
-                  id="g-svg-331"
+                  id="g-svg-320"
                   fill="none"
-                  x1="86.60254037844385"
-                  y1="0"
-                  x2="-12.990381056766577"
-                  y2="57.50000000000005"
+                  x1="236.60254037844385"
+                  y1="99.99999999999996"
+                  x2="137.00961894323342"
+                  y2="157.5"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
-                <g transform="matrix(0.433013,-0.250000,0.250000,0.433013,-12.990381,57.500000)">
+                <g transform="matrix(0.433013,-0.250000,0.250000,0.433013,137.009613,157.500000)">
                   <path
-                    id="g-svg-333"
+                    id="g-svg-322"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-334"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-335"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-323" fill="none" class="axis-tick-group" />
+            <g id="g-svg-324" fill="none" class="axis-label-group">
               <g
-                id="g-svg-336"
+                id="g-svg-325"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,231.602539,91.339745)"
+                transform="matrix(1,0,0,1,231.602539,91.339745)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-341"
+                    id="g-svg-330"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3195,14 +2697,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-337"
+                id="g-svg-326"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,209.951904,103.839745)"
+                transform="matrix(1,0,0,1,209.951904,103.839745)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-342"
+                    id="g-svg-331"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3218,14 +2720,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-338"
+                id="g-svg-327"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,188.301270,116.339745)"
+                transform="matrix(1,0,0,1,188.301270,116.339745)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-343"
+                    id="g-svg-332"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3241,14 +2743,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-339"
+                id="g-svg-328"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,166.650635,128.839752)"
+                transform="matrix(1,0,0,1,166.650635,128.839752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-344"
+                    id="g-svg-333"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3264,14 +2766,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-340"
+                id="g-svg-329"
                 fill="none"
-                transform="matrix(0.866025,-0.500000,0.500000,0.866025,145,141.339752)"
+                transform="matrix(1,0,0,1,145,141.339752)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(0.866025,-0.500000,0.500000,0.866025,0,0)">
                   <text
-                    id="g-svg-345"
+                    id="g-svg-334"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -3289,14 +2791,14 @@
             </g>
           </g>
           <g
-            id="g-svg-346"
+            id="g-svg-335"
             fill="none"
             transform="matrix(1,0,0,1,245.262787,95)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
-                id="g-svg-347"
+                id="g-svg-336"
                 fill="rgba(255,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
diff --git a/__tests__/integration/snapshots/AxisLinearVertical.svg b/__tests__/integration/snapshots/AxisLinearVertical.svg
index 159ac2909..7def2797b 100644
--- a/__tests__/integration/snapshots/AxisLinearVertical.svg
+++ b/__tests__/integration/snapshots/AxisLinearVertical.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-45"
-        fill="none"
-        width="600"
-        height="550"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-46" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,220,500)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-45" fill="none" width="600" height="550">
+        <g id="g-svg-46" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,10 +21,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,500 L 220,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,477.500000)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -53,10 +32,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,477.5 L 220,477.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,455)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -64,10 +43,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,455 L 220,455"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,432.500000)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -75,10 +54,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,432.5 L 220,432.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,410)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -86,10 +65,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,410 L 220,410"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,387.500000)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -97,10 +76,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,387.5 L 220,387.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,365)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -108,10 +87,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,365 L 220,365"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,342.500000)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -119,10 +98,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,342.5 L 220,342.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,320)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -130,10 +109,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,320 L 220,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,297.500000)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -141,10 +120,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,297.5 L 220,297.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,275)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -152,10 +131,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,275 L 220,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,252.500000)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -163,10 +142,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,252.49999999999997 L 220,252.49999999999997"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,230)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -174,10 +153,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,229.99999999999994 L 220,229.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,207.500000)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -185,10 +164,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,207.5 L 220,207.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,185)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -196,10 +175,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,184.99999999999994 L 220,184.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,162.500000)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -207,10 +186,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,162.5 L 220,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,140)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -218,10 +197,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,140 L 220,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,117.500000)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -229,10 +208,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,117.49999999999994 L 220,117.49999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,95)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -240,10 +219,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,95 L 220,95"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,72.500000)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -251,67 +230,46 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 220,72.49999999999994 L 220,72.49999999999994"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,220,50)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
-                  x1="0"
-                  y1="450"
-                  x2="-9.18485099360515e-16"
-                  y2="-15"
+                  x1="220"
+                  y1="500"
+                  x2="220"
+                  y2="35"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(128,0,128,1)"
                 />
-                <g transform="matrix(0,0.500000,-0.500000,0,-0,-15)">
+                <g transform="matrix(0,0.500000,-0.500000,0,220,35)">
                   <path
                     id="g-svg-29"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(128,0,128,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-30"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-30" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,220,500)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-51"
                     fill="none"
@@ -331,7 +289,7 @@
                 transform="matrix(1,0,0,1,220,477.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-52"
                     fill="none"
@@ -351,7 +309,7 @@
                 transform="matrix(1,0,0,1,220,455)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-53"
                     fill="none"
@@ -371,7 +329,7 @@
                 transform="matrix(1,0,0,1,220,432.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-54"
                     fill="none"
@@ -391,7 +349,7 @@
                 transform="matrix(1,0,0,1,220,410)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-55"
                     fill="none"
@@ -411,7 +369,7 @@
                 transform="matrix(1,0,0,1,220,387.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-56"
                     fill="none"
@@ -431,7 +389,7 @@
                 transform="matrix(1,0,0,1,220,365)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-57"
                     fill="none"
@@ -451,7 +409,7 @@
                 transform="matrix(1,0,0,1,220,342.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-58"
                     fill="none"
@@ -471,7 +429,7 @@
                 transform="matrix(1,0,0,1,220,320)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-59"
                     fill="none"
@@ -491,7 +449,7 @@
                 transform="matrix(1,0,0,1,220,297.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-60"
                     fill="none"
@@ -511,7 +469,7 @@
                 transform="matrix(1,0,0,1,220,275)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-61"
                     fill="none"
@@ -531,7 +489,7 @@
                 transform="matrix(1,0,0,1,220,252.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-62"
                     fill="none"
@@ -551,7 +509,7 @@
                 transform="matrix(1,0,0,1,220,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-63"
                     fill="none"
@@ -571,7 +529,7 @@
                 transform="matrix(1,0,0,1,220,207.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-64"
                     fill="none"
@@ -591,7 +549,7 @@
                 transform="matrix(1,0,0,1,220,185)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-65"
                     fill="none"
@@ -611,7 +569,7 @@
                 transform="matrix(1,0,0,1,220,162.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-66"
                     fill="none"
@@ -631,7 +589,7 @@
                 transform="matrix(1,0,0,1,220,140)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-67"
                     fill="none"
@@ -651,7 +609,7 @@
                 transform="matrix(1,0,0,1,220,117.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-68"
                     fill="none"
@@ -671,7 +629,7 @@
                 transform="matrix(1,0,0,1,220,95)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-69"
                     fill="none"
@@ -691,7 +649,7 @@
                 transform="matrix(1,0,0,1,220,72.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-70"
                     fill="none"
@@ -706,19 +664,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-71"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-71" fill="none" class="axis-label-group">
               <g
                 id="g-svg-72"
                 fill="none"
                 transform="matrix(1,0,0,1,240,500)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-92"
                     fill="rgba(255,0,0,1)"
@@ -744,7 +697,7 @@
                 transform="matrix(1,0,0,1,240,477.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-94"
                     fill="rgba(255,0,0,1)"
@@ -770,7 +723,7 @@
                 transform="matrix(1,0,0,1,240,455)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-96"
                     fill="rgba(255,0,0,1)"
@@ -796,7 +749,7 @@
                 transform="matrix(1,0,0,1,240,432.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-98"
                     fill="rgba(255,0,0,1)"
@@ -822,7 +775,7 @@
                 transform="matrix(1,0,0,1,240,410)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-100"
                     fill="rgba(255,0,0,1)"
@@ -848,7 +801,7 @@
                 transform="matrix(1,0,0,1,240,387.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-102"
                     fill="rgba(255,0,0,1)"
@@ -874,7 +827,7 @@
                 transform="matrix(1,0,0,1,240,365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-104"
                     fill="rgba(255,0,0,1)"
@@ -900,7 +853,7 @@
                 transform="matrix(1,0,0,1,240,342.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-106"
                     fill="rgba(255,0,0,1)"
@@ -926,7 +879,7 @@
                 transform="matrix(1,0,0,1,240,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-108"
                     fill="rgba(255,0,0,1)"
@@ -952,7 +905,7 @@
                 transform="matrix(1,0,0,1,240,297.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-110"
                     fill="rgba(255,0,0,1)"
@@ -978,7 +931,7 @@
                 transform="matrix(1,0,0,1,240,275)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-112"
                     fill="rgba(255,0,0,1)"
@@ -1004,7 +957,7 @@
                 transform="matrix(1,0,0,1,240,252.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-114"
                     fill="rgba(255,0,0,1)"
@@ -1030,7 +983,7 @@
                 transform="matrix(1,0,0,1,240,230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-116"
                     fill="rgba(255,0,0,1)"
@@ -1056,7 +1009,7 @@
                 transform="matrix(1,0,0,1,240,207.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-118"
                     fill="rgba(255,0,0,1)"
@@ -1082,7 +1035,7 @@
                 transform="matrix(1,0,0,1,240,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-120"
                     fill="rgba(255,0,0,1)"
@@ -1108,7 +1061,7 @@
                 transform="matrix(1,0,0,1,240,162.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-122"
                     fill="rgba(255,0,0,1)"
@@ -1134,7 +1087,7 @@
                 transform="matrix(1,0,0,1,240,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-124"
                     fill="rgba(255,0,0,1)"
@@ -1160,7 +1113,7 @@
                 transform="matrix(1,0,0,1,240,117.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-126"
                     fill="rgba(255,0,0,1)"
@@ -1186,7 +1139,7 @@
                 transform="matrix(1,0,0,1,240,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-128"
                     fill="rgba(255,0,0,1)"
@@ -1212,7 +1165,7 @@
                 transform="matrix(1,0,0,1,240,72.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-130"
                     fill="rgba(255,0,0,1)"
@@ -1234,33 +1187,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-132"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-132" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-47" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-133"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-134"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-135"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,550,50)">
+        <g id="g-svg-47" fill="none">
+          <g id="g-svg-133" fill="none" class="axis-grid-group">
+            <g id="g-svg-134" fill="none" class="axis-grid">
+              <g id="g-svg-135" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-137"
                     fill="none"
@@ -1268,10 +1201,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,50 L 550,50"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,72.500000)">
+                <g>
                   <path
                     id="g-svg-138"
                     fill="none"
@@ -1279,10 +1212,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,72.5 L 550,72.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,95)">
+                <g>
                   <path
                     id="g-svg-139"
                     fill="none"
@@ -1290,10 +1223,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,95 L 550,95"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,117.500000)">
+                <g>
                   <path
                     id="g-svg-140"
                     fill="none"
@@ -1301,10 +1234,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,117.50000000000001 L 550,117.50000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,140)">
+                <g>
                   <path
                     id="g-svg-141"
                     fill="none"
@@ -1312,10 +1245,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,140 L 550,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,162.500000)">
+                <g>
                   <path
                     id="g-svg-142"
                     fill="none"
@@ -1323,10 +1256,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,162.5 L 550,162.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,185)">
+                <g>
                   <path
                     id="g-svg-143"
                     fill="none"
@@ -1334,10 +1267,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,185.00000000000003 L 550,185.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,207.500000)">
+                <g>
                   <path
                     id="g-svg-144"
                     fill="none"
@@ -1345,10 +1278,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,207.50000000000003 L 550,207.50000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,230)">
+                <g>
                   <path
                     id="g-svg-145"
                     fill="none"
@@ -1356,10 +1289,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,230 L 550,230"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,252.500000)">
+                <g>
                   <path
                     id="g-svg-146"
                     fill="none"
@@ -1367,10 +1300,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,252.5 L 550,252.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,275)">
+                <g>
                   <path
                     id="g-svg-147"
                     fill="none"
@@ -1378,10 +1311,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,275 L 550,275"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,297.500000)">
+                <g>
                   <path
                     id="g-svg-148"
                     fill="none"
@@ -1389,10 +1322,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,297.5 L 550,297.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,320)">
+                <g>
                   <path
                     id="g-svg-149"
                     fill="none"
@@ -1400,10 +1333,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,320.00000000000006 L 550,320.00000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,342.500000)">
+                <g>
                   <path
                     id="g-svg-150"
                     fill="none"
@@ -1411,10 +1344,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,342.5 L 550,342.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,365)">
+                <g>
                   <path
                     id="g-svg-151"
                     fill="none"
@@ -1422,10 +1355,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,365.00000000000006 L 550,365.00000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,387.500000)">
+                <g>
                   <path
                     id="g-svg-152"
                     fill="none"
@@ -1433,10 +1366,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,387.5 L 550,387.5"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,410)">
+                <g>
                   <path
                     id="g-svg-153"
                     fill="none"
@@ -1444,10 +1377,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,410 L 550,410"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,432.500000)">
+                <g>
                   <path
                     id="g-svg-154"
                     fill="none"
@@ -1455,10 +1388,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,432.50000000000006 L 550,432.50000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,455)">
+                <g>
                   <path
                     id="g-svg-155"
                     fill="none"
@@ -1466,10 +1399,10 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,455 L 550,455"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,550,477.500000)">
+                <g>
                   <path
                     id="g-svg-156"
                     fill="none"
@@ -1477,73 +1410,52 @@
                     stroke="rgba(217,217,217,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,0"
+                    d="M 550,477.50000000000006 L 550,477.50000000000006"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-136"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-136" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-157"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-158"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,550,50)">
+          <g id="g-svg-157" fill="none" class="axis-main-group">
+            <g id="g-svg-158" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-159"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="465"
+                  x1="550"
+                  y1="50"
+                  x2="550"
+                  y2="515"
                   class="axis-line axis-line"
                   stroke-width="5"
                   stroke="rgba(128,0,128,1)"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,465)">
+                <g transform="matrix(0,-0.500000,0.500000,0,550,515)">
                   <path
                     id="g-svg-161"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="5"
                     stroke="rgba(128,0,128,1)"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-162"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-162" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-163"
                 fill="none"
                 transform="matrix(1,0,0,1,550,50)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-183"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1557,13 +1469,13 @@
                 transform="matrix(1,0,0,1,550,72.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-184"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1577,13 +1489,13 @@
                 transform="matrix(1,0,0,1,550,95)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-185"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1597,13 +1509,13 @@
                 transform="matrix(1,0,0,1,550,117.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-186"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1617,13 +1529,13 @@
                 transform="matrix(1,0,0,1,550,140)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-187"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1637,13 +1549,13 @@
                 transform="matrix(1,0,0,1,550,162.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-188"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1657,13 +1569,13 @@
                 transform="matrix(1,0,0,1,550,185)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-189"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1677,13 +1589,13 @@
                 transform="matrix(1,0,0,1,550,207.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-190"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1697,13 +1609,13 @@
                 transform="matrix(1,0,0,1,550,230)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-191"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1717,13 +1629,13 @@
                 transform="matrix(1,0,0,1,550,252.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-192"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1737,13 +1649,13 @@
                 transform="matrix(1,0,0,1,550,275)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-193"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1757,13 +1669,13 @@
                 transform="matrix(1,0,0,1,550,297.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-194"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1777,13 +1689,13 @@
                 transform="matrix(1,0,0,1,550,320)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-195"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1797,13 +1709,13 @@
                 transform="matrix(1,0,0,1,550,342.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-196"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1817,13 +1729,13 @@
                 transform="matrix(1,0,0,1,550,365)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-197"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1837,13 +1749,13 @@
                 transform="matrix(1,0,0,1,550,387.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-198"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1857,13 +1769,13 @@
                 transform="matrix(1,0,0,1,550,410)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-199"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1877,13 +1789,13 @@
                 transform="matrix(1,0,0,1,550,432.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-200"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1897,13 +1809,13 @@
                 transform="matrix(1,0,0,1,550,455)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-201"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1917,13 +1829,13 @@
                 transform="matrix(1,0,0,1,550,477.500000)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-10,0)">
+                <g>
                   <line
                     id="g-svg-202"
                     fill="none"
-                    x1="10"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-10"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -1932,19 +1844,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-203"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-203" fill="none" class="axis-label-group">
               <g
                 id="g-svg-204"
                 fill="none"
                 transform="matrix(1,0,0,1,530,50)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-224"
                     fill="rgba(255,0,0,1)"
@@ -1970,7 +1877,7 @@
                 transform="matrix(1,0,0,1,530,72.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-226"
                     fill="rgba(255,0,0,1)"
@@ -1996,7 +1903,7 @@
                 transform="matrix(1,0,0,1,530,95)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-228"
                     fill="rgba(255,0,0,1)"
@@ -2022,7 +1929,7 @@
                 transform="matrix(1,0,0,1,530,117.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-230"
                     fill="rgba(255,0,0,1)"
@@ -2048,7 +1955,7 @@
                 transform="matrix(1,0,0,1,530,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-232"
                     fill="rgba(255,0,0,1)"
@@ -2074,7 +1981,7 @@
                 transform="matrix(1,0,0,1,530,162.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-234"
                     fill="rgba(255,0,0,1)"
@@ -2100,7 +2007,7 @@
                 transform="matrix(1,0,0,1,530,185)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-236"
                     fill="rgba(255,0,0,1)"
@@ -2126,7 +2033,7 @@
                 transform="matrix(1,0,0,1,530,207.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-238"
                     fill="rgba(255,0,0,1)"
@@ -2152,7 +2059,7 @@
                 transform="matrix(1,0,0,1,530,230)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-240"
                     fill="rgba(255,0,0,1)"
@@ -2178,7 +2085,7 @@
                 transform="matrix(1,0,0,1,530,252.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-242"
                     fill="rgba(255,0,0,1)"
@@ -2204,7 +2111,7 @@
                 transform="matrix(1,0,0,1,530,275)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-244"
                     fill="rgba(255,0,0,1)"
@@ -2230,7 +2137,7 @@
                 transform="matrix(1,0,0,1,530,297.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-246"
                     fill="rgba(255,0,0,1)"
@@ -2256,7 +2163,7 @@
                 transform="matrix(1,0,0,1,530,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-248"
                     fill="rgba(255,0,0,1)"
@@ -2282,7 +2189,7 @@
                 transform="matrix(1,0,0,1,530,342.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-250"
                     fill="rgba(255,0,0,1)"
@@ -2308,7 +2215,7 @@
                 transform="matrix(1,0,0,1,530,365)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-252"
                     fill="rgba(255,0,0,1)"
@@ -2334,7 +2241,7 @@
                 transform="matrix(1,0,0,1,530,387.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-254"
                     fill="rgba(255,0,0,1)"
@@ -2360,7 +2267,7 @@
                 transform="matrix(1,0,0,1,530,410)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-256"
                     fill="rgba(255,0,0,1)"
@@ -2386,7 +2293,7 @@
                 transform="matrix(1,0,0,1,530,432.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-258"
                     fill="rgba(255,0,0,1)"
@@ -2412,7 +2319,7 @@
                 transform="matrix(1,0,0,1,530,455)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-260"
                     fill="rgba(255,0,0,1)"
@@ -2438,7 +2345,7 @@
                 transform="matrix(1,0,0,1,530,477.500000)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-262"
                     fill="rgba(255,0,0,1)"
@@ -2460,12 +2367,7 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-264"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-264" fill="none" class="axis-title-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/BugAxisLabelPosition.svg b/__tests__/integration/snapshots/BugAxisLabelPosition.svg
index 63650d14b..225857cdb 100644
--- a/__tests__/integration/snapshots/BugAxisLabelPosition.svg
+++ b/__tests__/integration/snapshots/BugAxisLabelPosition.svg
@@ -6,35 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-37"
-        fill="none"
-        width="800"
-        height="800"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-38" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,181.186157,181.186157)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-39" fill="none" width="800" height="800">
+        <g id="g-svg-40" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -42,11 +21,11 @@
                     stroke="rgba(27,30,35,1)"
                     stroke-width="0.5"
                     stroke-dasharray="0,0"
-                    d="M 437.62768962223436,218.81384481111718 A 218.81384481111718 218.81384481111718 0 0 1 218.81384481111718 437.62768962223436 A 218.81384481111718 218.81384481111718 0 0 1 218.81384481111712 -5.684341886080802e-14"
+                    d="M 618.8138448111172,400 A 218.81384481111718 218.81384481111718 0 0 1 400 618.8138448111172 A 218.81384481111718 218.81384481111718 0 0 1 399.99999999999994 181.18615518888276"
                     stroke-opacity="0.05"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,151.854095,151.854095)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -54,11 +33,11 @@
                     stroke="rgba(27,30,35,1)"
                     stroke-width="0.5"
                     stroke-dasharray="0,0"
-                    d="M 496.29179947133116,248.14589973566558 A 248.14589973566558 248.14589973566558 0 0 1 248.14589973566564 496.29179947133116 A 248.14589973566558 248.14589973566558 0 0 1 248.14589973566552 -2.842170943040401e-14"
+                    d="M 648.1458997356656,400 A 248.14589973566558 248.14589973566558 0 0 1 400.00000000000006 648.1458997356656 A 248.14589973566558 248.14589973566558 0 0 1 399.99999999999994 151.8541002643344"
                     stroke-opacity="0.05"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,129.346817,129.346817)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -66,11 +45,11 @@
                     stroke="rgba(27,30,35,1)"
                     stroke-width="0.5"
                     stroke-dasharray="0,0"
-                    d="M 541.3063541843055,270.65317709215276 A 270.65317709215276 270.65317709215276 0 0 1 270.6531770921528 541.3063541843055 A 270.65317709215276 270.65317709215276 0 0 1 270.6531770921527 0"
+                    d="M 670.6531770921528,400 A 270.65317709215276 270.65317709215276 0 0 1 400.00000000000006 670.6531770921528 A 270.65317709215276 270.65317709215276 0 0 1 399.99999999999994 129.34682290784724"
                     stroke-opacity="0.05"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,110.372307,110.372307)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,11 +57,11 @@
                     stroke="rgba(27,30,35,1)"
                     stroke-width="0.5"
                     stroke-dasharray="0,0"
-                    d="M 579.2553792444689,289.62768962223447 A 289.62768962223447 289.62768962223447 0 0 1 289.6276896222345 579.2553792444689 A 289.62768962223447 289.62768962223447 0 0 1 289.6276896222344 0"
+                    d="M 689.6276896222345,400 A 289.62768962223447 289.62768962223447 0 0 1 400.00000000000006 689.6276896222345 A 289.62768962223447 289.62768962223447 0 0 1 399.99999999999994 110.37231037776553"
                     stroke-opacity="0.05"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,93.655426,93.655426)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -90,11 +69,11 @@
                     stroke="rgba(27,30,35,1)"
                     stroke-width="0.5"
                     stroke-dasharray="0,0"
-                    d="M 612.6891414915576,306.3445707457788 A 306.3445707457788 306.3445707457788 0 0 1 306.34457074577887 612.6891414915576 A 306.3445707457788 306.3445707457788 0 0 1 306.34457074577875 -5.684341886080802e-14"
+                    d="M 706.3445707457788,400 A 306.3445707457788 306.3445707457788 0 0 1 400.00000000000006 706.3445707457788 A 306.3445707457788 306.3445707457788 0 0 1 399.99999999999994 93.65542925422113"
                     stroke-opacity="0.05"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,78.542213,78.542213)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -102,11 +81,11 @@
                     stroke="rgba(27,30,35,1)"
                     stroke-width="0.5"
                     stroke-dasharray="0,0"
-                    d="M 642.915573023743,321.4577865118715 A 321.4577865118715 321.4577865118715 0 0 1 321.4577865118716 642.915573023743 A 321.4577865118715 321.4577865118715 0 0 1 321.45778651187146 5.684341886080802e-14"
+                    d="M 721.4577865118715,400 A 321.4577865118715 321.4577865118715 0 0 1 400.00000000000006 721.4577865118715 A 321.4577865118715 321.4577865118715 0 0 1 399.99999999999994 78.54221348812854"
                     stroke-opacity="0.05"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,64.644180,64.644180)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -114,50 +93,34 @@
                     stroke="rgba(27,30,35,1)"
                     stroke-width="0.5"
                     stroke-dasharray="0,0"
-                    d="M 670.7116455010757,335.35582275053787 A 335.35582275053787 335.35582275053787 0 0 1 335.3558227505379 670.7116455010757 A 335.35582275053787 335.35582275053787 0 0 1 335.3558227505378 0"
+                    d="M 735.3558227505379,400 A 335.35582275053787 335.35582275053787 0 0 1 400.00000000000006 735.3558227505379 A 335.35582275053787 335.35582275053787 0 0 1 399.99999999999994 64.64417724946213"
                     stroke-opacity="0.05"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-12"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,400,60)">
+          <g id="g-svg-12" fill="none" class="axis-main-group">
+            <g id="g-svg-13" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-14"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="207"
+                  x1="400"
+                  y1="60"
+                  x2="400"
+                  y2="267"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(191,191,191,1)"
                   stroke-opacity="0.45"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,207)">
+                <g transform="matrix(0,-0.500000,0.500000,0,400,267)">
                   <path
                     id="g-svg-16"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(191,191,191,1)"
                     stroke-opacity="0.45"
@@ -165,25 +128,15 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-17"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-17" fill="none" class="axis-tick-group" />
+            <g id="g-svg-18" fill="none" class="axis-label-group">
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(1,0,0,1,409.620000,181.186157)"
+                transform="matrix(1,0,0,1,400,181.186157)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,12.660000,0)">
                   <text
                     id="g-svg-26"
                     fill="rgba(140,140,140,1)"
@@ -206,10 +159,10 @@
               <g
                 id="g-svg-20"
                 fill="none"
-                transform="matrix(1,0,0,1,412.560000,151.854095)"
+                transform="matrix(1,0,0,1,400,151.854095)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,16.580000,0)">
                   <text
                     id="g-svg-27"
                     fill="rgba(140,140,140,1)"
@@ -232,10 +185,10 @@
               <g
                 id="g-svg-21"
                 fill="none"
-                transform="matrix(1,0,0,1,412.500000,129.346817)"
+                transform="matrix(1,0,0,1,400,129.346817)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,16.500000,0)">
                   <text
                     id="g-svg-28"
                     fill="rgba(140,140,140,1)"
@@ -258,10 +211,10 @@
               <g
                 id="g-svg-22"
                 fill="none"
-                transform="matrix(1,0,0,1,413.400000,110.372307)"
+                transform="matrix(1,0,0,1,400,110.372307)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,17.700001,0)">
                   <text
                     id="g-svg-29"
                     fill="rgba(140,140,140,1)"
@@ -284,10 +237,10 @@
               <g
                 id="g-svg-23"
                 fill="none"
-                transform="matrix(1,0,0,1,413.340000,93.655426)"
+                transform="matrix(1,0,0,1,400,93.655426)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,17.620001,0)">
                   <text
                     id="g-svg-30"
                     fill="rgba(140,140,140,1)"
@@ -310,10 +263,10 @@
               <g
                 id="g-svg-24"
                 fill="none"
-                transform="matrix(1,0,0,1,413.520000,78.542213)"
+                transform="matrix(1,0,0,1,400,78.542213)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,17.860001,0)">
                   <text
                     id="g-svg-31"
                     fill="rgba(140,140,140,1)"
@@ -336,10 +289,10 @@
               <g
                 id="g-svg-25"
                 fill="none"
-                transform="matrix(1,0,0,1,413.460000,64.644180)"
+                transform="matrix(1,0,0,1,400,64.644180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,0,0,1,17.780001,0)">
                   <text
                     id="g-svg-32"
                     fill="rgba(140,140,140,1)"
@@ -364,10 +317,10 @@
           <g
             id="g-svg-33"
             fill="none"
-            transform="matrix(1,0,0,1,401,31.644180)"
+            transform="matrix(1,0,0,1,405.339996,31.644180)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-34"
                 fill="rgba(89,89,89,1)"
diff --git a/__tests__/integration/snapshots/BugAxisLabelRotate.svg b/__tests__/integration/snapshots/BugAxisLabelRotate.svg
index 6732f519e..9d646c835 100644
--- a/__tests__/integration/snapshots/BugAxisLabelRotate.svg
+++ b/__tests__/integration/snapshots/BugAxisLabelRotate.svg
@@ -6,53 +6,31 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-36"
-        fill="none"
-        width="400"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-37" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          />
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,320,30)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-35" fill="none" width="400" height="300">
+        <g id="g-svg-36" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group" />
+          <g id="g-svg-2" fill="none" class="axis-main-group">
+            <g id="g-svg-3" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-4"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="-9.18485099360515e-16"
-                  y2="183"
+                  x1="320"
+                  y1="30"
+                  x2="320"
+                  y2="213"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                   opacity="0"
                 />
-                <g transform="matrix(0,-0.500000,0.500000,0,-0,183)">
+                <g transform="matrix(0,-0.500000,0.500000,0,320,213)">
                   <path
                     id="g-svg-6"
                     fill="rgba(0,0,0,1)"
-                    d="M 20,20 L 0,10 L 20,0 L 10,10 L 20,20 Z"
-                    transform="translate(-10,-10)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
                     stroke-width="1"
                     stroke="rgba(0,0,0,1)"
                     opacity="0"
@@ -60,25 +38,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-7"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-7" fill="none" class="axis-tick-group">
               <g
                 id="g-svg-8"
                 fill="none"
                 transform="matrix(1,0,0,1,320,198)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-24"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -92,13 +65,13 @@
                 transform="matrix(1,0,0,1,320,186.800003)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-25"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -112,13 +85,13 @@
                 transform="matrix(1,0,0,1,320,175.600006)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-26"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -132,13 +105,13 @@
                 transform="matrix(1,0,0,1,320,164.399994)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-27"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -152,13 +125,13 @@
                 transform="matrix(1,0,0,1,320,153.199997)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-28"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -172,13 +145,13 @@
                 transform="matrix(1,0,0,1,320,142)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-29"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -192,13 +165,13 @@
                 transform="matrix(1,0,0,1,320,130.800003)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-30"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -212,13 +185,13 @@
                 transform="matrix(1,0,0,1,320,119.599998)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-31"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -232,13 +205,13 @@
                 transform="matrix(1,0,0,1,320,108.400002)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-32"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -252,13 +225,13 @@
                 transform="matrix(1,0,0,1,320,97.199997)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-33"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -272,13 +245,13 @@
                 transform="matrix(1,0,0,1,320,86)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-34"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -292,13 +265,13 @@
                 transform="matrix(1,0,0,1,320,74.800003)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-35"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -312,13 +285,13 @@
                 transform="matrix(1,0,0,1,320,63.599998)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-36"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -332,13 +305,13 @@
                 transform="matrix(1,0,0,1,320,52.400002)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-37"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -352,13 +325,13 @@
                 transform="matrix(1,0,0,1,320,41.200001)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -372,13 +345,13 @@
                 transform="matrix(1,0,0,1,320,30)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
                     id="g-svg-39"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -387,19 +360,14 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-40"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-40" fill="none" class="axis-label-group">
               <g
                 id="g-svg-41"
                 fill="none"
                 transform="matrix(1,0,0,1,311,198)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -425,7 +393,7 @@
                 transform="matrix(1,0,0,1,311,186.800003)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -451,7 +419,7 @@
                 transform="matrix(1,0,0,1,311,175.600006)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -477,7 +445,7 @@
                 transform="matrix(1,0,0,1,311,164.399994)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -503,7 +471,7 @@
                 transform="matrix(1,0,0,1,311,153.199997)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -529,7 +497,7 @@
                 transform="matrix(1,0,0,1,311,142)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -555,7 +523,7 @@
                 transform="matrix(1,0,0,1,311,130.800003)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -581,7 +549,7 @@
                 transform="matrix(1,0,0,1,311,119.599998)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -607,7 +575,7 @@
                 transform="matrix(1,0,0,1,311,108.400002)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -633,7 +601,7 @@
                 transform="matrix(1,0,0,1,311,97.199997)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -659,7 +627,7 @@
                 transform="matrix(1,0,0,1,311,86)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -685,7 +653,7 @@
                 transform="matrix(1,0,0,1,311,74.800003)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -711,7 +679,7 @@
                 transform="matrix(1,0,0,1,311,63.599998)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -737,7 +705,7 @@
                 transform="matrix(1,0,0,1,311,52.400002)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -763,7 +731,7 @@
                 transform="matrix(1,0,0,1,311,41.200001)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -789,7 +757,7 @@
                 transform="matrix(1,0,0,1,311,30)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(1,-0,0,1,0,0)">
                   <text
                     id="g-svg-72"
                     fill="rgba(0,0,0,1)"
@@ -817,7 +785,7 @@
             transform="matrix(1,0,0,1,310.320007,7)"
             class="axis-title-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-74"
                 fill="rgba(0,0,0,1)"
diff --git a/__tests__/integration/snapshots/BugAxisTitlePosition.svg b/__tests__/integration/snapshots/BugAxisTitlePosition.svg
index 0b3aecf9d..12d3b3a01 100644
--- a/__tests__/integration/snapshots/BugAxisTitlePosition.svg
+++ b/__tests__/integration/snapshots/BugAxisTitlePosition.svg
@@ -6,67 +6,50 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-150"
-        fill="none"
-        width="200"
-        height="450"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-151" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          />
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,145,30)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-150" fill="none" width="200" height="450">
+        <g id="g-svg-151" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group" />
+          <g id="g-svg-2" fill="none" class="axis-main-group">
+            <g id="g-svg-3" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-4"
                   fill="none"
-                  x1="0"
-                  y1="0"
-                  x2="0"
-                  y2="420"
+                  x1="145"
+                  y1="30"
+                  x2="145"
+                  y2="465"
                   class="axis-line axis-line"
                   stroke-width="1"
                   stroke="rgba(0,0,0,1)"
                 />
+                <g transform="matrix(0,-0.500000,0.500000,0,145,465)">
+                  <path
+                    id="g-svg-6"
+                    fill="rgba(0,0,0,1)"
+                    d="M 10,10 L -10,0 L 10,-10 L 0,0 L 10,10 Z"
+                    stroke-width="1"
+                    stroke="rgba(0,0,0,1)"
+                  />
+                </g>
               </g>
             </g>
-            <g
-              id="g-svg-5"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            >
+            <g id="g-svg-7" fill="none" class="axis-tick-group">
               <g
-                id="g-svg-6"
+                id="g-svg-8"
                 fill="none"
                 transform="matrix(1,0,0,1,145,396.442963)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
-                    id="g-svg-13"
+                    id="g-svg-15"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -75,18 +58,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-7"
+                id="g-svg-9"
                 fill="none"
                 transform="matrix(1,0,0,1,145,340.067108)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
-                    id="g-svg-14"
+                    id="g-svg-16"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -95,18 +78,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-8"
+                id="g-svg-10"
                 fill="none"
                 transform="matrix(1,0,0,1,145,283.691284)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
-                    id="g-svg-15"
+                    id="g-svg-17"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -115,18 +98,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-9"
+                id="g-svg-11"
                 fill="none"
                 transform="matrix(1,0,0,1,145,227.315430)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
-                    id="g-svg-16"
+                    id="g-svg-18"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -135,18 +118,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-10"
+                id="g-svg-12"
                 fill="none"
                 transform="matrix(1,0,0,1,145,170.939590)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
-                    id="g-svg-17"
+                    id="g-svg-19"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -155,18 +138,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-11"
+                id="g-svg-13"
                 fill="none"
                 transform="matrix(1,0,0,1,145,114.563759)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
-                    id="g-svg-18"
+                    id="g-svg-20"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -175,18 +158,18 @@
                 </g>
               </g>
               <g
-                id="g-svg-12"
+                id="g-svg-14"
                 fill="none"
                 transform="matrix(1,0,0,1,145,58.187920)"
                 class="axis-tick"
               >
-                <g transform="matrix(1,0,0,1,-5,0)">
+                <g>
                   <line
-                    id="g-svg-19"
+                    id="g-svg-21"
                     fill="none"
-                    x1="5"
+                    x1="0"
                     y1="0"
-                    x2="0"
+                    x2="-5"
                     y2="0"
                     class="axis-tick-item"
                     stroke-width="1"
@@ -195,21 +178,16 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-20"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-22" fill="none" class="axis-label-group">
               <g
-                id="g-svg-21"
+                id="g-svg-23"
                 fill="none"
                 transform="matrix(1,0,0,1,136,396.442963)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-28"
+                    id="g-svg-30"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -228,14 +206,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-22"
+                id="g-svg-24"
                 fill="none"
                 transform="matrix(1,0,0,1,136,340.067108)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-29"
+                    id="g-svg-31"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -254,14 +232,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-23"
+                id="g-svg-25"
                 fill="none"
                 transform="matrix(1,0,0,1,136,283.691284)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-30"
+                    id="g-svg-32"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -280,14 +258,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-24"
+                id="g-svg-26"
                 fill="none"
                 transform="matrix(1,0,0,1,136,227.315430)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-31"
+                    id="g-svg-33"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -306,14 +284,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-25"
+                id="g-svg-27"
                 fill="none"
                 transform="matrix(1,0,0,1,136,170.939590)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-32"
+                    id="g-svg-34"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -332,14 +310,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-26"
+                id="g-svg-28"
                 fill="none"
                 transform="matrix(1,0,0,1,136,114.563759)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-33"
+                    id="g-svg-35"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -358,14 +336,14 @@
                 </g>
               </g>
               <g
-                id="g-svg-27"
+                id="g-svg-29"
                 fill="none"
                 transform="matrix(1,0,0,1,136,58.187920)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-34"
+                    id="g-svg-36"
                     fill="rgba(0,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
@@ -386,14 +364,14 @@
             </g>
           </g>
           <g
-            id="g-svg-35"
+            id="g-svg-37"
             fill="none"
-            transform="matrix(1,0,0,1,89.320000,240)"
+            transform="matrix(1,0,0,1,100.820000,250)"
             class="axis-title-group"
           >
-            <g transform="matrix(0,-1,1,0,11.500001,0)">
+            <g transform="matrix(0,-1,1,0,0.500000,0.500000)">
               <text
-                id="g-svg-36"
+                id="g-svg-38"
                 fill="rgba(0,0,0,1)"
                 dominant-baseline="central"
                 paint-order="stroke"
diff --git a/__tests__/integration/snapshots/BugCategoryItemUpdate1.svg b/__tests__/integration/snapshots/BugCategoryItemUpdate1.svg
index 79b5ef9e6..eb8f043c3 100644
--- a/__tests__/integration/snapshots/BugCategoryItemUpdate1.svg
+++ b/__tests__/integration/snapshots/BugCategoryItemUpdate1.svg
@@ -6,23 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-84"
-        fill="none"
-        width="100"
-        height="20"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-85" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-84" fill="none" width="100" height="20">
+        <g id="g-svg-85" fill="none">
           <g
             id="g-svg-7"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-8"
                 fill="rgba(247,247,247,1)"
@@ -39,13 +32,10 @@
             transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <circle
                 id="g-svg-2"
                 fill="rgba(0,128,0,1)"
-                transform="translate(-6,-6)"
-                cx="6"
-                cy="6"
                 r="6"
                 class="legend-category-item-marker"
               />
@@ -57,7 +47,7 @@
             transform="matrix(1,0,0,1,15,11.500000)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-4"
                 fill="rgba(0,128,0,1)"
@@ -83,7 +73,7 @@
             transform="matrix(1,0,0,1,48.480000,11.500000)"
             class="legend-category-item-value-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-6"
                 fill="rgba(0,128,0,1)"
diff --git a/__tests__/integration/snapshots/BugCategoryItemsUpdate1.svg b/__tests__/integration/snapshots/BugCategoryItemsUpdate1.svg
index 9e9b16ae7..1f7910835 100644
--- a/__tests__/integration/snapshots/BugCategoryItemsUpdate1.svg
+++ b/__tests__/integration/snapshots/BugCategoryItemsUpdate1.svg
@@ -1,65 +1,43 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="400"
-  height="100"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-76-2">
-      <use href="#g-svg-76" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-76-2">
+      <use href="#g-svg-76" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-41" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-42"
-          fill="none"
-          width="400"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-41" fill="none">
+        <g id="g-svg-42" fill="none" width="400" height="100">
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
               clip-path="url(#clip-path-76-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-61"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-61" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="48.57142857142857"
                     height="23"
                   >
                     <g
                       id="g-svg-11"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-12"
                           fill="none"
@@ -74,16 +52,13 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-7"
                           fill="rgba(87,129,240,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -93,10 +68,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(0,128,0,1)"
@@ -120,25 +95,25 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-13"
                     fill="none"
-                    transform="matrix(1,0,0,1,58.571430,0)"
                     class="items-item"
+                    x="58.57142857142857"
+                    y="0"
                     width="48.57142857142857"
                     height="23"
+                    transform="matrix(1,0,0,1,58.571430,0)"
                   >
                     <g
                       id="g-svg-19"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-20"
                           fill="none"
@@ -153,16 +128,13 @@
                     <g
                       id="g-svg-14"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-15"
                           fill="rgba(112,210,160,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -172,10 +144,10 @@
                     <g
                       id="g-svg-16"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-17"
                           fill="rgba(0,128,0,1)"
@@ -199,25 +171,25 @@
                     <g
                       id="g-svg-18"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-21"
                     fill="none"
-                    transform="matrix(1,0,0,1,117.142860,0)"
                     class="items-item"
+                    x="117.14285714285714"
+                    y="0"
                     width="48.57142857142857"
                     height="23"
+                    transform="matrix(1,0,0,1,117.142860,0)"
                   >
                     <g
                       id="g-svg-27"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-28"
                           fill="none"
@@ -232,16 +204,13 @@
                     <g
                       id="g-svg-22"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-23"
                           fill="rgba(85,100,132,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -251,10 +220,10 @@
                     <g
                       id="g-svg-24"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-25"
                           fill="rgba(0,128,0,1)"
@@ -278,25 +247,25 @@
                     <g
                       id="g-svg-26"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-29"
                     fill="none"
-                    transform="matrix(1,0,0,1,175.714279,0)"
                     class="items-item"
+                    x="175.71428571428572"
+                    y="0"
                     width="48.57142857142857"
                     height="23"
+                    transform="matrix(1,0,0,1,175.714279,0)"
                   >
                     <g
                       id="g-svg-35"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-36"
                           fill="none"
@@ -311,16 +280,13 @@
                     <g
                       id="g-svg-30"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-31"
                           fill="rgba(239,183,69,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -330,10 +296,10 @@
                     <g
                       id="g-svg-32"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-33"
                           fill="rgba(0,128,0,1)"
@@ -357,25 +323,25 @@
                     <g
                       id="g-svg-34"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-37"
                     fill="none"
-                    transform="matrix(1,0,0,1,234.285721,0)"
                     class="items-item"
+                    x="234.28571428571428"
+                    y="0"
                     width="48.57142857142857"
                     height="23"
+                    transform="matrix(1,0,0,1,234.285721,0)"
                   >
                     <g
                       id="g-svg-43"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-44"
                           fill="none"
@@ -390,16 +356,13 @@
                     <g
                       id="g-svg-38"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-39"
                           fill="rgba(95,79,238,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -409,10 +372,10 @@
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-41"
                           fill="rgba(0,128,0,1)"
@@ -436,25 +399,25 @@
                     <g
                       id="g-svg-42"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-45"
                     fill="none"
-                    transform="matrix(1,0,0,1,292.857147,0)"
                     class="items-item"
+                    x="292.85714285714283"
+                    y="0"
                     width="48.57142857142857"
                     height="23"
+                    transform="matrix(1,0,0,1,292.857147,0)"
                   >
                     <g
                       id="g-svg-51"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-52"
                           fill="none"
@@ -469,16 +432,13 @@
                     <g
                       id="g-svg-46"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-47"
                           fill="rgba(87,129,240,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -488,10 +448,10 @@
                     <g
                       id="g-svg-48"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-49"
                           fill="rgba(0,128,0,1)"
@@ -515,25 +475,25 @@
                     <g
                       id="g-svg-50"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-53"
                     fill="none"
-                    transform="matrix(1,0,0,1,351.428558,0)"
                     class="items-item"
+                    x="351.4285714285714"
+                    y="0"
                     width="48.57142857142857"
                     height="23"
+                    transform="matrix(1,0,0,1,351.428558,0)"
                   >
                     <g
                       id="g-svg-59"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-60"
                           fill="none"
@@ -548,16 +508,13 @@
                     <g
                       id="g-svg-54"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-55"
                           fill="rgba(112,210,160,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -567,10 +524,10 @@
                     <g
                       id="g-svg-56"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-57"
                           fill="rgba(0,128,0,1)"
@@ -594,20 +551,14 @@
                     <g
                       id="g-svg-58"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-4"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="navigator-controller"
-            />
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-4" fill="none" class="navigator-controller" />
+            <g>
               <path
                 id="g-svg-76"
                 fill="none"
diff --git a/__tests__/integration/snapshots/BugCategoryItemsUpdate2.svg b/__tests__/integration/snapshots/BugCategoryItemsUpdate2.svg
index 7d04e653e..edcd3f332 100644
--- a/__tests__/integration/snapshots/BugCategoryItemsUpdate2.svg
+++ b/__tests__/integration/snapshots/BugCategoryItemsUpdate2.svg
@@ -1,65 +1,43 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="400"
-  height="100"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-77-2">
-      <use href="#g-svg-77" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-77-2">
+      <use href="#g-svg-77" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-77" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-78"
-          fill="none"
-          width="400"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-77" fill="none">
+        <g id="g-svg-78" fill="none" width="400" height="100">
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
               clip-path="url(#clip-path-77-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-61"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-61" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="108.33333333333333"
                     height="23"
                   >
                     <g
                       id="g-svg-11"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-12"
                           fill="none"
@@ -74,16 +52,13 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-7"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -93,10 +68,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(0,128,0,1)"
@@ -120,25 +95,25 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-13"
                     fill="none"
-                    transform="matrix(1,0,0,1,118.333336,0)"
                     class="items-item"
+                    x="118.33333333333333"
+                    y="0"
                     width="108.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,118.333336,0)"
                   >
                     <g
                       id="g-svg-19"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-20"
                           fill="none"
@@ -153,16 +128,13 @@
                     <g
                       id="g-svg-14"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-15"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -172,10 +144,10 @@
                     <g
                       id="g-svg-16"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-17"
                           fill="rgba(0,128,0,1)"
@@ -199,25 +171,25 @@
                     <g
                       id="g-svg-18"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-21"
                     fill="none"
-                    transform="matrix(1,0,0,1,236.666672,0)"
                     class="items-item"
+                    x="236.66666666666666"
+                    y="0"
                     width="108.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,236.666672,0)"
                   >
                     <g
                       id="g-svg-27"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-28"
                           fill="none"
@@ -232,16 +204,13 @@
                     <g
                       id="g-svg-22"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-23"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -251,10 +220,10 @@
                     <g
                       id="g-svg-24"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-25"
                           fill="rgba(0,128,0,1)"
@@ -278,25 +247,25 @@
                     <g
                       id="g-svg-26"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-29"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,28)"
                     class="items-item"
+                    x="0"
+                    y="28"
                     width="108.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,0,28)"
                   >
                     <g
                       id="g-svg-35"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-36"
                           fill="none"
@@ -311,16 +280,13 @@
                     <g
                       id="g-svg-30"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-31"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -330,10 +296,10 @@
                     <g
                       id="g-svg-32"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-33"
                           fill="rgba(0,128,0,1)"
@@ -357,25 +323,25 @@
                     <g
                       id="g-svg-34"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-37"
                     fill="none"
-                    transform="matrix(1,0,0,1,118.333336,28)"
                     class="items-item"
+                    x="118.33333333333333"
+                    y="28"
                     width="108.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,118.333336,28)"
                   >
                     <g
                       id="g-svg-43"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-44"
                           fill="none"
@@ -390,16 +356,13 @@
                     <g
                       id="g-svg-38"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-39"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -409,10 +372,10 @@
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-41"
                           fill="rgba(0,128,0,1)"
@@ -436,25 +399,25 @@
                     <g
                       id="g-svg-42"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-45"
                     fill="none"
-                    transform="matrix(1,0,0,1,236.666672,28)"
                     class="items-item"
+                    x="236.66666666666666"
+                    y="28"
                     width="108.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,236.666672,28)"
                   >
                     <g
                       id="g-svg-51"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-52"
                           fill="none"
@@ -469,16 +432,13 @@
                     <g
                       id="g-svg-46"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-47"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -488,10 +448,10 @@
                     <g
                       id="g-svg-48"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-49"
                           fill="rgba(0,128,0,1)"
@@ -515,32 +475,26 @@
                     <g
                       id="g-svg-50"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-74"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-74" fill="none" class="items-item-page">
                   <g
                     id="g-svg-53"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="108.33333333333333"
                     height="23"
                   >
                     <g
                       id="g-svg-59"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-60"
                           fill="none"
@@ -555,16 +509,13 @@
                     <g
                       id="g-svg-54"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-55"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -574,10 +525,10 @@
                     <g
                       id="g-svg-56"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-57"
                           fill="rgba(0,128,0,1)"
@@ -601,7 +552,6 @@
                     <g
                       id="g-svg-58"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
@@ -617,32 +567,30 @@
               <g
                 id="g-svg-78"
                 fill="none"
-                transform="matrix(-1,-0,0,-1,0,0)"
                 class="navigator-prev-btn-group"
+                transform="matrix(-1,-0,0,-1,0,0)"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
                     id="g-svg-79"
                     fill="rgba(0,0,0,1)"
                     class="navigator-prev-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
               <g
                 id="g-svg-80"
                 fill="none"
-                transform="matrix(1,0,0,1,40.040001,0)"
                 class="navigator-next-btn-group"
+                transform="matrix(1,0,0,1,40.040001,0)"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="rgba(0,0,0,1)"
                     class="navigator-next-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
@@ -652,7 +600,7 @@
                 transform="matrix(1,0,0,1,11,0)"
                 class="navigator-page-info-group"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-83"
                     fill="rgba(0,0,0,1)"
@@ -662,14 +610,13 @@
                     dx="0.5"
                     font-size="12"
                     text-anchor="left"
-                    visibility="visible"
                   >
                     1/2
                   </text>
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-77"
                 fill="none"
diff --git a/__tests__/integration/snapshots/BugCategoryItemsUpdate3.svg b/__tests__/integration/snapshots/BugCategoryItemsUpdate3.svg
index b3071e8a4..1f0de9897 100644
--- a/__tests__/integration/snapshots/BugCategoryItemsUpdate3.svg
+++ b/__tests__/integration/snapshots/BugCategoryItemsUpdate3.svg
@@ -1,66 +1,49 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="400"
-  height="100"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-77-2">
-      <use href="#g-svg-77" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-77-2">
+      <use href="#g-svg-77" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-84" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-84" fill="none">
         <g
           id="g-svg-85"
           fill="none"
           class="category-items-3"
           width="400"
           height="100"
-          transform="matrix(1,0,0,1,0,0)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
               clip-path="url(#clip-path-77-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-61"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-61" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="108.33333333333333"
                     height="23"
                   >
                     <g
                       id="g-svg-11"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-12"
                           fill="none"
@@ -75,16 +58,13 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-7"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -94,10 +74,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(0,128,0,1)"
@@ -121,25 +101,25 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-13"
                     fill="none"
-                    transform="matrix(1,0,0,1,118.333336,0)"
                     class="items-item"
+                    x="118.33333333333333"
+                    y="0"
                     width="108.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,118.333336,0)"
                   >
                     <g
                       id="g-svg-19"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-20"
                           fill="none"
@@ -154,16 +134,13 @@
                     <g
                       id="g-svg-14"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-15"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -173,10 +150,10 @@
                     <g
                       id="g-svg-16"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-17"
                           fill="rgba(0,128,0,1)"
@@ -200,25 +177,25 @@
                     <g
                       id="g-svg-18"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-21"
                     fill="none"
-                    transform="matrix(1,0,0,1,236.666672,0)"
                     class="items-item"
+                    x="236.66666666666666"
+                    y="0"
                     width="108.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,236.666672,0)"
                   >
                     <g
                       id="g-svg-27"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-28"
                           fill="none"
@@ -233,16 +210,13 @@
                     <g
                       id="g-svg-22"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-23"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -252,10 +226,10 @@
                     <g
                       id="g-svg-24"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-25"
                           fill="rgba(0,128,0,1)"
@@ -279,25 +253,25 @@
                     <g
                       id="g-svg-26"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-29"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,28)"
                     class="items-item"
+                    x="0"
+                    y="28"
                     width="108.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,0,28)"
                   >
                     <g
                       id="g-svg-35"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-36"
                           fill="none"
@@ -312,16 +286,13 @@
                     <g
                       id="g-svg-30"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-31"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -331,10 +302,10 @@
                     <g
                       id="g-svg-32"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-33"
                           fill="rgba(0,128,0,1)"
@@ -358,25 +329,25 @@
                     <g
                       id="g-svg-34"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-37"
                     fill="none"
-                    transform="matrix(1,0,0,1,118.333336,28)"
                     class="items-item"
+                    x="118.33333333333333"
+                    y="28"
                     width="108.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,118.333336,28)"
                   >
                     <g
                       id="g-svg-43"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-44"
                           fill="none"
@@ -391,16 +362,13 @@
                     <g
                       id="g-svg-38"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-39"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -410,10 +378,10 @@
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-41"
                           fill="rgba(0,128,0,1)"
@@ -437,25 +405,25 @@
                     <g
                       id="g-svg-42"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-45"
                     fill="none"
-                    transform="matrix(1,0,0,1,236.666672,28)"
                     class="items-item"
+                    x="236.66666666666666"
+                    y="28"
                     width="108.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,236.666672,28)"
                   >
                     <g
                       id="g-svg-51"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-52"
                           fill="none"
@@ -470,16 +438,13 @@
                     <g
                       id="g-svg-46"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-47"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -489,10 +454,10 @@
                     <g
                       id="g-svg-48"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-49"
                           fill="rgba(0,128,0,1)"
@@ -516,32 +481,26 @@
                     <g
                       id="g-svg-50"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-74"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-74" fill="none" class="items-item-page">
                   <g
                     id="g-svg-53"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="108.33333333333333"
                     height="23"
                   >
                     <g
                       id="g-svg-59"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-60"
                           fill="none"
@@ -556,16 +515,13 @@
                     <g
                       id="g-svg-54"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-55"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -575,10 +531,10 @@
                     <g
                       id="g-svg-56"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-57"
                           fill="rgba(0,128,0,1)"
@@ -602,7 +558,6 @@
                     <g
                       id="g-svg-58"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
@@ -618,32 +573,30 @@
               <g
                 id="g-svg-78"
                 fill="none"
-                transform="matrix(-1,-0,0,-1,0,0)"
                 class="navigator-prev-btn-group"
+                transform="matrix(-1,-0,0,-1,0,0)"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
                     id="g-svg-79"
                     fill="rgba(0,0,0,1)"
                     class="navigator-prev-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
               <g
                 id="g-svg-80"
                 fill="none"
-                transform="matrix(1,0,0,1,40.040001,0)"
                 class="navigator-next-btn-group"
+                transform="matrix(1,0,0,1,40.040001,0)"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="rgba(0,0,0,1)"
                     class="navigator-next-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
@@ -653,7 +606,7 @@
                 transform="matrix(1,0,0,1,11,0)"
                 class="navigator-page-info-group"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-83"
                     fill="rgba(0,0,0,1)"
@@ -663,14 +616,13 @@
                     dx="0.5"
                     font-size="12"
                     text-anchor="left"
-                    visibility="visible"
                   >
                     1/2
                   </text>
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-77"
                 fill="none"
diff --git a/__tests__/integration/snapshots/BugCategoryLabelDisplay.svg b/__tests__/integration/snapshots/BugCategoryLabelDisplay.svg
index f1d89bcb7..63a1762bb 100644
--- a/__tests__/integration/snapshots/BugCategoryLabelDisplay.svg
+++ b/__tests__/integration/snapshots/BugCategoryLabelDisplay.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="270"
-  height="40"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,27 @@
       <use href="#g-svg-31" transform="matrix(1,0,0,1,50,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-91" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-91" fill="none">
         <g
           id="g-svg-92"
           fill="none"
+          x="50"
+          y="0"
           width="220"
           height="40"
           transform="matrix(1,0,0,1,50,0)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="220"
               height="40"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +42,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   location
@@ -64,49 +62,34 @@
               fill="none"
               width="220"
               height="13"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-31-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-26"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-26" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="51.68000000000001"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +104,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +120,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +147,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,59.680000,0)"
                         class="items-item"
+                        x="59.68000000000001"
+                        y="0"
                         width="66.44"
                         height="23"
+                        transform="matrix(1,0,0,1,59.680000,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +180,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +196,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,26 +223,20 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-9"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-9" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
-                    d="M 0,0 l 126.1200003449122,0 l 0,23 l-126.1200003449122 0 z"
+                    d="M 0,0 l 126.12000030517578,0 l 0,23 l-126.12000030517578 0 z"
                     class="navigator-clip-path"
-                    width="126.1200003449122"
+                    width="126.12000030517578"
                     height="23"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/BugCategoryMarker.svg b/__tests__/integration/snapshots/BugCategoryMarker.svg
index 785985ed9..5d53a9c67 100644
--- a/__tests__/integration/snapshots/BugCategoryMarker.svg
+++ b/__tests__/integration/snapshots/BugCategoryMarker.svg
@@ -6,95 +6,57 @@
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-60-6">
-      <use href="#g-svg-60" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-60-6">
+      <use href="#g-svg-60" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-9"
-        fill="none"
-        width="150"
-        height="20"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-10"
-          fill="none"
-          width="565"
-          height="40"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-9" fill="none" width="150" height="20">
+        <g id="g-svg-10" fill="none" width="565" height="40">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="565"
               height="40"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="565"
               height="40"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-60-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-49"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-49" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="21.8"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="rgba(0,0,0,0)"
@@ -109,14 +71,14 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-6)">
+                          <g>
                             <path
                               id="g-svg-11"
                               fill="none"
-                              d="M 0,6 A 6 6 0 1 0 12 6 A 6 6 0 1 0 0 6 Z"
+                              d="M -6,0 A 6 6 0 1 0 6 0 A 6 6 0 1 0 -6 0 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(91,143,249,1)"
                               visibility="visible"
@@ -126,10 +88,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,13,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,13,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(0,0,0,1)"
@@ -154,25 +116,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,29.799999,0)"
                         class="items-item"
+                        x="29.8"
+                        y="0"
                         width="21.92"
                         height="23"
+                        transform="matrix(1,0,0,1,29.799999,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="rgba(0,0,0,0)"
@@ -187,14 +149,14 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-6)">
+                          <g>
                             <path
                               id="g-svg-19"
                               fill="none"
-                              d="M 0,6 A 6 6 0 1 0 12 6 A 6 6 0 1 0 0 6 Z"
+                              d="M -6,0 A 6 6 0 1 0 6 0 A 6 6 0 1 0 -6 0 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(90,216,166,1)"
                               visibility="visible"
@@ -204,10 +166,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,13,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,13,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(0,0,0,1)"
@@ -232,25 +194,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,59.720001,0)"
                         class="items-item"
+                        x="59.72"
+                        y="0"
                         width="21.8"
                         height="23"
+                        transform="matrix(1,0,0,1,59.720001,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="rgba(0,0,0,0)"
@@ -265,14 +227,14 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-6)">
+                          <g>
                             <path
                               id="g-svg-27"
                               fill="none"
-                              d="M 0,6 A 6 6 0 1 0 12 6 A 6 6 0 1 0 0 6 Z"
+                              d="M -6,0 A 6 6 0 1 0 6 0 A 6 6 0 1 0 -6 0 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(93,112,146,1)"
                               visibility="visible"
@@ -282,10 +244,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,13,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,13,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(0,0,0,1)"
@@ -310,25 +272,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,89.519997,0)"
                         class="items-item"
+                        x="89.52"
+                        y="0"
                         width="21.68"
                         height="23"
+                        transform="matrix(1,0,0,1,89.519997,0)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="rgba(0,0,0,0)"
@@ -343,14 +305,14 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-6)">
+                          <g>
                             <path
                               id="g-svg-35"
                               fill="none"
-                              d="M 0,6 A 6 6 0 1 0 12 6 A 6 6 0 1 0 0 6 Z"
+                              d="M -6,0 A 6 6 0 1 0 6 0 A 6 6 0 1 0 -6 0 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(246,189,22,1)"
                               visibility="visible"
@@ -360,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,13,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,13,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(0,0,0,1)"
@@ -388,25 +350,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,119.199997,0)"
                         class="items-item"
+                        x="119.19999999999999"
+                        y="0"
                         width="21.560000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,119.199997,0)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="rgba(0,0,0,0)"
@@ -421,14 +383,14 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-6)">
+                          <g>
                             <path
                               id="g-svg-43"
                               fill="none"
-                              d="M 0,6 A 6 6 0 1 0 12 6 A 6 6 0 1 0 0 6 Z"
+                              d="M -6,0 A 6 6 0 1 0 6 0 A 6 6 0 1 0 -6 0 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(111,94,249,1)"
                               visibility="visible"
@@ -438,10 +400,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,13,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,13,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(0,0,0,1)"
@@ -466,20 +428,14 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-8" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-60"
                     fill="none"
diff --git a/__tests__/integration/snapshots/BugCategoryUpdate1.svg b/__tests__/integration/snapshots/BugCategoryUpdate1.svg
index 68e1cb372..2ee674f07 100644
--- a/__tests__/integration/snapshots/BugCategoryUpdate1.svg
+++ b/__tests__/integration/snapshots/BugCategoryUpdate1.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="400"
-  height="130"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,86 +10,61 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-32" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-32" fill="none">
         <g
           id="g-svg-33"
           fill="none"
           class="category-legend"
+          y="30"
           width="400"
           height="100"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="400"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="400"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -104,16 +79,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -123,10 +95,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(0,128,0,1)"
@@ -150,25 +122,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -183,16 +155,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -202,10 +171,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(0,128,0,1)"
@@ -229,25 +198,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -262,16 +231,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -281,10 +247,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(0,128,0,1)"
@@ -308,25 +274,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -341,16 +307,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -360,10 +323,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(0,128,0,1)"
@@ -387,25 +350,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,189.320007,23)"
                         class="items-item"
+                        x="189.32"
+                        y="23"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,189.320007,23)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -420,16 +383,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -439,10 +399,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(0,128,0,1)"
@@ -466,32 +426,26 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-76"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-76" fill="none" class="items-item-page">
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="137.48000000000002"
                         height="23"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -506,16 +460,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -525,10 +476,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(0,128,0,1)"
@@ -552,25 +503,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,137.479996,0)"
                         class="items-item"
+                        x="137.48000000000002"
+                        y="0"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,137.479996,0)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -585,16 +536,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -604,10 +552,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(0,128,0,1)"
@@ -631,7 +579,6 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -647,32 +594,30 @@
                   <g
                     id="g-svg-82"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-83"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-84"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.040001,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.040001,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-85"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -682,7 +627,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-87"
                         fill="rgba(0,0,0,1)"
@@ -692,20 +637,19 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 313.2400073639552,0 l 0,46 l-313.2400073639552 0 z"
+                    d="M 0,0 l 313.2400073242188,0 l 0,46 l-313.2400073242188 0 z"
                     class="navigator-clip-path"
-                    width="313.2400073639552"
+                    width="313.2400073242188"
                     height="46"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/BugCategoryUpdate2.svg b/__tests__/integration/snapshots/BugCategoryUpdate2.svg
index c9748fd52..3f980eb73 100644
--- a/__tests__/integration/snapshots/BugCategoryUpdate2.svg
+++ b/__tests__/integration/snapshots/BugCategoryUpdate2.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="600"
-  height="130"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-80" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-88" fill="none">
         <g
           id="g-svg-89"
           fill="none"
+          y="30"
           width="600"
           height="100"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="600"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="600"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-80-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,215.759995,0)"
                         class="items-item"
+                        x="215.76"
+                        y="0"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,215.759995,0)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +425,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,123.919998,23)"
                         class="items-item"
+                        x="123.92000000000002"
+                        y="23"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,123.919998,23)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +458,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +474,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,25 +501,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,261.399994,23)"
                         class="items-item"
+                        x="261.40000000000003"
+                        y="23"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,261.399994,23)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -577,16 +534,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -596,10 +550,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -623,26 +577,20 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-8" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
-                    d="M 0,0 l 405.07999454657227,0 l 0,46 l-405.07999454657227 0 z"
+                    d="M 0,0 l 405.0799945068359,0 l 0,46 l-405.0799945068359 0 z"
                     class="navigator-clip-path"
-                    width="405.07999454657227"
+                    width="405.0799945068359"
                     height="46"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/BugCategoryUpdate3.svg b/__tests__/integration/snapshots/BugCategoryUpdate3.svg
index 9cbd20e8e..f0df85e5c 100644
--- a/__tests__/integration/snapshots/BugCategoryUpdate3.svg
+++ b/__tests__/integration/snapshots/BugCategoryUpdate3.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="400"
-  height="100"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-83" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-81" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-82"
-          fill="none"
-          height="100"
-          width="400"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-81" fill="none">
+        <g id="g-svg-82" fill="none" height="100" width="400">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="400"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="400"
               height="73"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-83-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="115"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,115,0)"
                         class="items-item"
+                        x="115"
+                        y="0"
                         width="115"
                         height="23"
+                        transform="matrix(1,0,0,1,115,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,230,0)"
                         class="items-item"
+                        x="230"
+                        y="0"
                         width="115"
                         height="23"
+                        transform="matrix(1,0,0,1,230,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,32 +291,26 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-73"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-73" fill="none" class="items-item-page">
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="115"
                         height="23"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -365,16 +325,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -384,10 +341,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -411,25 +368,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,115,0)"
                         class="items-item"
+                        x="115"
+                        y="0"
                         width="115"
                         height="23"
+                        transform="matrix(1,0,0,1,115,0)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -444,16 +401,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -463,10 +417,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -490,25 +444,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,230,0)"
                         class="items-item"
+                        x="230"
+                        y="0"
                         width="115"
                         height="23"
+                        transform="matrix(1,0,0,1,230,0)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -523,16 +477,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -542,10 +493,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -569,32 +520,26 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-80"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-80" fill="none" class="items-item-page">
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="115"
                         height="23"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -609,16 +554,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -628,10 +570,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -655,7 +597,6 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -671,32 +612,30 @@
                   <g
                     id="g-svg-84"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-85"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-86"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.279999,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.279999,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-87"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -706,7 +645,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-89"
                         fill="rgba(0,0,0,1)"
@@ -716,14 +655,13 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/3
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-83"
                     fill="none"
diff --git a/__tests__/integration/snapshots/BugCategoryUpdate4.svg b/__tests__/integration/snapshots/BugCategoryUpdate4.svg
index 017e14f76..e5144da26 100644
--- a/__tests__/integration/snapshots/BugCategoryUpdate4.svg
+++ b/__tests__/integration/snapshots/BugCategoryUpdate4.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="400"
-  height="100"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-83" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-90" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-91"
-          fill="none"
-          height="100"
-          width="400"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-90" fill="none">
+        <g id="g-svg-91" fill="none" height="100" width="400">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="400"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="400"
               height="73"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-83-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="115"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,115,0)"
                         class="items-item"
+                        x="115"
+                        y="0"
                         width="115"
                         height="23"
+                        transform="matrix(1,0,0,1,115,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,230,0)"
                         class="items-item"
+                        x="230"
+                        y="0"
                         width="115"
                         height="23"
+                        transform="matrix(1,0,0,1,230,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,32 +291,26 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-73"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-73" fill="none" class="items-item-page">
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="115"
                         height="23"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -365,16 +325,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -384,10 +341,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -411,25 +368,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,115,0)"
                         class="items-item"
+                        x="115"
+                        y="0"
                         width="115"
                         height="23"
+                        transform="matrix(1,0,0,1,115,0)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -444,16 +401,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -463,10 +417,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -490,25 +444,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,230,0)"
                         class="items-item"
+                        x="230"
+                        y="0"
                         width="115"
                         height="23"
+                        transform="matrix(1,0,0,1,230,0)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -523,16 +477,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -542,10 +493,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -569,32 +520,26 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-80"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-80" fill="none" class="items-item-page">
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="115"
                         height="23"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -609,16 +554,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -628,10 +570,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -655,7 +597,6 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -671,32 +612,30 @@
                   <g
                     id="g-svg-84"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-85"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-86"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.279999,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.279999,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-87"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -706,7 +645,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-89"
                         fill="rgba(0,0,0,1)"
@@ -716,14 +655,13 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/3
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-83"
                     fill="none"
diff --git a/__tests__/integration/snapshots/BugCategoryUpdate5.svg b/__tests__/integration/snapshots/BugCategoryUpdate5.svg
index 1a3a6843c..339153ec3 100644
--- a/__tests__/integration/snapshots/BugCategoryUpdate5.svg
+++ b/__tests__/integration/snapshots/BugCategoryUpdate5.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="400"
-  height="100"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-83" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-90" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-91"
-          fill="none"
-          height="100"
-          width="400"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-90" fill="none">
+        <g id="g-svg-91" fill="none" height="100" width="400">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="400"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="400"
               height="73"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-83-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="115"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(0,0,0,1)"
@@ -168,25 +140,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,115,0)"
                         class="items-item"
+                        x="115"
+                        y="0"
                         width="115"
                         height="23"
+                        transform="matrix(1,0,0,1,115,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -201,16 +173,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -220,10 +189,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(0,0,0,1)"
@@ -248,25 +217,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,230,0)"
                         class="items-item"
+                        x="230"
+                        y="0"
                         width="115"
                         height="23"
+                        transform="matrix(1,0,0,1,230,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -281,16 +250,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -300,10 +266,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(0,0,0,1)"
@@ -328,32 +294,26 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-73"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-73" fill="none" class="items-item-page">
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="115"
                         height="23"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -368,16 +328,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -387,10 +344,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(0,0,0,1)"
@@ -415,25 +372,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,115,0)"
                         class="items-item"
+                        x="115"
+                        y="0"
                         width="115"
                         height="23"
+                        transform="matrix(1,0,0,1,115,0)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -448,16 +405,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -467,10 +421,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(0,0,0,1)"
@@ -495,25 +449,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,230,0)"
                         class="items-item"
+                        x="230"
+                        y="0"
                         width="115"
                         height="23"
+                        transform="matrix(1,0,0,1,230,0)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -528,16 +482,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -547,10 +498,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(0,0,0,1)"
@@ -575,32 +526,26 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-80"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-80" fill="none" class="items-item-page">
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="115"
                         height="23"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -615,16 +560,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -634,10 +576,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(0,0,0,1)"
@@ -662,7 +604,6 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -678,32 +619,30 @@
                   <g
                     id="g-svg-84"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-85"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-86"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.279999,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.279999,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-87"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -713,7 +652,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-89"
                         fill="rgba(0,0,0,1)"
@@ -723,14 +662,13 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/3
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-83"
                     fill="none"
diff --git a/__tests__/integration/snapshots/BugCategoryUpdate6.svg b/__tests__/integration/snapshots/BugCategoryUpdate6.svg
index 33bef47ab..fa4930ef3 100644
--- a/__tests__/integration/snapshots/BugCategoryUpdate6.svg
+++ b/__tests__/integration/snapshots/BugCategoryUpdate6.svg
@@ -1,94 +1,62 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="725"
-  height="40"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-40-6">
-      <use href="#g-svg-40" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-40-6">
+      <use href="#g-svg-40" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-90" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-91"
-          fill="none"
-          width="725"
-          height="40"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-90" fill="none">
+        <g id="g-svg-91" fill="none" width="725" height="40">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="725"
               height="40"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="725"
               height="40"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-40-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-33"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-33" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="52.400000119209295"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="rgba(0,0,0,0)"
@@ -103,16 +71,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.666667,0,0,0.666667,4,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.666667,0,0,0.666667,4,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(255,0,0,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +87,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,13,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,13,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(0,0,0,1)"
@@ -150,25 +115,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,60.400002,0)"
                         class="items-item"
+                        x="60.400000119209295"
+                        y="0"
                         width="70.88000011920929"
                         height="23"
+                        transform="matrix(1,0,0,1,60.400002,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="rgba(0,0,0,0)"
@@ -183,16 +148,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.666667,0,0,0.666667,4,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.666667,0,0,0.666667,4,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(255,0,0,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -202,10 +164,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,13,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,13,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(0,0,0,1)"
@@ -230,25 +192,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,139.279999,0)"
                         class="items-item"
+                        x="139.28000023841858"
+                        y="0"
                         width="62.84000011920929"
                         height="23"
+                        transform="matrix(1,0,0,1,139.279999,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="rgba(0,0,0,0)"
@@ -263,16 +225,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.666667,0,0,0.666667,4,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.666667,0,0,0.666667,4,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(255,0,0,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -282,10 +241,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,13,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,13,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(0,0,0,1)"
@@ -310,20 +269,14 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-8" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-40"
                     fill="none"
diff --git a/__tests__/integration/snapshots/BugCategoryWithShape1.svg b/__tests__/integration/snapshots/BugCategoryWithShape1.svg
index b261a77b7..d918f1bc7 100644
--- a/__tests__/integration/snapshots/BugCategoryWithShape1.svg
+++ b/__tests__/integration/snapshots/BugCategoryWithShape1.svg
@@ -10,14 +10,16 @@
       <use href="#g-svg-122" transform="matrix(1,0,0,1,50,50)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-31" fill="none">
+        <g>
           <path
             id="g-svg-32"
             fill="none"
-            d="M 0,0 l 300,0 l 0,65 l-300 0 z"
+            d="M 50,50 l 300,0 l 0,65 l-300 0 z"
+            x="50"
+            y="50"
             width="300"
             height="65"
             stroke="rgba(255,0,0,1)"
@@ -25,79 +27,55 @@
           <g
             id="g-svg-33"
             fill="none"
+            x="50"
+            y="50"
             width="300"
             height="65"
-            transform="matrix(1,0,0,1,0,0)"
+            transform="matrix(1,0,0,1,50,50)"
           >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="300"
                 height="65"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               />
             </g>
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-items-group"
-            >
+            <g id="g-svg-3" fill="none" class="legend-items-group">
               <g
                 id="g-svg-4"
                 fill="none"
                 width="300"
                 height="65"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-5"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-6"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-122-6)"
                   >
-                    <g
-                      id="g-svg-7"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-99"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-7" fill="none" class="navigator-play-window">
+                      <g id="g-svg-99" fill="none" class="items-item-page">
                         <g
                           id="g-svg-9"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="96.96000000000001"
                           height="23"
                         >
                           <g
                             id="g-svg-16"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-17"
                                 fill="none"
@@ -112,16 +90,13 @@
                           <g
                             id="g-svg-10"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-11"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -131,10 +106,10 @@
                           <g
                             id="g-svg-12"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-13"
                                 fill="rgba(100,100,100,1)"
@@ -158,10 +133,10 @@
                           <g
                             id="g-svg-14"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.480000,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.480000,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-15"
                                 fill="rgba(100,100,100,1)"
@@ -186,18 +161,19 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(1,0,0,1,96.959999,0)"
                           class="items-item"
+                          x="96.96000000000001"
+                          y="0"
                           width="93.12"
                           height="23"
+                          transform="matrix(1,0,0,1,96.959999,0)"
                         >
                           <g
                             id="g-svg-25"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-26"
                                 fill="none"
@@ -212,16 +188,13 @@
                           <g
                             id="g-svg-19"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-20"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -231,10 +204,10 @@
                           <g
                             id="g-svg-21"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-22"
                                 fill="rgba(100,100,100,1)"
@@ -258,10 +231,10 @@
                           <g
                             id="g-svg-23"
                             fill="none"
-                            transform="matrix(1,0,0,1,51.560001,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,51.560001,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-24"
                                 fill="rgba(100,100,100,1)"
@@ -286,18 +259,19 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="96.48000030517579"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-34"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-35"
                                 fill="none"
@@ -312,16 +286,13 @@
                           <g
                             id="g-svg-28"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-29"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -331,10 +302,10 @@
                           <g
                             id="g-svg-30"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-31"
                                 fill="rgba(100,100,100,1)"
@@ -358,10 +329,10 @@
                           <g
                             id="g-svg-32"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.240002,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.240002,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-33"
                                 fill="rgba(100,100,100,1)"
@@ -386,18 +357,19 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,96.480003,23)"
                           class="items-item"
+                          x="96.48000030517579"
+                          y="23"
                           width="96.96000000000001"
                           height="23"
+                          transform="matrix(1,0,0,1,96.480003,23)"
                         >
                           <g
                             id="g-svg-43"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-44"
                                 fill="none"
@@ -412,16 +384,13 @@
                           <g
                             id="g-svg-37"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-38"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -431,10 +400,10 @@
                           <g
                             id="g-svg-39"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-40"
                                 fill="rgba(100,100,100,1)"
@@ -458,10 +427,10 @@
                           <g
                             id="g-svg-41"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.480000,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.480000,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-42"
                                 fill="rgba(100,100,100,1)"
@@ -484,27 +453,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-108"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-108" fill="none" class="items-item-page">
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="97.44"
                           height="23"
                         >
                           <g
                             id="g-svg-52"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-53"
                                 fill="none"
@@ -519,16 +483,13 @@
                           <g
                             id="g-svg-46"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-47"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -538,10 +499,10 @@
                           <g
                             id="g-svg-48"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-49"
                                 fill="rgba(100,100,100,1)"
@@ -565,10 +526,10 @@
                           <g
                             id="g-svg-50"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.720001,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.720001,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-51"
                                 fill="rgba(100,100,100,1)"
@@ -593,18 +554,19 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.440002,0)"
                           class="items-item"
+                          x="97.44"
+                          y="0"
                           width="96.72000000000003"
                           height="23"
+                          transform="matrix(1,0,0,1,97.440002,0)"
                         >
                           <g
                             id="g-svg-61"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-62"
                                 fill="none"
@@ -619,16 +581,13 @@
                           <g
                             id="g-svg-55"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-56"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -638,10 +597,10 @@
                           <g
                             id="g-svg-57"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-58"
                                 fill="rgba(100,100,100,1)"
@@ -665,10 +624,10 @@
                           <g
                             id="g-svg-59"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.360001,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.360001,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-60"
                                 fill="rgba(100,100,100,1)"
@@ -693,18 +652,19 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="97.20000091552734"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-70"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-71"
                                 fill="none"
@@ -719,16 +679,13 @@
                           <g
                             id="g-svg-64"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-65"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -738,10 +695,10 @@
                           <g
                             id="g-svg-66"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-67"
                                 fill="rgba(100,100,100,1)"
@@ -765,10 +722,10 @@
                           <g
                             id="g-svg-68"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.600002,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.600002,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-69"
                                 fill="rgba(100,100,100,1)"
@@ -793,18 +750,19 @@
                         <g
                           id="g-svg-72"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.200005,23)"
                           class="items-item"
+                          x="97.20000091552734"
+                          y="23"
                           width="95.52000076293945"
                           height="23"
+                          transform="matrix(1,0,0,1,97.200005,23)"
                         >
                           <g
                             id="g-svg-79"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-80"
                                 fill="none"
@@ -819,16 +777,13 @@
                           <g
                             id="g-svg-73"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-74"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -838,10 +793,10 @@
                           <g
                             id="g-svg-75"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-76"
                                 fill="rgba(100,100,100,1)"
@@ -865,10 +820,10 @@
                           <g
                             id="g-svg-77"
                             fill="none"
-                            transform="matrix(1,0,0,1,52.760002,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,52.760002,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-78"
                                 fill="rgba(100,100,100,1)"
@@ -891,27 +846,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-117"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-117" fill="none" class="items-item-page">
                         <g
                           id="g-svg-81"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="97.20000091552734"
                           height="23"
                         >
                           <g
                             id="g-svg-88"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-89"
                                 fill="none"
@@ -926,16 +876,13 @@
                           <g
                             id="g-svg-82"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-83"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -945,10 +892,10 @@
                           <g
                             id="g-svg-84"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-85"
                                 fill="rgba(100,100,100,1)"
@@ -972,10 +919,10 @@
                           <g
                             id="g-svg-86"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.600002,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.600002,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-87"
                                 fill="rgba(100,100,100,1)"
@@ -1000,18 +947,19 @@
                         <g
                           id="g-svg-90"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.200005,0)"
                           class="items-item"
+                          x="97.20000091552734"
+                          y="0"
                           width="97.20000091552734"
                           height="23"
+                          transform="matrix(1,0,0,1,97.200005,0)"
                         >
                           <g
                             id="g-svg-97"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-98"
                                 fill="none"
@@ -1026,16 +974,13 @@
                           <g
                             id="g-svg-91"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-92"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1045,10 +990,10 @@
                           <g
                             id="g-svg-93"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-94"
                                 fill="rgba(100,100,100,1)"
@@ -1072,10 +1017,10 @@
                           <g
                             id="g-svg-95"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.600002,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.600002,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-96"
                                 fill="rgba(100,100,100,1)"
@@ -1109,32 +1054,30 @@
                     <g
                       id="g-svg-123"
                       fill="none"
-                      transform="matrix(-1,-0,0,-1,0,0)"
                       class="navigator-prev-btn-group"
+                      transform="matrix(-1,-0,0,-1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-124"
                           fill="rgba(0,0,0,1)"
                           class="navigator-prev-btn"
-                          d="M 0,0 L 12,6 L 0,12 Z"
-                          visibility="visible"
+                          d="M -6,-6 L 6,0 L -6,6 Z"
                         />
                       </g>
                     </g>
                     <g
                       id="g-svg-125"
                       fill="none"
-                      transform="matrix(1,0,0,1,40.279999,0)"
                       class="navigator-next-btn-group"
+                      transform="matrix(1,0,0,1,40.279999,0)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-126"
                           fill="rgba(0,0,0,1)"
                           class="navigator-next-btn"
-                          d="M 0,0 L 12,6 L 0,12 Z"
-                          visibility="visible"
+                          d="M -6,-6 L 6,0 L -6,6 Z"
                         />
                       </g>
                     </g>
@@ -1144,7 +1087,7 @@
                       transform="matrix(1,0,0,1,11,0)"
                       class="navigator-page-info-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-128"
                           fill="rgba(0,0,0,1)"
@@ -1154,20 +1097,19 @@
                           dx="0.5"
                           font-size="12"
                           text-anchor="left"
-                          visibility="visible"
                         >
                           1/3
                         </text>
                       </g>
                     </g>
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-122"
                       fill="none"
-                      d="M 0,0 l 195.72000309149428,0 l 0,46 l-195.72000309149428 0 z"
+                      d="M 0,0 l 195.72000305175783,0 l 0,46 l-195.72000305175783 0 z"
                       class="navigator-clip-path"
-                      width="195.72000309149428"
+                      width="195.72000305175783"
                       height="46"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/BugCategoryWithShape2.svg b/__tests__/integration/snapshots/BugCategoryWithShape2.svg
index a82ff2875..7778951de 100644
--- a/__tests__/integration/snapshots/BugCategoryWithShape2.svg
+++ b/__tests__/integration/snapshots/BugCategoryWithShape2.svg
@@ -10,14 +10,16 @@
       <use href="#g-svg-239" transform="matrix(1,0,0,1,50,91)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-129" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,50,50)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-129" fill="none">
+        <g>
           <path
             id="g-svg-130"
             fill="none"
-            d="M 0,0 l 350,0 l 0,60 l-350 0 z"
+            d="M 50,50 l 350,0 l 0,60 l-350 0 z"
+            x="50"
+            y="50"
             width="350"
             height="60"
             stroke="rgba(255,0,0,1)"
@@ -25,25 +27,21 @@
           <g
             id="g-svg-131"
             fill="none"
+            x="50"
+            y="50"
             width="350"
             height="60"
-            transform="matrix(1,0,0,1,0,0)"
+            transform="matrix(1,0,0,1,50,50)"
           >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="350"
                 height="60"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-3"
                     fill="rgba(44,53,66,1)"
@@ -55,6 +53,8 @@
                     font-weight="bold"
                     font-size="20"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     title
@@ -73,49 +73,34 @@
                 fill="none"
                 width="350"
                 height="19"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-7"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-239-7)"
                   >
-                    <g
-                      id="g-svg-8"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-190"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-8" fill="none" class="navigator-play-window">
+                      <g id="g-svg-190" fill="none" class="items-item-page">
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="96.96000000000001"
                           height="23"
                         >
                           <g
                             id="g-svg-17"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-18"
                                 fill="none"
@@ -130,16 +115,13 @@
                           <g
                             id="g-svg-11"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-12"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -149,10 +131,10 @@
                           <g
                             id="g-svg-13"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-14"
                                 fill="rgba(100,100,100,1)"
@@ -176,10 +158,10 @@
                           <g
                             id="g-svg-15"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.480000,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.480000,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-16"
                                 fill="rgba(100,100,100,1)"
@@ -204,18 +186,19 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(1,0,0,1,96.959999,0)"
                           class="items-item"
+                          x="96.96000000000001"
+                          y="0"
                           width="93.12"
                           height="23"
+                          transform="matrix(1,0,0,1,96.959999,0)"
                         >
                           <g
                             id="g-svg-26"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-27"
                                 fill="none"
@@ -230,16 +213,13 @@
                           <g
                             id="g-svg-20"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-21"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -249,10 +229,10 @@
                           <g
                             id="g-svg-22"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-23"
                                 fill="rgba(100,100,100,1)"
@@ -276,10 +256,10 @@
                           <g
                             id="g-svg-24"
                             fill="none"
-                            transform="matrix(1,0,0,1,51.560001,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,51.560001,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-25"
                                 fill="rgba(100,100,100,1)"
@@ -304,18 +284,19 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,190.080002,0)"
                           class="items-item"
+                          x="190.08"
+                          y="0"
                           width="96.48000030517579"
                           height="23"
+                          transform="matrix(1,0,0,1,190.080002,0)"
                         >
                           <g
                             id="g-svg-35"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-36"
                                 fill="none"
@@ -330,16 +311,13 @@
                           <g
                             id="g-svg-29"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-30"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -349,10 +327,10 @@
                           <g
                             id="g-svg-31"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-32"
                                 fill="rgba(100,100,100,1)"
@@ -376,10 +354,10 @@
                           <g
                             id="g-svg-33"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.240002,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.240002,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-34"
                                 fill="rgba(100,100,100,1)"
@@ -402,27 +380,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-197"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-197" fill="none" class="items-item-page">
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="96.96000000000001"
                           height="23"
                         >
                           <g
                             id="g-svg-44"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-45"
                                 fill="none"
@@ -437,16 +410,13 @@
                           <g
                             id="g-svg-38"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-39"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -456,10 +426,10 @@
                           <g
                             id="g-svg-40"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-41"
                                 fill="rgba(100,100,100,1)"
@@ -483,10 +453,10 @@
                           <g
                             id="g-svg-42"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.480000,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.480000,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-43"
                                 fill="rgba(100,100,100,1)"
@@ -511,18 +481,19 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,96.959999,0)"
                           class="items-item"
+                          x="96.96000000000001"
+                          y="0"
                           width="97.44"
                           height="23"
+                          transform="matrix(1,0,0,1,96.959999,0)"
                         >
                           <g
                             id="g-svg-53"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-54"
                                 fill="none"
@@ -537,16 +508,13 @@
                           <g
                             id="g-svg-47"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-48"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -556,10 +524,10 @@
                           <g
                             id="g-svg-49"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-50"
                                 fill="rgba(100,100,100,1)"
@@ -583,10 +551,10 @@
                           <g
                             id="g-svg-51"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.720001,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.720001,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-52"
                                 fill="rgba(100,100,100,1)"
@@ -611,18 +579,19 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,194.399994,0)"
                           class="items-item"
+                          x="194.4"
+                          y="0"
                           width="96.72000000000003"
                           height="23"
+                          transform="matrix(1,0,0,1,194.399994,0)"
                         >
                           <g
                             id="g-svg-62"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-63"
                                 fill="none"
@@ -637,16 +606,13 @@
                           <g
                             id="g-svg-56"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-57"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -656,10 +622,10 @@
                           <g
                             id="g-svg-58"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-59"
                                 fill="rgba(100,100,100,1)"
@@ -683,10 +649,10 @@
                           <g
                             id="g-svg-60"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.360001,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.360001,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-61"
                                 fill="rgba(100,100,100,1)"
@@ -709,27 +675,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-204"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-204" fill="none" class="items-item-page">
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="97.20000091552734"
                           height="23"
                         >
                           <g
                             id="g-svg-71"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-72"
                                 fill="none"
@@ -744,16 +705,13 @@
                           <g
                             id="g-svg-65"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-66"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -763,10 +721,10 @@
                           <g
                             id="g-svg-67"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-68"
                                 fill="rgba(100,100,100,1)"
@@ -790,10 +748,10 @@
                           <g
                             id="g-svg-69"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.600002,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.600002,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-70"
                                 fill="rgba(100,100,100,1)"
@@ -818,18 +776,19 @@
                         <g
                           id="g-svg-73"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.200005,0)"
                           class="items-item"
+                          x="97.20000091552734"
+                          y="0"
                           width="95.52000076293945"
                           height="23"
+                          transform="matrix(1,0,0,1,97.200005,0)"
                         >
                           <g
                             id="g-svg-80"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-81"
                                 fill="none"
@@ -844,16 +803,13 @@
                           <g
                             id="g-svg-74"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-75"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -863,10 +819,10 @@
                           <g
                             id="g-svg-76"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-77"
                                 fill="rgba(100,100,100,1)"
@@ -890,10 +846,10 @@
                           <g
                             id="g-svg-78"
                             fill="none"
-                            transform="matrix(1,0,0,1,52.760002,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,52.760002,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-79"
                                 fill="rgba(100,100,100,1)"
@@ -918,18 +874,19 @@
                         <g
                           id="g-svg-82"
                           fill="none"
-                          transform="matrix(1,0,0,1,192.720001,0)"
                           class="items-item"
+                          x="192.7200016784668"
+                          y="0"
                           width="97.20000091552734"
                           height="23"
+                          transform="matrix(1,0,0,1,192.720001,0)"
                         >
                           <g
                             id="g-svg-89"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-90"
                                 fill="none"
@@ -944,16 +901,13 @@
                           <g
                             id="g-svg-83"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-84"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -963,10 +917,10 @@
                           <g
                             id="g-svg-85"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-86"
                                 fill="rgba(100,100,100,1)"
@@ -990,10 +944,10 @@
                           <g
                             id="g-svg-87"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.600002,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.600002,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-88"
                                 fill="rgba(100,100,100,1)"
@@ -1016,27 +970,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-211"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-211" fill="none" class="items-item-page">
                         <g
                           id="g-svg-91"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="97.20000091552734"
                           height="23"
                         >
                           <g
                             id="g-svg-98"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-99"
                                 fill="none"
@@ -1051,16 +1000,13 @@
                           <g
                             id="g-svg-92"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-93"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1070,10 +1016,10 @@
                           <g
                             id="g-svg-94"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-95"
                                 fill="rgba(100,100,100,1)"
@@ -1097,10 +1043,10 @@
                           <g
                             id="g-svg-96"
                             fill="none"
-                            transform="matrix(1,0,0,1,53.600002,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,53.600002,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-97"
                                 fill="rgba(100,100,100,1)"
@@ -1125,18 +1071,19 @@
                         <g
                           id="g-svg-100"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.200005,0)"
                           class="items-item"
+                          x="97.20000091552734"
+                          y="0"
                           width="108.48000030517579"
                           height="23"
+                          transform="matrix(1,0,0,1,97.200005,0)"
                         >
                           <g
                             id="g-svg-107"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-108"
                                 fill="none"
@@ -1151,16 +1098,13 @@
                           <g
                             id="g-svg-101"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-102"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1170,10 +1114,10 @@
                           <g
                             id="g-svg-103"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-104"
                                 fill="rgba(100,100,100,1)"
@@ -1197,10 +1141,10 @@
                           <g
                             id="g-svg-105"
                             fill="none"
-                            transform="matrix(1,0,0,1,59.240002,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,59.240002,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-106"
                                 fill="rgba(100,100,100,1)"
@@ -1223,27 +1167,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-216"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-216" fill="none" class="items-item-page">
                         <g
                           id="g-svg-109"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="104.63999999999999"
                           height="23"
                         >
                           <g
                             id="g-svg-116"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-117"
                                 fill="none"
@@ -1258,16 +1197,13 @@
                           <g
                             id="g-svg-110"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-111"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1277,10 +1213,10 @@
                           <g
                             id="g-svg-112"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-113"
                                 fill="rgba(100,100,100,1)"
@@ -1304,10 +1240,10 @@
                           <g
                             id="g-svg-114"
                             fill="none"
-                            transform="matrix(1,0,0,1,57.320000,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,57.320000,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-115"
                                 fill="rgba(100,100,100,1)"
@@ -1332,18 +1268,19 @@
                         <g
                           id="g-svg-118"
                           fill="none"
-                          transform="matrix(1,0,0,1,104.639999,0)"
                           class="items-item"
+                          x="104.63999999999999"
+                          y="0"
                           width="108"
                           height="23"
+                          transform="matrix(1,0,0,1,104.639999,0)"
                         >
                           <g
                             id="g-svg-125"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-126"
                                 fill="none"
@@ -1358,16 +1295,13 @@
                           <g
                             id="g-svg-119"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-120"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1377,10 +1311,10 @@
                           <g
                             id="g-svg-121"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-122"
                                 fill="rgba(100,100,100,1)"
@@ -1404,10 +1338,10 @@
                           <g
                             id="g-svg-123"
                             fill="none"
-                            transform="matrix(1,0,0,1,59,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,59,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-124"
                                 fill="rgba(100,100,100,1)"
@@ -1430,27 +1364,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-221"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-221" fill="none" class="items-item-page">
                         <g
                           id="g-svg-127"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="108.48000030517579"
                           height="23"
                         >
                           <g
                             id="g-svg-134"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-135"
                                 fill="none"
@@ -1465,16 +1394,13 @@
                           <g
                             id="g-svg-128"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-129"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1484,10 +1410,10 @@
                           <g
                             id="g-svg-130"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-131"
                                 fill="rgba(100,100,100,1)"
@@ -1511,10 +1437,10 @@
                           <g
                             id="g-svg-132"
                             fill="none"
-                            transform="matrix(1,0,0,1,59.240002,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,59.240002,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-133"
                                 fill="rgba(100,100,100,1)"
@@ -1539,18 +1465,19 @@
                         <g
                           id="g-svg-136"
                           fill="none"
-                          transform="matrix(1,0,0,1,108.480003,0)"
                           class="items-item"
+                          x="108.48000030517579"
+                          y="0"
                           width="108.96000000000001"
                           height="23"
+                          transform="matrix(1,0,0,1,108.480003,0)"
                         >
                           <g
                             id="g-svg-143"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-144"
                                 fill="none"
@@ -1565,16 +1492,13 @@
                           <g
                             id="g-svg-137"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-138"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1584,10 +1508,10 @@
                           <g
                             id="g-svg-139"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-140"
                                 fill="rgba(100,100,100,1)"
@@ -1611,10 +1535,10 @@
                           <g
                             id="g-svg-141"
                             fill="none"
-                            transform="matrix(1,0,0,1,59.480000,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,59.480000,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-142"
                                 fill="rgba(100,100,100,1)"
@@ -1637,27 +1561,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-226"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-226" fill="none" class="items-item-page">
                         <g
                           id="g-svg-145"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="108.24000137329102"
                           height="23"
                         >
                           <g
                             id="g-svg-152"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-153"
                                 fill="none"
@@ -1672,16 +1591,13 @@
                           <g
                             id="g-svg-146"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-147"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1691,10 +1607,10 @@
                           <g
                             id="g-svg-148"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-149"
                                 fill="rgba(100,100,100,1)"
@@ -1718,10 +1634,10 @@
                           <g
                             id="g-svg-150"
                             fill="none"
-                            transform="matrix(1,0,0,1,59.119999,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,59.119999,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-151"
                                 fill="rgba(100,100,100,1)"
@@ -1746,18 +1662,19 @@
                         <g
                           id="g-svg-154"
                           fill="none"
-                          transform="matrix(1,0,0,1,108.239998,0)"
                           class="items-item"
+                          x="108.24000137329102"
+                          y="0"
                           width="108.72"
                           height="23"
+                          transform="matrix(1,0,0,1,108.239998,0)"
                         >
                           <g
                             id="g-svg-161"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-162"
                                 fill="none"
@@ -1772,16 +1689,13 @@
                           <g
                             id="g-svg-155"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-156"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1791,10 +1705,10 @@
                           <g
                             id="g-svg-157"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-158"
                                 fill="rgba(100,100,100,1)"
@@ -1818,10 +1732,10 @@
                           <g
                             id="g-svg-159"
                             fill="none"
-                            transform="matrix(1,0,0,1,59.360001,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,59.360001,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-160"
                                 fill="rgba(100,100,100,1)"
@@ -1844,27 +1758,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-231"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-231" fill="none" class="items-item-page">
                         <g
                           id="g-svg-163"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="107.03999999999999"
                           height="23"
                         >
                           <g
                             id="g-svg-170"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-171"
                                 fill="none"
@@ -1879,16 +1788,13 @@
                           <g
                             id="g-svg-164"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-165"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1898,10 +1804,10 @@
                           <g
                             id="g-svg-166"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-167"
                                 fill="rgba(100,100,100,1)"
@@ -1925,10 +1831,10 @@
                           <g
                             id="g-svg-168"
                             fill="none"
-                            transform="matrix(1,0,0,1,58.520000,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,58.520000,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-169"
                                 fill="rgba(100,100,100,1)"
@@ -1953,18 +1859,19 @@
                         <g
                           id="g-svg-172"
                           fill="none"
-                          transform="matrix(1,0,0,1,107.040001,0)"
                           class="items-item"
+                          x="107.03999999999999"
+                          y="0"
                           width="108.72"
                           height="23"
+                          transform="matrix(1,0,0,1,107.040001,0)"
                         >
                           <g
                             id="g-svg-179"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-180"
                                 fill="none"
@@ -1979,16 +1886,13 @@
                           <g
                             id="g-svg-173"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-174"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1998,10 +1902,10 @@
                           <g
                             id="g-svg-175"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-176"
                                 fill="rgba(100,100,100,1)"
@@ -2025,10 +1929,10 @@
                           <g
                             id="g-svg-177"
                             fill="none"
-                            transform="matrix(1,0,0,1,59.360001,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,59.360001,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-178"
                                 fill="rgba(100,100,100,1)"
@@ -2051,27 +1955,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-236"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-236" fill="none" class="items-item-page">
                         <g
                           id="g-svg-181"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="108.72"
                           height="23"
                         >
                           <g
                             id="g-svg-188"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-189"
                                 fill="none"
@@ -2086,16 +1985,13 @@
                           <g
                             id="g-svg-182"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-183"
                                 fill="rgba(211,210,211,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -2105,10 +2001,10 @@
                           <g
                             id="g-svg-184"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-185"
                                 fill="rgba(100,100,100,1)"
@@ -2132,10 +2028,10 @@
                           <g
                             id="g-svg-186"
                             fill="none"
-                            transform="matrix(1,0,0,1,59.360001,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,59.360001,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-187"
                                 fill="rgba(100,100,100,1)"
@@ -2169,32 +2065,30 @@
                     <g
                       id="g-svg-240"
                       fill="none"
-                      transform="matrix(-1,-0,0,-1,0,0)"
                       class="navigator-prev-btn-group"
+                      transform="matrix(-1,-0,0,-1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-241"
                           fill="rgba(0,0,0,1)"
                           class="navigator-prev-btn"
-                          d="M 0,0 L 12,6 L 0,12 Z"
-                          visibility="visible"
+                          d="M -6,-6 L 6,0 L -6,6 Z"
                         />
                       </g>
                     </g>
                     <g
                       id="g-svg-242"
                       fill="none"
-                      transform="matrix(1,0,0,1,40.400002,0)"
                       class="navigator-next-btn-group"
+                      transform="matrix(1,0,0,1,40.400002,0)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-243"
                           fill="rgba(0,0,0,1)"
                           class="navigator-next-btn"
-                          d="M 0,0 L 12,6 L 0,12 Z"
-                          visibility="visible"
+                          d="M -6,-6 L 6,0 L -6,6 Z"
                         />
                       </g>
                     </g>
@@ -2204,7 +2098,7 @@
                       transform="matrix(1,0,0,1,11,0)"
                       class="navigator-page-info-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-245"
                           fill="rgba(0,0,0,1)"
@@ -2214,20 +2108,19 @@
                           dx="0.5"
                           font-size="12"
                           text-anchor="left"
-                          visibility="visible"
                         >
                           1/9
                         </text>
                       </g>
                     </g>
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-239"
                       fill="none"
-                      d="M 0,0 l 292.67999454657235,0 l 0,23 l-292.67999454657235 0 z"
+                      d="M 0,0 l 292.6799945068359,0 l 0,23 l-292.6799945068359 0 z"
                       class="navigator-clip-path"
-                      width="292.67999454657235"
+                      width="292.6799945068359"
                       height="23"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/BugCategoryWithShape3.svg b/__tests__/integration/snapshots/BugCategoryWithShape3.svg
index 959d88ebd..4787a6c66 100644
--- a/__tests__/integration/snapshots/BugCategoryWithShape3.svg
+++ b/__tests__/integration/snapshots/BugCategoryWithShape3.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="350"
-  height="350"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,61 @@
       <use href="#g-svg-90" transform="matrix(1,0,0,1,50,50)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-246" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-246" fill="none">
         <g
           id="g-svg-247"
           fill="none"
+          x="50"
+          y="50"
           width="300"
           height="300"
           transform="matrix(1,0,0,1,50,50)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="300"
               height="300"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="300"
               height="300"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-90-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-73"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-73" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="93.80000000000001"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +79,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +95,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +122,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="87.07999999999998"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +155,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +171,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +198,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="92.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +231,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +247,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +274,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,69)"
                         class="items-item"
+                        x="0"
+                        y="69"
                         width="95"
                         height="23"
+                        transform="matrix(1,0,0,1,0,69)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +307,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +323,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +350,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,92)"
                         class="items-item"
+                        x="0"
+                        y="92"
                         width="96.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,92)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +383,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +399,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +426,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,115)"
                         class="items-item"
+                        x="0"
+                        y="115"
                         width="96.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,115)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +459,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +475,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,25 +502,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,138)"
                         class="items-item"
+                        x="0"
+                        y="138"
                         width="97.27999999999997"
                         height="23"
+                        transform="matrix(1,0,0,1,0,138)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -577,16 +535,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -596,10 +551,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -623,25 +578,25 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-65"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,161)"
                         class="items-item"
+                        x="0"
+                        y="161"
                         width="118.75999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,0,161)"
                       >
                         <g
                           id="g-svg-71"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-72"
                               fill="none"
@@ -656,16 +611,13 @@
                         <g
                           id="g-svg-66"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-67"
                               fill="rgba(211,210,211,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -675,10 +627,10 @@
                         <g
                           id="g-svg-68"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-69"
                               fill="rgba(100,100,100,1)"
@@ -702,26 +654,20 @@
                         <g
                           id="g-svg-70"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-8" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-90"
                     fill="none"
-                    d="M 0,0 l 118.76000003973641,0 l 0,184 l-118.76000003973641 0 z"
+                    d="M 0,0 l 118.75999999999999,0 l 0,184 l-118.75999999999999 0 z"
                     class="navigator-clip-path"
-                    width="118.76000003973641"
+                    width="118.75999999999999"
                     height="184"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/Button1.svg b/__tests__/integration/snapshots/Button1.svg
index 143b9f168..4677ffbf4 100644
--- a/__tests__/integration/snapshots/Button1.svg
+++ b/__tests__/integration/snapshots/Button1.svg
@@ -6,33 +6,32 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-163" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-164" fill="none" transform="matrix(1,0,0,1,100,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-163" fill="none">
+        <g id="g-svg-164" fill="none" x="100" y="100">
+          <g>
             <path
               id="g-svg-3"
               fill="rgba(0,0,0,0)"
               class=".background"
-              d="M 5,0 l 40.400000000000006,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.400000000000006,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
+              d="M 105,100 l 40.400000000000006,0 a 5,5,0,0,1,5,5 l 0,20 a 5,5,0,0,1,-5,5 l -40.400000000000006,0 a 5,5,0,0,1,-5,-5 l 0,-20 a 5,5,0,0,1,5,-5 z"
               width="50.400000000000006"
               height="30"
               stroke="rgba(187,187,187,1)"
               stroke-width="1"
+              x="100"
+              y="100"
             />
           </g>
-          <g
-            id="g-svg-1"
-            fill="none"
-            class="marker"
-            transform="matrix(1,0,0,1,10,15)"
-          />
-          <g transform="matrix(1,0,0,1,10,15)">
+          <g id="g-svg-1" fill="none" class="marker" x="110" y="115" />
+          <g>
             <text
               id="g-svg-2"
               fill="rgba(0,0,0,1)"
               class="text"
+              x="110"
+              y="115"
               dominant-baseline="central"
               paint-order="stroke"
               dx="0.5"
diff --git a/__tests__/integration/snapshots/CategoryItem1.svg b/__tests__/integration/snapshots/CategoryItem1.svg
index 8e3024d84..d3b13b898 100644
--- a/__tests__/integration/snapshots/CategoryItem1.svg
+++ b/__tests__/integration/snapshots/CategoryItem1.svg
@@ -6,23 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-346"
-        fill="none"
-        width="200"
-        height="20"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-347" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-346" fill="none" width="200" height="20">
+        <g id="g-svg-347" fill="none">
           <g
             id="g-svg-7"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-8"
                 fill="rgba(247,247,247,1)"
@@ -39,13 +32,10 @@
             transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <circle
                 id="g-svg-2"
                 fill="rgba(255,0,0,1)"
-                transform="translate(-6,-6)"
-                cx="6"
-                cy="6"
                 r="6"
                 class="legend-category-item-marker"
               />
@@ -57,7 +47,7 @@
             transform="matrix(1,0,0,1,15,11.500000)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-4"
                 fill="rgba(255,0,0,1)"
@@ -83,7 +73,7 @@
             transform="matrix(1,0,0,1,153.240005,11.500000)"
             class="legend-category-item-value-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-6"
                 fill="rgba(0,128,0,1)"
diff --git a/__tests__/integration/snapshots/CategoryItem10.svg b/__tests__/integration/snapshots/CategoryItem10.svg
index b665f4956..ab8a5952e 100644
--- a/__tests__/integration/snapshots/CategoryItem10.svg
+++ b/__tests__/integration/snapshots/CategoryItem10.svg
@@ -6,23 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-8"
-        fill="none"
-        width="200"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-9" fill="none" width="200" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-8" fill="none" width="200" height="150">
+        <g id="g-svg-9" fill="none" y="0" width="200">
           <g
             id="g-svg-6"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-7"
                 fill="none"
@@ -40,14 +33,13 @@
             transform="matrix(3.184574,0,0,3.184574,25,25)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(1,0,0,1,-6,-6)">
+            <g>
               <path
                 id="g-svg-2"
                 fill="none"
-                d="M 0,6 A 6 6 0 1 0 12 6 A 6 6 0 1 0 0 6 Z"
+                d="M -6,0 A 6 6 0 1 0 6 0 A 6 6 0 1 0 -6 0 Z"
                 class="legend-category-item-marker"
                 stroke="rgba(0,128,0,1)"
-                stroke-width="2"
                 stroke-opacity="0.5"
               />
             </g>
@@ -58,7 +50,7 @@
             transform="matrix(1,0,0,1,55,25)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-4"
                 fill="rgba(255,0,0,1)"
@@ -81,23 +73,22 @@
           <g
             id="g-svg-5"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-value-group"
           />
         </g>
         <g
           id="g-svg-10"
           fill="none"
+          y="50"
           width="200"
           transform="matrix(1,0,0,1,0,50)"
         >
           <g
             id="g-svg-13"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-14"
                 fill="none"
@@ -115,14 +106,13 @@
             transform="matrix(3.184574,0,0,3.184574,25,25)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(1,0,0,1,-6,-5.196152)">
+            <g>
               <path
                 id="g-svg-9"
                 fill="none"
-                d="M 0,10.392304845413264 L 6,0 L 12,10.392304845413264 Z"
+                d="M -6,5.196152422706632 L 0,-5.196152422706632 L 6,5.196152422706632 Z"
                 class="legend-category-item-marker"
                 stroke="rgba(0,128,0,1)"
-                stroke-width="2"
                 stroke-opacity="0.5"
               />
             </g>
@@ -133,7 +123,7 @@
             transform="matrix(1,0,0,1,55,25)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-11"
                 fill="rgba(255,0,0,1)"
@@ -156,23 +146,22 @@
           <g
             id="g-svg-12"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-value-group"
           />
         </g>
         <g
           id="g-svg-11"
           fill="none"
+          y="100"
           width="200"
           transform="matrix(1,0,0,1,0,100)"
         >
           <g
             id="g-svg-20"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-21"
                 fill="none"
@@ -190,14 +179,13 @@
             transform="matrix(3.184574,0,0,3.184574,25,25)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(1,0,0,1,-6,-6)">
+            <g>
               <path
                 id="g-svg-16"
                 fill="none"
-                d="M 0,6 L 6,0 L 12,6 L 6,12 Z"
+                d="M -6,0 L 0,-6 L 6,0 L 0,6 Z"
                 class="legend-category-item-marker"
                 stroke="rgba(0,128,0,1)"
-                stroke-width="2"
                 stroke-opacity="0.5"
               />
             </g>
@@ -208,7 +196,7 @@
             transform="matrix(1,0,0,1,55,25)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-18"
                 fill="rgba(255,0,0,1)"
@@ -231,7 +219,6 @@
           <g
             id="g-svg-19"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-value-group"
           />
         </g>
diff --git a/__tests__/integration/snapshots/CategoryItem2.svg b/__tests__/integration/snapshots/CategoryItem2.svg
index 9419c9bbb..2c1cda6a8 100644
--- a/__tests__/integration/snapshots/CategoryItem2.svg
+++ b/__tests__/integration/snapshots/CategoryItem2.svg
@@ -6,23 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-9"
-        fill="none"
-        width="100"
-        height="20"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-10" fill="none" width="80" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-9" fill="none" width="100" height="20">
+        <g id="g-svg-10" fill="none" width="80">
           <g
             id="g-svg-7"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-8"
                 fill="rgba(247,247,247,1)"
@@ -39,13 +32,10 @@
             transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <circle
                 id="g-svg-2"
                 fill="rgba(255,0,0,1)"
-                transform="translate(-6,-6)"
-                cx="6"
-                cy="6"
                 r="6"
                 class="legend-category-item-marker"
               />
@@ -57,7 +47,7 @@
             transform="matrix(1,0,0,1,10,11.500000)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-4"
                 fill="rgba(255,0,0,1)"
@@ -83,7 +73,7 @@
             transform="matrix(1,0,0,1,45,11.500000)"
             class="legend-category-item-value-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-6"
                 fill="rgba(0,128,0,1)"
diff --git a/__tests__/integration/snapshots/CategoryItem3.svg b/__tests__/integration/snapshots/CategoryItem3.svg
index bec43962a..2560f33a2 100644
--- a/__tests__/integration/snapshots/CategoryItem3.svg
+++ b/__tests__/integration/snapshots/CategoryItem3.svg
@@ -6,23 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-9"
-        fill="none"
-        width="100"
-        height="20"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-9" fill="none" width="100" height="20">
+        <g id="g-svg-10" fill="none">
           <g
             id="g-svg-7"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-8"
                 fill="rgba(247,247,247,1)"
@@ -39,13 +32,10 @@
             transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <circle
                 id="g-svg-2"
                 fill="rgba(255,0,0,1)"
-                transform="translate(-6,-6)"
-                cx="6"
-                cy="6"
                 r="6"
                 class="legend-category-item-marker"
               />
@@ -57,7 +47,7 @@
             transform="matrix(1,0,0,1,15,11.500000)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-4"
                 fill="rgba(255,0,0,1)"
@@ -83,7 +73,7 @@
             transform="matrix(1,0,0,1,48.480000,11.500000)"
             class="legend-category-item-value-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-6"
                 fill="rgba(0,128,0,1)"
diff --git a/__tests__/integration/snapshots/CategoryItem4.svg b/__tests__/integration/snapshots/CategoryItem4.svg
index e2db7a0c2..0c2a0a728 100644
--- a/__tests__/integration/snapshots/CategoryItem4.svg
+++ b/__tests__/integration/snapshots/CategoryItem4.svg
@@ -6,23 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-9"
-        fill="none"
-        width="100"
-        height="20"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-9" fill="none" width="100" height="20">
+        <g id="g-svg-10" fill="none">
           <g
             id="g-svg-6"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-7"
                 fill="rgba(247,247,247,1)"
@@ -39,13 +32,10 @@
             transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <circle
                 id="g-svg-2"
                 fill="rgba(255,0,0,1)"
-                transform="translate(-6,-6)"
-                cx="6"
-                cy="6"
                 r="6"
                 class="legend-category-item-marker"
               />
@@ -57,7 +47,7 @@
             transform="matrix(1,0,0,1,15,11.500000)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-4"
                 fill="rgba(255,0,0,1)"
@@ -80,7 +70,6 @@
           <g
             id="g-svg-5"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-value-group"
           />
         </g>
diff --git a/__tests__/integration/snapshots/CategoryItem5.svg b/__tests__/integration/snapshots/CategoryItem5.svg
index 4eeb5e375..37e65626b 100644
--- a/__tests__/integration/snapshots/CategoryItem5.svg
+++ b/__tests__/integration/snapshots/CategoryItem5.svg
@@ -6,23 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-8"
-        fill="none"
-        width="100"
-        height="20"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-9" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-8" fill="none" width="100" height="20">
+        <g id="g-svg-9" fill="none">
           <g
             id="g-svg-6"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-7"
                 fill="rgba(247,247,247,1)"
@@ -39,11 +32,13 @@
             transform="matrix(0.707107,0,0,0.707107,5,11.500000)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,-0,-7.071068)">
+            <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
               <path
                 id="g-svg-2"
                 fill="rgba(255,165,0,1)"
-                d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                d="M -5,-5 l 10,0 l 0,10 l-10 0 z"
+                x="-5"
+                y="-5"
                 width="10"
                 height="10"
                 class="legend-category-item-marker"
@@ -56,7 +51,7 @@
             transform="matrix(1,0,0,1,15,11.500000)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-4"
                 fill="rgba(255,0,0,1)"
@@ -79,7 +74,6 @@
           <g
             id="g-svg-5"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-value-group"
           />
         </g>
diff --git a/__tests__/integration/snapshots/CategoryItem6.svg b/__tests__/integration/snapshots/CategoryItem6.svg
index c4f96cb0b..a0d17c0be 100644
--- a/__tests__/integration/snapshots/CategoryItem6.svg
+++ b/__tests__/integration/snapshots/CategoryItem6.svg
@@ -6,23 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-8"
-        fill="none"
-        width="100"
-        height="20"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-9" fill="none" width="50" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-8" fill="none" width="100" height="20">
+        <g id="g-svg-9" fill="none" width="50">
           <g
             id="g-svg-6"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-7"
                 fill="rgba(247,247,247,1)"
@@ -39,13 +32,10 @@
             transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <circle
                 id="g-svg-2"
                 fill="rgba(255,165,0,1)"
-                transform="translate(-6,-6)"
-                cx="6"
-                cy="6"
                 r="6"
                 class="legend-category-item-marker"
               />
@@ -57,7 +47,7 @@
             transform="matrix(1,0,0,1,15,11.500000)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-4"
                 fill="rgba(255,0,0,1)"
@@ -80,7 +70,6 @@
           <g
             id="g-svg-5"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-value-group"
           />
         </g>
diff --git a/__tests__/integration/snapshots/CategoryItem7.svg b/__tests__/integration/snapshots/CategoryItem7.svg
index 3efdc6608..6f1dad5a4 100644
--- a/__tests__/integration/snapshots/CategoryItem7.svg
+++ b/__tests__/integration/snapshots/CategoryItem7.svg
@@ -6,23 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-8"
-        fill="none"
-        width="100"
-        height="20"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-9" fill="none" width="100" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-8" fill="none" width="100" height="20">
+        <g id="g-svg-9" fill="none" width="100">
           <g
             id="g-svg-7"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-8"
                 fill="rgba(247,247,247,1)"
@@ -39,13 +32,10 @@
             transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <circle
                 id="g-svg-2"
                 fill="rgba(255,165,0,1)"
-                transform="translate(-6,-6)"
-                cx="6"
-                cy="6"
                 r="6"
                 class="legend-category-item-marker"
               />
@@ -57,7 +47,7 @@
             transform="matrix(1,0,0,1,15,11.500000)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-4"
                 fill="rgba(255,0,0,1)"
@@ -83,7 +73,7 @@
             transform="matrix(1,0,0,1,60,11.500000)"
             class="legend-category-item-value-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-6"
                 fill="rgba(0,128,0,1)"
diff --git a/__tests__/integration/snapshots/CategoryItem8.svg b/__tests__/integration/snapshots/CategoryItem8.svg
index 785078dca..7b12ae2db 100644
--- a/__tests__/integration/snapshots/CategoryItem8.svg
+++ b/__tests__/integration/snapshots/CategoryItem8.svg
@@ -6,28 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-9"
-        fill="none"
-        width="100"
-        height="20"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-10"
-          fill="none"
-          width="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-9" fill="none" width="100" height="20">
+        <g id="g-svg-10" fill="none" width="100">
           <g
             id="g-svg-7"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-8"
                 fill="rgba(247,247,247,1)"
@@ -44,13 +32,10 @@
             transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <circle
                 id="g-svg-2"
                 fill="rgba(255,165,0,1)"
-                transform="translate(-6,-6)"
-                cx="6"
-                cy="6"
                 r="6"
                 class="legend-category-item-marker"
               />
@@ -62,7 +47,7 @@
             transform="matrix(1,0,0,1,15,11.500000)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-4"
                 fill="rgba(255,0,0,1)"
@@ -88,7 +73,7 @@
             transform="matrix(1,0,0,1,46.666668,11.500000)"
             class="legend-category-item-value-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-6"
                 fill="rgba(0,128,0,1)"
diff --git a/__tests__/integration/snapshots/CategoryItem9.svg b/__tests__/integration/snapshots/CategoryItem9.svg
index e9d0c6980..2de43afcd 100644
--- a/__tests__/integration/snapshots/CategoryItem9.svg
+++ b/__tests__/integration/snapshots/CategoryItem9.svg
@@ -6,28 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-9"
-        fill="none"
-        width="200"
-        height="50"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-10"
-          fill="none"
-          width="200"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-9" fill="none" width="200" height="50">
+        <g id="g-svg-10" fill="none" width="200">
           <g
             id="g-svg-6"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-background-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-7"
                 fill="rgba(255,192,203,1)"
@@ -44,17 +32,13 @@
             transform="matrix(3.184574,0,0,3.184574,25,25)"
             class="legend-category-item-marker-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <circle
                 id="g-svg-2"
                 fill="rgba(255,165,0,1)"
-                transform="translate(-6,-6)"
-                cx="6"
-                cy="6"
                 r="6"
                 class="legend-category-item-marker"
                 stroke="rgba(0,128,0,1)"
-                stroke-width="2"
                 stroke-opacity="0.5"
               />
             </g>
@@ -65,7 +49,7 @@
             transform="matrix(1,0,0,1,55,25)"
             class="legend-category-item-label-group"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-4"
                 fill="rgba(255,0,0,1)"
@@ -88,7 +72,6 @@
           <g
             id="g-svg-5"
             fill="none"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-category-item-value-group"
           />
         </g>
diff --git a/__tests__/integration/snapshots/CategoryItemMarker1.svg b/__tests__/integration/snapshots/CategoryItemMarker1.svg
index d7115e893..5be790bb4 100644
--- a/__tests__/integration/snapshots/CategoryItemMarker1.svg
+++ b/__tests__/integration/snapshots/CategoryItemMarker1.svg
@@ -10,37 +10,19 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-242"
-        fill="none"
-        width="750"
-        height="50"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-243"
-          fill="none"
-          height="40"
-          width="1000"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-242" fill="none" width="750" height="50">
+        <g id="g-svg-243" fill="none" height="40" width="1000">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="1000"
               height="40"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -52,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -70,49 +54,34 @@
               fill="none"
               width="1000"
               height="13"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -127,14 +96,16 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.707107,0,0,0.707107,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.707107,0,0,0.707107,5,11.500000)"
                         >
-                          <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,-0,-7.071068)">
+                          <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                             <path
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                              d="M -5,-5 l 10,0 l 0,10 l-10 0 z"
+                              x="-5"
+                              y="-5"
                               width="10"
                               height="10"
                               class="legend-category-item-marker"
@@ -145,10 +116,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -172,25 +143,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -205,16 +176,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(1,0,0,1,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(1,0,0,1,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-5,-5)"
-                              cx="5"
-                              cy="5"
                               r="5"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -224,10 +192,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -251,25 +219,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -284,14 +252,16 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.707107,0,0,0.707107,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.707107,0,0,0.707107,5,11.500000)"
                         >
-                          <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,-0,-7.071068)">
+                          <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                             <path
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                              d="M -5,-5 l 10,0 l 0,10 l-10 0 z"
+                              x="-5"
+                              y="-5"
                               width="10"
                               height="10"
                               class="legend-category-item-marker"
@@ -302,10 +272,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -329,25 +299,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,215.759995,0)"
                         class="items-item"
+                        x="215.76"
+                        y="0"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,215.759995,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -362,16 +332,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(1,0,0,1,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(1,0,0,1,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-5,-5)"
-                              cx="5"
-                              cy="5"
                               r="5"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -381,10 +348,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -408,25 +375,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,405.079987,0)"
                         class="items-item"
+                        x="405.08"
+                        y="0"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,405.079987,0)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -441,14 +408,16 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.707107,0,0,0.707107,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.707107,0,0,0.707107,5,11.500000)"
                         >
-                          <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,-0,-7.071068)">
+                          <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                             <path
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                              d="M -5,-5 l 10,0 l 0,10 l-10 0 z"
+                              x="-5"
+                              y="-5"
                               width="10"
                               height="10"
                               class="legend-category-item-marker"
@@ -459,10 +428,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -486,25 +455,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,529,0)"
                         class="items-item"
+                        x="529"
+                        y="0"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,529,0)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -519,16 +488,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(1,0,0,1,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(1,0,0,1,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-5,-5)"
-                              cx="5"
-                              cy="5"
                               r="5"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -538,10 +504,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -565,25 +531,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,666.479980,0)"
                         class="items-item"
+                        x="666.48"
+                        y="0"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,666.479980,0)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -598,14 +564,16 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.707107,0,0,0.707107,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.707107,0,0,0.707107,5,11.500000)"
                         >
-                          <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,-0,-7.071068)">
+                          <g transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)">
                             <path
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                              d="M -5,-5 l 10,0 l 0,10 l-10 0 z"
+                              x="-5"
+                              y="-5"
                               width="10"
                               height="10"
                               class="legend-category-item-marker"
@@ -616,10 +584,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -643,26 +611,20 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-9"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-9" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 747.3199804687499,0 l 0,23 l-747.3199804687499 0 z"
+                    d="M 0,0 l 747.319980721072,0 l 0,23 l-747.319980721072 0 z"
                     class="navigator-clip-path"
-                    width="747.3199804687499"
+                    width="747.319980721072"
                     height="23"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryItemMarker2.svg b/__tests__/integration/snapshots/CategoryItemMarker2.svg
index 93db7019d..52b4a3ad8 100644
--- a/__tests__/integration/snapshots/CategoryItemMarker2.svg
+++ b/__tests__/integration/snapshots/CategoryItemMarker2.svg
@@ -10,37 +10,19 @@
       <use href="#g-svg-201" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-82"
-        fill="none"
-        width="750"
-        height="50"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-83"
-          fill="none"
-          height="40"
-          width="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none" width="750" height="50">
+        <g id="g-svg-83" fill="none" height="40" width="500">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="500"
               height="40"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -52,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -70,49 +54,34 @@
               fill="none"
               width="500"
               height="13"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-201-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-162"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-162" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="50"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -127,14 +96,14 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,-10)">
+                          <g>
                             <path
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              d="M 0,10 A 10 10 0 1 0 20 10 A 10 10 0 1 0 0 10 Z"
+                              d="M -10,0 A 10 10 0 1 0 10 0 A 10 10 0 1 0 -10 0 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -144,10 +113,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -171,25 +140,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,50,0)"
                         class="items-item"
+                        x="50"
+                        y="0"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,50,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -204,14 +173,14 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6.180000,-10)">
+                          <g>
                             <path
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              d="M 0,10 L 6.18,0 L 12.36,10 L 6.18,20 Z"
+                              d="M -6.18,0 L 0,-10 L 6.18,0 L 0,10 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -221,10 +190,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -248,25 +217,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,100,0)"
                         class="items-item"
+                        x="100"
+                        y="0"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,100,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -281,14 +250,14 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-8.660254,-10)">
+                          <g>
                             <path
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              d="M 8.660254037844386,0 L 17.32050807568877,5 L 17.32050807568877,15 L 8.660254037844386,20 L 0,15 L 0,5 Z"
+                              d="M 0,-10 L 8.660254037844386,-5 L 8.660254037844386,5 L 0,10 L -8.660254037844386,5 L -8.660254037844386,-5 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -298,10 +267,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,25 +294,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,150,0)"
                         class="items-item"
+                        x="150"
+                        y="0"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,150,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -358,14 +327,14 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,-10)">
+                          <g>
                             <path
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              d="M 0,0 L 20,0 L 20,20 L 0,20 Z"
+                              d="M -10,-10 L 10,-10 L 10,10 L -10,10 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -375,10 +344,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -402,25 +371,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -435,14 +404,14 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,-8.660254)">
+                          <g>
                             <path
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              d="M 0,0 L 20,0 L 10,17.32050807568877 Z"
+                              d="M -10,-8.660254037844386 L 10,-8.660254037844386 L 0,8.660254037844386 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -452,10 +421,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -479,25 +448,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,250,0)"
                         class="items-item"
+                        x="250"
+                        y="0"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,250,0)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -512,14 +481,14 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,-8.660254)">
+                          <g>
                             <path
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              d="M 0,17.32050807568877 L 10,0 L 20,17.32050807568877 Z"
+                              d="M -10,8.660254037844386 L 0,-8.660254037844386 L 10,8.660254037844386 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -529,10 +498,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -556,25 +525,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,300,0)"
                         class="items-item"
+                        x="300"
+                        y="0"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,300,0)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -589,14 +558,14 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,-8.500000)">
+                          <g>
                             <path
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              d="M 0,0 L 20,17 L 20,0 L 0,17 Z"
+                              d="M -10,-8.5 L 10,8.5 L 10,-8.5 L -10,8.5 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -606,10 +575,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -633,25 +602,25 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-66"
                         fill="none"
-                        transform="matrix(1,0,0,1,350,0)"
                         class="items-item"
+                        x="350"
+                        y="0"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,350,0)"
                       >
                         <g
                           id="g-svg-72"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-73"
                               fill="none"
@@ -666,14 +635,14 @@
                         <g
                           id="g-svg-67"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,-10)">
+                          <g>
                             <path
                               id="g-svg-68"
                               fill="rgba(85,100,132,1)"
-                              d="M 0,10 A 10 10 0 1 0 20 10 A 10 10 0 1 0 0 10 Z"
+                              d="M -10,0 A 10 10 0 1 0 10 0 A 10 10 0 1 0 -10 0 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -683,10 +652,10 @@
                         <g
                           id="g-svg-69"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-70"
                               fill="rgba(100,100,100,1)"
@@ -710,25 +679,25 @@
                         <g
                           id="g-svg-71"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-74"
                         fill="none"
-                        transform="matrix(1,0,0,1,400,0)"
                         class="items-item"
+                        x="400"
+                        y="0"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,400,0)"
                       >
                         <g
                           id="g-svg-80"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-81"
                               fill="none"
@@ -743,14 +712,14 @@
                         <g
                           id="g-svg-75"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,-10)">
+                          <g>
                             <path
                               id="g-svg-76"
                               fill="rgba(239,183,69,1)"
-                              d="M 0,10 L 20,10 M 10,0 L 10,20"
+                              d="M -10,0 L 10,0 M 0,-10 L 0,10"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -760,10 +729,10 @@
                         <g
                           id="g-svg-77"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-78"
                               fill="rgba(100,100,100,1)"
@@ -787,25 +756,25 @@
                         <g
                           id="g-svg-79"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-82"
                         fill="none"
-                        transform="matrix(1,0,0,1,450,0)"
                         class="items-item"
+                        x="450"
+                        y="0"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,450,0)"
                       >
                         <g
                           id="g-svg-88"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-89"
                               fill="none"
@@ -820,14 +789,14 @@
                         <g
                           id="g-svg-83"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6.180000,-10)">
+                          <g>
                             <path
                               id="g-svg-84"
                               fill="rgba(95,79,238,1)"
-                              d="M 0,10 L 6.18,0 L 12.36,10 L 6.18,20 Z"
+                              d="M -6.18,0 L 0,-10 L 6.18,0 L 0,10 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -837,10 +806,10 @@
                         <g
                           id="g-svg-85"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-86"
                               fill="rgba(100,100,100,1)"
@@ -864,25 +833,25 @@
                         <g
                           id="g-svg-87"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-90"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-96"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-97"
                               fill="none"
@@ -897,14 +866,14 @@
                         <g
                           id="g-svg-91"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,-10)">
+                          <g>
                             <path
                               id="g-svg-92"
                               fill="rgba(87,129,240,1)"
-                              d="M 0,0 L 20,0 L 20,20 L 0,20 Z"
+                              d="M -10,-10 L 10,-10 L 10,10 L -10,10 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -914,10 +883,10 @@
                         <g
                           id="g-svg-93"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-94"
                               fill="rgba(100,100,100,1)"
@@ -941,25 +910,25 @@
                         <g
                           id="g-svg-95"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-98"
                         fill="none"
-                        transform="matrix(1,0,0,1,50,23)"
                         class="items-item"
+                        x="50"
+                        y="23"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,50,23)"
                       >
                         <g
                           id="g-svg-104"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-105"
                               fill="none"
@@ -974,14 +943,14 @@
                         <g
                           id="g-svg-99"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,-8.660254)">
+                          <g>
                             <path
                               id="g-svg-100"
                               fill="rgba(112,210,160,1)"
-                              d="M 0,17.32050807568877 L 10,0 L 20,17.32050807568877 Z"
+                              d="M -10,8.660254037844386 L 0,-8.660254037844386 L 10,8.660254037844386 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -991,10 +960,10 @@
                         <g
                           id="g-svg-101"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-102"
                               fill="rgba(100,100,100,1)"
@@ -1018,25 +987,25 @@
                         <g
                           id="g-svg-103"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-106"
                         fill="none"
-                        transform="matrix(1,0,0,1,100,23)"
                         class="items-item"
+                        x="100"
+                        y="23"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,100,23)"
                       >
                         <g
                           id="g-svg-112"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-113"
                               fill="none"
@@ -1051,14 +1020,14 @@
                         <g
                           id="g-svg-107"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-8.660254,-10)">
+                          <g>
                             <path
                               id="g-svg-108"
                               fill="rgba(85,100,132,1)"
-                              d="M 8.660254037844386,0 L 17.32050807568877,5 L 17.32050807568877,15 L 8.660254037844386,20 L 0,15 L 0,5 Z"
+                              d="M 0,-10 L 8.660254037844386,-5 L 8.660254037844386,5 L 0,10 L -8.660254037844386,5 L -8.660254037844386,-5 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -1068,10 +1037,10 @@
                         <g
                           id="g-svg-109"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-110"
                               fill="rgba(100,100,100,1)"
@@ -1095,25 +1064,25 @@
                         <g
                           id="g-svg-111"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-114"
                         fill="none"
-                        transform="matrix(1,0,0,1,150,23)"
                         class="items-item"
+                        x="150"
+                        y="23"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,150,23)"
                       >
                         <g
                           id="g-svg-120"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-121"
                               fill="none"
@@ -1128,14 +1097,14 @@
                         <g
                           id="g-svg-115"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,-10)">
+                          <g>
                             <path
                               id="g-svg-116"
                               fill="rgba(239,183,69,1)"
-                              d="M 0,0 L 20,20 M 20,0 L 0,20"
+                              d="M -10,-10 L 10,10 M 10,-10 L -10,10"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -1145,10 +1114,10 @@
                         <g
                           id="g-svg-117"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-118"
                               fill="rgba(100,100,100,1)"
@@ -1172,25 +1141,25 @@
                         <g
                           id="g-svg-119"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-122"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,23)"
                         class="items-item"
+                        x="200"
+                        y="23"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,200,23)"
                       >
                         <g
                           id="g-svg-128"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-129"
                               fill="none"
@@ -1205,14 +1174,14 @@
                         <g
                           id="g-svg-123"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,-8.500000)">
+                          <g>
                             <path
                               id="g-svg-124"
                               fill="rgba(95,79,238,1)"
-                              d="M 0,0 L 20,17 L 20,0 L 0,17 Z"
+                              d="M -10,-8.5 L 10,8.5 L 10,-8.5 L -10,8.5 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -1222,10 +1191,10 @@
                         <g
                           id="g-svg-125"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-126"
                               fill="rgba(100,100,100,1)"
@@ -1249,25 +1218,25 @@
                         <g
                           id="g-svg-127"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-130"
                         fill="none"
-                        transform="matrix(1,0,0,1,250,23)"
                         class="items-item"
+                        x="250"
+                        y="23"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,250,23)"
                       >
                         <g
                           id="g-svg-136"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-137"
                               fill="none"
@@ -1282,14 +1251,14 @@
                         <g
                           id="g-svg-131"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,0)">
+                          <g>
                             <path
                               id="g-svg-132"
                               fill="rgba(87,129,240,1)"
-                              d="M 0,0 L 20,0"
+                              d="M -10,0 L 10,0"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -1299,10 +1268,10 @@
                         <g
                           id="g-svg-133"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-134"
                               fill="rgba(100,100,100,1)"
@@ -1326,25 +1295,25 @@
                         <g
                           id="g-svg-135"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-138"
                         fill="none"
-                        transform="matrix(1,0,0,1,300,23)"
                         class="items-item"
+                        x="300"
+                        y="23"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,300,23)"
                       >
                         <g
                           id="g-svg-144"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-145"
                               fill="none"
@@ -1359,14 +1328,14 @@
                         <g
                           id="g-svg-139"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,-10)">
+                          <g>
                             <path
                               id="g-svg-140"
                               fill="rgba(112,210,160,1)"
-                              d="M 0,20 L 0,0"
+                              d="M 0,10 L 0,-10"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -1376,10 +1345,10 @@
                         <g
                           id="g-svg-141"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-142"
                               fill="rgba(100,100,100,1)"
@@ -1403,25 +1372,25 @@
                         <g
                           id="g-svg-143"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-146"
                         fill="none"
-                        transform="matrix(1,0,0,1,350,23)"
                         class="items-item"
+                        x="350"
+                        y="23"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,350,23)"
                       >
                         <g
                           id="g-svg-152"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-153"
                               fill="none"
@@ -1436,14 +1405,14 @@
                         <g
                           id="g-svg-147"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-5,-10)">
+                          <g>
                             <path
                               id="g-svg-148"
                               fill="rgba(85,100,132,1)"
-                              d="M 0,0 L 10,0 M 5,0 L 5,20 M 0,20 L 10,20"
+                              d="M -5,-10 L 5,-10 M 0,-10 L 0,10 M -5,10 L 5,10"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -1453,10 +1422,10 @@
                         <g
                           id="g-svg-149"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-150"
                               fill="rgba(100,100,100,1)"
@@ -1480,25 +1449,25 @@
                         <g
                           id="g-svg-151"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-154"
                         fill="none"
-                        transform="matrix(1,0,0,1,400,23)"
                         class="items-item"
+                        x="400"
+                        y="23"
                         width="50"
                         height="23"
+                        transform="matrix(1,0,0,1,400,23)"
                       >
                         <g
                           id="g-svg-160"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-161"
                               fill="none"
@@ -1513,14 +1482,14 @@
                         <g
                           id="g-svg-155"
                           fill="none"
-                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.464645,0,0,0.464645,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-10,-8.660254)">
+                          <g>
                             <path
                               id="g-svg-156"
                               fill="rgba(239,183,69,1)"
-                              d="M 0,0 L 20,0 L 10,17.32050807568877 Z"
+                              d="M -10,-8.660254037844386 L 10,-8.660254037844386 L 0,8.660254037844386 Z"
                               class="legend-category-item-marker"
                               stroke="rgba(255,0,0,1)"
                               visibility="visible"
@@ -1530,10 +1499,10 @@
                         <g
                           id="g-svg-157"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-158"
                               fill="rgba(100,100,100,1)"
@@ -1557,20 +1526,14 @@
                         <g
                           id="g-svg-159"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-9"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-9" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-201"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryItems1.svg b/__tests__/integration/snapshots/CategoryItems1.svg
index 9565dbf40..831566c50 100644
--- a/__tests__/integration/snapshots/CategoryItems1.svg
+++ b/__tests__/integration/snapshots/CategoryItems1.svg
@@ -1,65 +1,43 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="355"
-  height="90"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-228-2">
-      <use href="#g-svg-228" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-228-2">
+      <use href="#g-svg-228" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-22" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-23"
-          fill="none"
-          width="355"
-          height="90"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-22" fill="none">
+        <g id="g-svg-23" fill="none" width="355" height="90">
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
               clip-path="url(#clip-path-228-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-185"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-185" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
                   >
                     <g
                       id="g-svg-12"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-13"
                           fill="none"
@@ -74,16 +52,13 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-7"
                           fill="rgba(255,0,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -93,10 +68,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(255,0,0,1)"
@@ -120,10 +95,10 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-11"
                           fill="rgba(0,128,0,1)"
@@ -148,18 +123,19 @@
                   <g
                     id="g-svg-14"
                     fill="none"
-                    transform="matrix(1,0,0,1,103.333336,0)"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,103.333336,0)"
                   >
                     <g
                       id="g-svg-21"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-22"
                           fill="none"
@@ -174,16 +150,13 @@
                     <g
                       id="g-svg-15"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-16"
                           fill="rgba(255,165,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -193,10 +166,10 @@
                     <g
                       id="g-svg-17"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-18"
                           fill="rgba(255,0,0,1)"
@@ -220,10 +193,10 @@
                     <g
                       id="g-svg-19"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-20"
                           fill="rgba(0,128,0,1)"
@@ -248,18 +221,19 @@
                   <g
                     id="g-svg-23"
                     fill="none"
-                    transform="matrix(1,0,0,1,206.666672,0)"
                     class="items-item"
+                    x="206.66666666666666"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,206.666672,0)"
                   >
                     <g
                       id="g-svg-30"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-31"
                           fill="none"
@@ -274,16 +248,13 @@
                     <g
                       id="g-svg-24"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-25"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -293,10 +264,10 @@
                     <g
                       id="g-svg-26"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-27"
                           fill="rgba(255,0,0,1)"
@@ -320,10 +291,10 @@
                     <g
                       id="g-svg-28"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-29"
                           fill="rgba(0,128,0,1)"
@@ -348,18 +319,19 @@
                   <g
                     id="g-svg-32"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,28)"
                     class="items-item"
+                    x="0"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,0,28)"
                   >
                     <g
                       id="g-svg-39"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-40"
                           fill="none"
@@ -374,16 +346,13 @@
                     <g
                       id="g-svg-33"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-34"
                           fill="rgba(0,0,255,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -393,10 +362,10 @@
                     <g
                       id="g-svg-35"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-36"
                           fill="rgba(255,0,0,1)"
@@ -420,10 +389,10 @@
                     <g
                       id="g-svg-37"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-38"
                           fill="rgba(0,128,0,1)"
@@ -448,18 +417,19 @@
                   <g
                     id="g-svg-41"
                     fill="none"
-                    transform="matrix(1,0,0,1,103.333336,28)"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,103.333336,28)"
                   >
                     <g
                       id="g-svg-48"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-49"
                           fill="none"
@@ -474,16 +444,13 @@
                     <g
                       id="g-svg-42"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-43"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -493,10 +460,10 @@
                     <g
                       id="g-svg-44"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-45"
                           fill="rgba(255,0,0,1)"
@@ -520,10 +487,10 @@
                     <g
                       id="g-svg-46"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-47"
                           fill="rgba(0,128,0,1)"
@@ -548,18 +515,19 @@
                   <g
                     id="g-svg-50"
                     fill="none"
-                    transform="matrix(1,0,0,1,206.666672,28)"
                     class="items-item"
+                    x="206.66666666666666"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,206.666672,28)"
                   >
                     <g
                       id="g-svg-57"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-58"
                           fill="none"
@@ -574,16 +542,13 @@
                     <g
                       id="g-svg-51"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-52"
                           fill="rgba(255,0,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -593,10 +558,10 @@
                     <g
                       id="g-svg-53"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-54"
                           fill="rgba(255,0,0,1)"
@@ -620,10 +585,10 @@
                     <g
                       id="g-svg-55"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-56"
                           fill="rgba(0,128,0,1)"
@@ -648,18 +613,19 @@
                   <g
                     id="g-svg-59"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,56)"
                     class="items-item"
+                    x="0"
+                    y="56"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,0,56)"
                   >
                     <g
                       id="g-svg-66"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-67"
                           fill="none"
@@ -674,16 +640,13 @@
                     <g
                       id="g-svg-60"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-61"
                           fill="rgba(255,165,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -693,10 +656,10 @@
                     <g
                       id="g-svg-62"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-63"
                           fill="rgba(255,0,0,1)"
@@ -720,10 +683,10 @@
                     <g
                       id="g-svg-64"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-65"
                           fill="rgba(0,128,0,1)"
@@ -748,18 +711,19 @@
                   <g
                     id="g-svg-68"
                     fill="none"
-                    transform="matrix(1,0,0,1,103.333336,56)"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="56"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,103.333336,56)"
                   >
                     <g
                       id="g-svg-75"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-76"
                           fill="none"
@@ -774,16 +738,13 @@
                     <g
                       id="g-svg-69"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-70"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -793,10 +754,10 @@
                     <g
                       id="g-svg-71"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-72"
                           fill="rgba(255,0,0,1)"
@@ -820,10 +781,10 @@
                     <g
                       id="g-svg-73"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-74"
                           fill="rgba(0,128,0,1)"
@@ -848,18 +809,19 @@
                   <g
                     id="g-svg-77"
                     fill="none"
-                    transform="matrix(1,0,0,1,206.666672,56)"
                     class="items-item"
+                    x="206.66666666666666"
+                    y="56"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,206.666672,56)"
                   >
                     <g
                       id="g-svg-84"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-85"
                           fill="none"
@@ -874,16 +836,13 @@
                     <g
                       id="g-svg-78"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-79"
                           fill="rgba(0,0,255,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -893,10 +852,10 @@
                     <g
                       id="g-svg-80"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-81"
                           fill="rgba(255,0,0,1)"
@@ -920,10 +879,10 @@
                     <g
                       id="g-svg-82"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-83"
                           fill="rgba(0,128,0,1)"
@@ -946,27 +905,22 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-204"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-204" fill="none" class="items-item-page">
                   <g
                     id="g-svg-86"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
                   >
                     <g
                       id="g-svg-93"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-94"
                           fill="none"
@@ -981,16 +935,13 @@
                     <g
                       id="g-svg-87"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-88"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1000,10 +951,10 @@
                     <g
                       id="g-svg-89"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-90"
                           fill="rgba(255,0,0,1)"
@@ -1027,10 +978,10 @@
                     <g
                       id="g-svg-91"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-92"
                           fill="rgba(0,128,0,1)"
@@ -1055,18 +1006,19 @@
                   <g
                     id="g-svg-95"
                     fill="none"
-                    transform="matrix(1,0,0,1,103.333336,0)"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,103.333336,0)"
                   >
                     <g
                       id="g-svg-102"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-103"
                           fill="none"
@@ -1081,16 +1033,13 @@
                     <g
                       id="g-svg-96"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-97"
                           fill="rgba(255,0,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1100,10 +1049,10 @@
                     <g
                       id="g-svg-98"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-99"
                           fill="rgba(255,0,0,1)"
@@ -1127,10 +1076,10 @@
                     <g
                       id="g-svg-100"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-101"
                           fill="rgba(0,128,0,1)"
@@ -1155,18 +1104,19 @@
                   <g
                     id="g-svg-104"
                     fill="none"
-                    transform="matrix(1,0,0,1,206.666672,0)"
                     class="items-item"
+                    x="206.66666666666666"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,206.666672,0)"
                   >
                     <g
                       id="g-svg-111"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-112"
                           fill="none"
@@ -1181,16 +1131,13 @@
                     <g
                       id="g-svg-105"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-106"
                           fill="rgba(255,165,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1200,10 +1147,10 @@
                     <g
                       id="g-svg-107"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-108"
                           fill="rgba(255,0,0,1)"
@@ -1227,10 +1174,10 @@
                     <g
                       id="g-svg-109"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-110"
                           fill="rgba(0,128,0,1)"
@@ -1255,18 +1202,19 @@
                   <g
                     id="g-svg-113"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,28)"
                     class="items-item"
+                    x="0"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,0,28)"
                   >
                     <g
                       id="g-svg-120"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-121"
                           fill="none"
@@ -1281,16 +1229,13 @@
                     <g
                       id="g-svg-114"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-115"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1300,10 +1245,10 @@
                     <g
                       id="g-svg-116"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-117"
                           fill="rgba(255,0,0,1)"
@@ -1327,10 +1272,10 @@
                     <g
                       id="g-svg-118"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-119"
                           fill="rgba(0,128,0,1)"
@@ -1355,18 +1300,19 @@
                   <g
                     id="g-svg-122"
                     fill="none"
-                    transform="matrix(1,0,0,1,103.333336,28)"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,103.333336,28)"
                   >
                     <g
                       id="g-svg-129"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-130"
                           fill="none"
@@ -1381,16 +1327,13 @@
                     <g
                       id="g-svg-123"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-124"
                           fill="rgba(0,0,255,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1400,10 +1343,10 @@
                     <g
                       id="g-svg-125"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-126"
                           fill="rgba(255,0,0,1)"
@@ -1427,10 +1370,10 @@
                     <g
                       id="g-svg-127"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-128"
                           fill="rgba(0,128,0,1)"
@@ -1455,18 +1398,19 @@
                   <g
                     id="g-svg-131"
                     fill="none"
-                    transform="matrix(1,0,0,1,206.666672,28)"
                     class="items-item"
+                    x="206.66666666666666"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,206.666672,28)"
                   >
                     <g
                       id="g-svg-138"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-139"
                           fill="none"
@@ -1481,16 +1425,13 @@
                     <g
                       id="g-svg-132"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-133"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1500,10 +1441,10 @@
                     <g
                       id="g-svg-134"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-135"
                           fill="rgba(255,0,0,1)"
@@ -1527,10 +1468,10 @@
                     <g
                       id="g-svg-136"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-137"
                           fill="rgba(0,128,0,1)"
@@ -1555,18 +1496,19 @@
                   <g
                     id="g-svg-140"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,56)"
                     class="items-item"
+                    x="0"
+                    y="56"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,0,56)"
                   >
                     <g
                       id="g-svg-147"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-148"
                           fill="none"
@@ -1581,16 +1523,13 @@
                     <g
                       id="g-svg-141"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-142"
                           fill="rgba(255,0,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1600,10 +1539,10 @@
                     <g
                       id="g-svg-143"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-144"
                           fill="rgba(255,0,0,1)"
@@ -1627,10 +1566,10 @@
                     <g
                       id="g-svg-145"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-146"
                           fill="rgba(0,128,0,1)"
@@ -1655,18 +1594,19 @@
                   <g
                     id="g-svg-149"
                     fill="none"
-                    transform="matrix(1,0,0,1,103.333336,56)"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="56"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,103.333336,56)"
                   >
                     <g
                       id="g-svg-156"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-157"
                           fill="none"
@@ -1681,16 +1621,13 @@
                     <g
                       id="g-svg-150"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-151"
                           fill="rgba(255,165,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1700,10 +1637,10 @@
                     <g
                       id="g-svg-152"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-153"
                           fill="rgba(255,0,0,1)"
@@ -1727,10 +1664,10 @@
                     <g
                       id="g-svg-154"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-155"
                           fill="rgba(0,128,0,1)"
@@ -1755,18 +1692,19 @@
                   <g
                     id="g-svg-158"
                     fill="none"
-                    transform="matrix(1,0,0,1,206.666672,56)"
                     class="items-item"
+                    x="206.66666666666666"
+                    y="56"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,206.666672,56)"
                   >
                     <g
                       id="g-svg-165"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-166"
                           fill="none"
@@ -1781,16 +1719,13 @@
                     <g
                       id="g-svg-159"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-160"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1800,10 +1735,10 @@
                     <g
                       id="g-svg-161"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-162"
                           fill="rgba(255,0,0,1)"
@@ -1827,10 +1762,10 @@
                     <g
                       id="g-svg-163"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-164"
                           fill="rgba(0,128,0,1)"
@@ -1853,27 +1788,22 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-223"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-223" fill="none" class="items-item-page">
                   <g
                     id="g-svg-167"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
                   >
                     <g
                       id="g-svg-174"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-175"
                           fill="none"
@@ -1888,16 +1818,13 @@
                     <g
                       id="g-svg-168"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-169"
                           fill="rgba(0,0,255,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1907,10 +1834,10 @@
                     <g
                       id="g-svg-170"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-171"
                           fill="rgba(255,0,0,1)"
@@ -1934,10 +1861,10 @@
                     <g
                       id="g-svg-172"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-173"
                           fill="rgba(0,128,0,1)"
@@ -1962,18 +1889,19 @@
                   <g
                     id="g-svg-176"
                     fill="none"
-                    transform="matrix(1,0,0,1,103.333336,0)"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
+                    transform="matrix(1,0,0,1,103.333336,0)"
                   >
                     <g
                       id="g-svg-183"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-184"
                           fill="none"
@@ -1988,16 +1916,13 @@
                     <g
                       id="g-svg-177"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-178"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -2007,10 +1932,10 @@
                     <g
                       id="g-svg-179"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-180"
                           fill="rgba(255,0,0,1)"
@@ -2034,10 +1959,10 @@
                     <g
                       id="g-svg-181"
                       fill="none"
-                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-182"
                           fill="rgba(0,128,0,1)"
@@ -2071,32 +1996,30 @@
               <g
                 id="g-svg-229"
                 fill="none"
-                transform="matrix(-1,-0,0,-1,0,0)"
                 class="navigator-prev-btn-group"
+                transform="matrix(-1,-0,0,-1,0,0)"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
                     id="g-svg-230"
                     fill="rgba(0,0,0,1)"
                     class="navigator-prev-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
               <g
                 id="g-svg-231"
                 fill="none"
-                transform="matrix(1,0,0,1,40.279999,0)"
                 class="navigator-next-btn-group"
+                transform="matrix(1,0,0,1,40.279999,0)"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
                     id="g-svg-232"
                     fill="rgba(0,0,0,1)"
                     class="navigator-next-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
@@ -2106,7 +2029,7 @@
                 transform="matrix(1,0,0,1,11,0)"
                 class="navigator-page-info-group"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-234"
                     fill="rgba(0,0,0,1)"
@@ -2116,14 +2039,13 @@
                     dx="0.5"
                     font-size="12"
                     text-anchor="left"
-                    visibility="visible"
                   >
                     1/3
                   </text>
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-228"
                 fill="none"
diff --git a/__tests__/integration/snapshots/CategoryItems10.svg b/__tests__/integration/snapshots/CategoryItems10.svg
index f88a263b0..e64b80840 100644
--- a/__tests__/integration/snapshots/CategoryItems10.svg
+++ b/__tests__/integration/snapshots/CategoryItems10.svg
@@ -6,68 +6,40 @@
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-135-87">
-      <use href="#g-svg-135" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-115-67">
+      <use href="#g-svg-115" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-84"
-        fill="none"
-        width="100"
-        height="100"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-85"
-          fill="none"
-          width="100"
-          height="90"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-86"
-            fill="none"
-            class="items-navigator"
-            transform="matrix(1,0,0,1,0,0)"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-64" fill="none" width="100" height="100">
+        <g id="g-svg-65" fill="none" width="100" height="90">
+          <g id="g-svg-66" fill="none" x="0" y="0" class="items-navigator">
             <g
-              id="g-svg-87"
+              id="g-svg-67"
               fill="none"
               class="navigator-content-group"
-              clip-path="url(#clip-path-135-87)"
-              transform="matrix(1,0,0,1,0,0)"
+              clip-path="url(#clip-path-115-67)"
             >
-              <g
-                id="g-svg-88"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-16"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-68" fill="none" class="navigator-play-window">
+                <g id="g-svg-16" fill="none" class="items-item-page">
                   <g
-                    id="g-svg-89"
+                    id="g-svg-69"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="100"
                     height="23"
-                    transform="matrix(1,0,0,1,0,0)"
                   >
                     <g
-                      id="g-svg-101"
+                      id="g-svg-81"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
-                          id="g-svg-102"
+                          id="g-svg-82"
                           fill="none"
                           d="M 0,0 l 100,0 l 0,23 l-100 0 z"
                           class="legend-category-item-background"
@@ -78,35 +50,31 @@
                       </g>
                     </g>
                     <g
-                      id="g-svg-95"
+                      id="g-svg-75"
                       fill="none"
                       class="legend-category-item-marker-group"
                       transform="matrix(0.636915,0,0,0.636915,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
-                          id="g-svg-96"
+                          id="g-svg-76"
                           fill="none"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           stroke="rgba(255,192,203,1)"
-                          stroke-width="2"
                           visibility="visible"
                         />
                       </g>
                     </g>
                     <g
-                      id="g-svg-97"
+                      id="g-svg-77"
                       fill="none"
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
-                          id="g-svg-98"
+                          id="g-svg-78"
                           fill="rgba(255,0,0,1)"
                           dominant-baseline="central"
                           paint-order="stroke"
@@ -126,14 +94,14 @@
                       </g>
                     </g>
                     <g
-                      id="g-svg-99"
+                      id="g-svg-79"
                       fill="none"
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
-                          id="g-svg-100"
+                          id="g-svg-80"
                           fill="rgba(0,128,0,1)"
                           dominant-baseline="central"
                           paint-order="stroke"
@@ -154,22 +122,23 @@
                     </g>
                   </g>
                   <g
-                    id="g-svg-90"
+                    id="g-svg-70"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="28"
                     width="100"
                     height="23"
                     transform="matrix(1,0,0,1,0,28)"
                   >
                     <g
-                      id="g-svg-109"
+                      id="g-svg-89"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
-                          id="g-svg-110"
+                          id="g-svg-90"
                           fill="none"
                           d="M 0,0 l 100,0 l 0,23 l-100 0 z"
                           class="legend-category-item-background"
@@ -180,35 +149,31 @@
                       </g>
                     </g>
                     <g
-                      id="g-svg-103"
+                      id="g-svg-83"
                       fill="none"
                       class="legend-category-item-marker-group"
                       transform="matrix(0.636915,0,0,0.636915,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
-                          id="g-svg-104"
+                          id="g-svg-84"
                           fill="none"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           stroke="rgba(128,0,128,1)"
-                          stroke-width="2"
                           visibility="visible"
                         />
                       </g>
                     </g>
                     <g
-                      id="g-svg-105"
+                      id="g-svg-85"
                       fill="none"
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
-                          id="g-svg-106"
+                          id="g-svg-86"
                           fill="rgba(255,0,0,1)"
                           dominant-baseline="central"
                           paint-order="stroke"
@@ -228,14 +193,14 @@
                       </g>
                     </g>
                     <g
-                      id="g-svg-107"
+                      id="g-svg-87"
                       fill="none"
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
-                          id="g-svg-108"
+                          id="g-svg-88"
                           fill="rgba(0,128,0,1)"
                           dominant-baseline="central"
                           paint-order="stroke"
@@ -256,22 +221,23 @@
                     </g>
                   </g>
                   <g
-                    id="g-svg-91"
+                    id="g-svg-71"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="56"
                     width="100"
                     height="23"
                     transform="matrix(1,0,0,1,0,56)"
                   >
                     <g
-                      id="g-svg-117"
+                      id="g-svg-97"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
-                          id="g-svg-118"
+                          id="g-svg-98"
                           fill="none"
                           d="M 0,0 l 100,0 l 0,23 l-100 0 z"
                           class="legend-category-item-background"
@@ -282,35 +248,31 @@
                       </g>
                     </g>
                     <g
-                      id="g-svg-111"
+                      id="g-svg-91"
                       fill="none"
                       class="legend-category-item-marker-group"
                       transform="matrix(0.636915,0,0,0.636915,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
-                          id="g-svg-112"
+                          id="g-svg-92"
                           fill="none"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           stroke="rgba(255,192,203,1)"
-                          stroke-width="2"
                           visibility="visible"
                         />
                       </g>
                     </g>
                     <g
-                      id="g-svg-113"
+                      id="g-svg-93"
                       fill="none"
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
-                          id="g-svg-114"
+                          id="g-svg-94"
                           fill="rgba(255,0,0,1)"
                           dominant-baseline="central"
                           paint-order="stroke"
@@ -330,14 +292,14 @@
                       </g>
                     </g>
                     <g
-                      id="g-svg-115"
+                      id="g-svg-95"
                       fill="none"
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
-                          id="g-svg-116"
+                          id="g-svg-96"
                           fill="rgba(0,128,0,1)"
                           dominant-baseline="central"
                           paint-order="stroke"
@@ -358,22 +320,23 @@
                     </g>
                   </g>
                   <g
-                    id="g-svg-92"
+                    id="g-svg-72"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="84"
                     width="100"
                     height="23"
                     transform="matrix(1,0,0,1,0,84)"
                   >
                     <g
-                      id="g-svg-125"
+                      id="g-svg-105"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
-                          id="g-svg-126"
+                          id="g-svg-106"
                           fill="none"
                           d="M 0,0 l 100,0 l 0,23 l-100 0 z"
                           class="legend-category-item-background"
@@ -384,35 +347,31 @@
                       </g>
                     </g>
                     <g
-                      id="g-svg-119"
+                      id="g-svg-99"
                       fill="none"
                       class="legend-category-item-marker-group"
                       transform="matrix(0.636915,0,0,0.636915,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
-                          id="g-svg-120"
+                          id="g-svg-100"
                           fill="none"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           stroke="rgba(128,0,128,1)"
-                          stroke-width="2"
                           visibility="visible"
                         />
                       </g>
                     </g>
                     <g
-                      id="g-svg-121"
+                      id="g-svg-101"
                       fill="none"
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
-                          id="g-svg-122"
+                          id="g-svg-102"
                           fill="rgba(255,0,0,1)"
                           dominant-baseline="central"
                           paint-order="stroke"
@@ -432,14 +391,14 @@
                       </g>
                     </g>
                     <g
-                      id="g-svg-123"
+                      id="g-svg-103"
                       fill="none"
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
-                          id="g-svg-124"
+                          id="g-svg-104"
                           fill="rgba(0,128,0,1)"
                           dominant-baseline="central"
                           paint-order="stroke"
@@ -460,22 +419,23 @@
                     </g>
                   </g>
                   <g
-                    id="g-svg-93"
+                    id="g-svg-73"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="112"
                     width="100"
                     height="23"
                     transform="matrix(1,0,0,1,0,112)"
                   >
                     <g
-                      id="g-svg-133"
+                      id="g-svg-113"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
-                          id="g-svg-134"
+                          id="g-svg-114"
                           fill="none"
                           d="M 0,0 l 100,0 l 0,23 l-100 0 z"
                           class="legend-category-item-background"
@@ -486,35 +446,31 @@
                       </g>
                     </g>
                     <g
-                      id="g-svg-127"
+                      id="g-svg-107"
                       fill="none"
                       class="legend-category-item-marker-group"
                       transform="matrix(0.636915,0,0,0.636915,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
-                          id="g-svg-128"
+                          id="g-svg-108"
                           fill="none"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           stroke="rgba(255,192,203,1)"
-                          stroke-width="2"
                           visibility="visible"
                         />
                       </g>
                     </g>
                     <g
-                      id="g-svg-129"
+                      id="g-svg-109"
                       fill="none"
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
-                          id="g-svg-130"
+                          id="g-svg-110"
                           fill="rgba(255,0,0,1)"
                           dominant-baseline="central"
                           paint-order="stroke"
@@ -534,14 +490,14 @@
                       </g>
                     </g>
                     <g
-                      id="g-svg-131"
+                      id="g-svg-111"
                       fill="none"
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
-                          id="g-svg-132"
+                          id="g-svg-112"
                           fill="rgba(0,128,0,1)"
                           dominant-baseline="central"
                           paint-order="stroke"
@@ -564,9 +520,9 @@
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
-                id="g-svg-135"
+                id="g-svg-115"
                 fill="none"
                 d="M 0,0 l 100,0 l 0,135 l-100 0 z"
                 class="navigator-clip-path"
@@ -574,12 +530,7 @@
                 height="135"
               />
             </g>
-            <g
-              id="g-svg-136"
-              fill="none"
-              class="navigator-controller"
-              transform="matrix(1,0,0,1,0,0)"
-            />
+            <g id="g-svg-116" fill="none" class="navigator-controller" />
           </g>
         </g>
       </g>
diff --git a/__tests__/integration/snapshots/CategoryItems11.svg b/__tests__/integration/snapshots/CategoryItems11.svg
index 738a3462b..86163f26b 100644
--- a/__tests__/integration/snapshots/CategoryItems11.svg
+++ b/__tests__/integration/snapshots/CategoryItems11.svg
@@ -6,66 +6,38 @@
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-17-2">
-      <use href="#g-svg-17" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-17-2">
+      <use href="#g-svg-17" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-27"
-        fill="none"
-        width="100"
-        height="20"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-28"
-          fill="none"
-          width="600"
-          height="30"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-27" fill="none" width="100" height="20">
+        <g id="g-svg-28" fill="none" width="600" height="30">
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
               clip-path="url(#clip-path-17-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-14"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-14" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="96.48000030517579"
                     height="23"
                   >
                     <g
                       id="g-svg-12"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-13"
                           fill="none"
@@ -80,17 +52,16 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.636915,0,0,0.636915,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.636915,0,0,0.636915,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-7"
                           fill="none"
-                          d="M 0,6 A 6 6 0 1 0 12 6 A 6 6 0 1 0 0 6 Z"
+                          d="M -6,0 A 6 6 0 1 0 6 0 A 6 6 0 1 0 -6 0 Z"
                           class="legend-category-item-marker"
                           stroke="rgba(255,165,0,1)"
-                          stroke-width="2"
                           visibility="visible"
                         />
                       </g>
@@ -98,10 +69,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(255,0,0,1)"
@@ -125,10 +96,10 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,53.240002,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,53.240002,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-11"
                           fill="rgba(0,128,0,1)"
@@ -153,13 +124,8 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-4"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="navigator-controller"
-            />
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-4" fill="none" class="navigator-controller" />
+            <g>
               <path
                 id="g-svg-17"
                 fill="none"
diff --git a/__tests__/integration/snapshots/CategoryItems12.svg b/__tests__/integration/snapshots/CategoryItems12.svg
index d312d0ddc..87acad2c6 100644
--- a/__tests__/integration/snapshots/CategoryItems12.svg
+++ b/__tests__/integration/snapshots/CategoryItems12.svg
@@ -6,66 +6,38 @@
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-56-2">
-      <use href="#g-svg-56" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-56-2">
+      <use href="#g-svg-56" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-18"
-        fill="none"
-        width="150"
-        height="20"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-19"
-          fill="none"
-          width="565"
-          height="40"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-18" fill="none" width="150" height="20">
+        <g id="g-svg-19" fill="none" width="565" height="40" x="0" y="0">
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
               clip-path="url(#clip-path-56-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-45"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-45" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="21.8"
                     height="23"
                   >
                     <g
                       id="g-svg-11"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-12"
                           fill="rgba(0,0,0,0)"
@@ -80,14 +52,14 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-7"
                           fill="none"
-                          d="M 0,6 A 6 6 0 1 0 12 6 A 6 6 0 1 0 0 6 Z"
+                          d="M -6,0 A 6 6 0 1 0 6 0 A 6 6 0 1 0 -6 0 Z"
                           class="legend-category-item-marker"
                           stroke="rgba(91,143,249,1)"
                           visibility="visible"
@@ -97,10 +69,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,13,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,13,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(0,0,0,1)"
@@ -125,25 +97,25 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-13"
                     fill="none"
-                    transform="matrix(1,0,0,1,29.799999,0)"
                     class="items-item"
+                    x="29.8"
+                    y="0"
                     width="21.92"
                     height="23"
+                    transform="matrix(1,0,0,1,29.799999,0)"
                   >
                     <g
                       id="g-svg-19"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-20"
                           fill="rgba(0,0,0,0)"
@@ -158,14 +130,14 @@
                     <g
                       id="g-svg-14"
                       fill="none"
-                      transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-15"
                           fill="none"
-                          d="M 0,6 A 6 6 0 1 0 12 6 A 6 6 0 1 0 0 6 Z"
+                          d="M -6,0 A 6 6 0 1 0 6 0 A 6 6 0 1 0 -6 0 Z"
                           class="legend-category-item-marker"
                           stroke="rgba(90,216,166,1)"
                           visibility="visible"
@@ -175,10 +147,10 @@
                     <g
                       id="g-svg-16"
                       fill="none"
-                      transform="matrix(1,0,0,1,13,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,13,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-17"
                           fill="rgba(0,0,0,1)"
@@ -203,25 +175,25 @@
                     <g
                       id="g-svg-18"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-21"
                     fill="none"
-                    transform="matrix(1,0,0,1,59.720001,0)"
                     class="items-item"
+                    x="59.72"
+                    y="0"
                     width="21.8"
                     height="23"
+                    transform="matrix(1,0,0,1,59.720001,0)"
                   >
                     <g
                       id="g-svg-27"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-28"
                           fill="rgba(0,0,0,0)"
@@ -236,14 +208,14 @@
                     <g
                       id="g-svg-22"
                       fill="none"
-                      transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-23"
                           fill="none"
-                          d="M 0,6 A 6 6 0 1 0 12 6 A 6 6 0 1 0 0 6 Z"
+                          d="M -6,0 A 6 6 0 1 0 6 0 A 6 6 0 1 0 -6 0 Z"
                           class="legend-category-item-marker"
                           stroke="rgba(93,112,146,1)"
                           visibility="visible"
@@ -253,10 +225,10 @@
                     <g
                       id="g-svg-24"
                       fill="none"
-                      transform="matrix(1,0,0,1,13,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,13,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-25"
                           fill="rgba(0,0,0,1)"
@@ -281,25 +253,25 @@
                     <g
                       id="g-svg-26"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-29"
                     fill="none"
-                    transform="matrix(1,0,0,1,89.519997,0)"
                     class="items-item"
+                    x="89.52"
+                    y="0"
                     width="21.68"
                     height="23"
+                    transform="matrix(1,0,0,1,89.519997,0)"
                   >
                     <g
                       id="g-svg-35"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-36"
                           fill="rgba(0,0,0,0)"
@@ -314,14 +286,14 @@
                     <g
                       id="g-svg-30"
                       fill="none"
-                      transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-31"
                           fill="none"
-                          d="M 0,6 A 6 6 0 1 0 12 6 A 6 6 0 1 0 0 6 Z"
+                          d="M -6,0 A 6 6 0 1 0 6 0 A 6 6 0 1 0 -6 0 Z"
                           class="legend-category-item-marker"
                           stroke="rgba(246,189,22,1)"
                           visibility="visible"
@@ -331,10 +303,10 @@
                     <g
                       id="g-svg-32"
                       fill="none"
-                      transform="matrix(1,0,0,1,13,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,13,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-33"
                           fill="rgba(0,0,0,1)"
@@ -359,25 +331,25 @@
                     <g
                       id="g-svg-34"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-37"
                     fill="none"
-                    transform="matrix(1,0,0,1,119.199997,0)"
                     class="items-item"
+                    x="119.19999999999999"
+                    y="0"
                     width="21.560000000000002"
                     height="23"
+                    transform="matrix(1,0,0,1,119.199997,0)"
                   >
                     <g
                       id="g-svg-43"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-44"
                           fill="rgba(0,0,0,0)"
@@ -392,14 +364,14 @@
                     <g
                       id="g-svg-38"
                       fill="none"
-                      transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.588099,0,0,0.588099,4,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-39"
                           fill="none"
-                          d="M 0,6 A 6 6 0 1 0 12 6 A 6 6 0 1 0 0 6 Z"
+                          d="M -6,0 A 6 6 0 1 0 6 0 A 6 6 0 1 0 -6 0 Z"
                           class="legend-category-item-marker"
                           stroke="rgba(111,94,249,1)"
                           visibility="visible"
@@ -409,10 +381,10 @@
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,13,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,13,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-41"
                           fill="rgba(0,0,0,1)"
@@ -437,20 +409,14 @@
                     <g
                       id="g-svg-42"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-4"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="navigator-controller"
-            />
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-4" fill="none" class="navigator-controller" />
+            <g>
               <path
                 id="g-svg-56"
                 fill="none"
diff --git a/__tests__/integration/snapshots/CategoryItems2.svg b/__tests__/integration/snapshots/CategoryItems2.svg
index 066d0c801..14f9a32f2 100644
--- a/__tests__/integration/snapshots/CategoryItems2.svg
+++ b/__tests__/integration/snapshots/CategoryItems2.svg
@@ -1,65 +1,43 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="355"
-  height="90"
+  width="323.78000034332274"
+  height="39.5"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-423-238">
-      <use href="#g-svg-423" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-423-238">
+      <use href="#g-svg-423" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-235" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-236"
-          fill="none"
-          width="355"
-          height="90"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-237"
-            fill="none"
-            class="items-navigator"
-            transform="matrix(1,0,0,1,0,0)"
-          >
+  <g id="g-svg-camera" transform="matrix(1,0,0,1,0.000001,0)">
+    <g id="g-root" fill="none">
+      <g id="g-svg-235" fill="none">
+        <g id="g-svg-236" fill="none" width="355" height="90">
+          <g id="g-svg-237" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-238"
               fill="none"
               class="navigator-content-group"
               clip-path="url(#clip-path-423-238)"
-              transform="matrix(1,0,0,1,0,0)"
             >
-              <g
-                id="g-svg-239"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-61"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-239" fill="none" class="navigator-play-window">
+                <g id="g-svg-61" fill="none" class="items-item-page">
                   <g
                     id="g-svg-240"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
-                    transform="matrix(1,0,0,1,0,0)"
                   >
                     <g
                       id="g-svg-267"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-268"
                           fill="none"
@@ -77,13 +55,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-262"
                           fill="rgba(255,192,203,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -96,7 +71,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-264"
                           fill="rgba(255,0,0,1)"
@@ -123,7 +98,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-266"
                           fill="rgba(0,128,0,1)"
@@ -149,6 +124,8 @@
                     id="g-svg-241"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,0,28)"
@@ -157,9 +134,8 @@
                       id="g-svg-275"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-276"
                           fill="none"
@@ -177,13 +153,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-270"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -196,7 +169,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-272"
                           fill="rgba(255,0,0,1)"
@@ -223,7 +196,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-274"
                           fill="rgba(0,128,0,1)"
@@ -249,6 +222,8 @@
                     id="g-svg-242"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="56"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,0,56)"
@@ -257,9 +232,8 @@
                       id="g-svg-283"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-284"
                           fill="none"
@@ -277,13 +251,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-278"
                           fill="rgba(255,192,203,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -296,7 +267,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-280"
                           fill="rgba(255,0,0,1)"
@@ -323,7 +294,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-282"
                           fill="rgba(0,128,0,1)"
@@ -349,6 +320,8 @@
                     id="g-svg-243"
                     fill="none"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,103.333336,0)"
@@ -357,9 +330,8 @@
                       id="g-svg-291"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-292"
                           fill="none"
@@ -377,13 +349,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-286"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -396,7 +365,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-288"
                           fill="rgba(255,0,0,1)"
@@ -423,7 +392,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-290"
                           fill="rgba(0,128,0,1)"
@@ -449,6 +418,8 @@
                     id="g-svg-244"
                     fill="none"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,103.333336,28)"
@@ -457,9 +428,8 @@
                       id="g-svg-299"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-300"
                           fill="none"
@@ -477,13 +447,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-294"
                           fill="rgba(255,192,203,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -496,7 +463,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-296"
                           fill="rgba(255,0,0,1)"
@@ -523,7 +490,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-298"
                           fill="rgba(0,128,0,1)"
@@ -549,6 +516,8 @@
                     id="g-svg-245"
                     fill="none"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="56"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,103.333336,56)"
@@ -557,9 +526,8 @@
                       id="g-svg-307"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-308"
                           fill="none"
@@ -577,13 +545,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-302"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -596,7 +561,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-304"
                           fill="rgba(255,0,0,1)"
@@ -623,7 +588,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-306"
                           fill="rgba(0,128,0,1)"
@@ -649,6 +614,8 @@
                     id="g-svg-246"
                     fill="none"
                     class="items-item"
+                    x="206.66666666666666"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,206.666672,0)"
@@ -657,9 +624,8 @@
                       id="g-svg-315"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-316"
                           fill="none"
@@ -677,13 +643,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-310"
                           fill="rgba(255,192,203,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -696,7 +659,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-312"
                           fill="rgba(255,0,0,1)"
@@ -723,7 +686,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-314"
                           fill="rgba(0,128,0,1)"
@@ -749,6 +712,8 @@
                     id="g-svg-247"
                     fill="none"
                     class="items-item"
+                    x="206.66666666666666"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,206.666672,28)"
@@ -757,9 +722,8 @@
                       id="g-svg-323"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-324"
                           fill="none"
@@ -777,13 +741,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-318"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -796,7 +757,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-320"
                           fill="rgba(255,0,0,1)"
@@ -823,7 +784,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-322"
                           fill="rgba(0,128,0,1)"
@@ -849,6 +810,8 @@
                     id="g-svg-248"
                     fill="none"
                     class="items-item"
+                    x="206.66666666666666"
+                    y="56"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,206.666672,56)"
@@ -857,9 +820,8 @@
                       id="g-svg-331"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-332"
                           fill="none"
@@ -877,13 +839,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-326"
                           fill="rgba(255,192,203,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -896,7 +855,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-328"
                           fill="rgba(255,0,0,1)"
@@ -923,7 +882,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-330"
                           fill="rgba(0,128,0,1)"
@@ -946,27 +905,22 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-80"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-80" fill="none" class="items-item-page">
                   <g
                     id="g-svg-249"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
-                    transform="matrix(1,0,0,1,0,0)"
                   >
                     <g
                       id="g-svg-340"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-341"
                           fill="none"
@@ -984,13 +938,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-335"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1003,7 +954,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-337"
                           fill="rgba(255,0,0,1)"
@@ -1030,7 +981,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-339"
                           fill="rgba(0,128,0,1)"
@@ -1056,6 +1007,8 @@
                     id="g-svg-250"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,0,28)"
@@ -1064,9 +1017,8 @@
                       id="g-svg-348"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-349"
                           fill="none"
@@ -1084,13 +1036,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-343"
                           fill="rgba(255,192,203,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1103,7 +1052,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-345"
                           fill="rgba(255,0,0,1)"
@@ -1130,7 +1079,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-347"
                           fill="rgba(0,128,0,1)"
@@ -1156,6 +1105,8 @@
                     id="g-svg-251"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="56"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,0,56)"
@@ -1164,9 +1115,8 @@
                       id="g-svg-356"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-357"
                           fill="none"
@@ -1184,13 +1134,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-351"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1203,7 +1150,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-353"
                           fill="rgba(255,0,0,1)"
@@ -1230,7 +1177,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-355"
                           fill="rgba(0,128,0,1)"
@@ -1256,6 +1203,8 @@
                     id="g-svg-252"
                     fill="none"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,103.333336,0)"
@@ -1264,9 +1213,8 @@
                       id="g-svg-364"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-365"
                           fill="none"
@@ -1284,13 +1232,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-359"
                           fill="rgba(255,192,203,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1303,7 +1248,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-361"
                           fill="rgba(255,0,0,1)"
@@ -1330,7 +1275,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-363"
                           fill="rgba(0,128,0,1)"
@@ -1356,6 +1301,8 @@
                     id="g-svg-253"
                     fill="none"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,103.333336,28)"
@@ -1364,9 +1311,8 @@
                       id="g-svg-372"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-373"
                           fill="none"
@@ -1384,13 +1330,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-367"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1403,7 +1346,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-369"
                           fill="rgba(255,0,0,1)"
@@ -1430,7 +1373,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-371"
                           fill="rgba(0,128,0,1)"
@@ -1456,6 +1399,8 @@
                     id="g-svg-254"
                     fill="none"
                     class="items-item"
+                    x="103.33333333333333"
+                    y="56"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,103.333336,56)"
@@ -1464,9 +1409,8 @@
                       id="g-svg-380"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-381"
                           fill="none"
@@ -1484,13 +1428,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-375"
                           fill="rgba(255,192,203,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1503,7 +1444,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-377"
                           fill="rgba(255,0,0,1)"
@@ -1530,7 +1471,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-379"
                           fill="rgba(0,128,0,1)"
@@ -1556,6 +1497,8 @@
                     id="g-svg-255"
                     fill="none"
                     class="items-item"
+                    x="206.66666666666666"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,206.666672,0)"
@@ -1564,9 +1507,8 @@
                       id="g-svg-388"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-389"
                           fill="none"
@@ -1584,13 +1526,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-383"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1603,7 +1542,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-385"
                           fill="rgba(255,0,0,1)"
@@ -1630,7 +1569,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-387"
                           fill="rgba(0,128,0,1)"
@@ -1656,6 +1595,8 @@
                     id="g-svg-256"
                     fill="none"
                     class="items-item"
+                    x="206.66666666666666"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,206.666672,28)"
@@ -1664,9 +1605,8 @@
                       id="g-svg-396"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-397"
                           fill="none"
@@ -1684,13 +1624,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-391"
                           fill="rgba(255,192,203,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1703,7 +1640,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-393"
                           fill="rgba(255,0,0,1)"
@@ -1730,7 +1667,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-395"
                           fill="rgba(0,128,0,1)"
@@ -1756,6 +1693,8 @@
                     id="g-svg-257"
                     fill="none"
                     class="items-item"
+                    x="206.66666666666666"
+                    y="56"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,206.666672,56)"
@@ -1764,9 +1703,8 @@
                       id="g-svg-404"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-405"
                           fill="none"
@@ -1784,13 +1722,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-399"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1803,7 +1738,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-401"
                           fill="rgba(255,0,0,1)"
@@ -1830,7 +1765,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-403"
                           fill="rgba(0,128,0,1)"
@@ -1853,27 +1788,22 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-99"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-99" fill="none" class="items-item-page">
                   <g
                     id="g-svg-258"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="93.33333333333333"
                     height="23"
-                    transform="matrix(1,0,0,1,0,0)"
                   >
                     <g
                       id="g-svg-413"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-414"
                           fill="none"
@@ -1891,13 +1821,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-408"
                           fill="rgba(255,192,203,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1910,7 +1837,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-410"
                           fill="rgba(255,0,0,1)"
@@ -1937,7 +1864,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-412"
                           fill="rgba(0,128,0,1)"
@@ -1963,6 +1890,8 @@
                     id="g-svg-259"
                     fill="none"
                     class="items-item"
+                    x="0"
+                    y="28"
                     width="93.33333333333333"
                     height="23"
                     transform="matrix(1,0,0,1,0,28)"
@@ -1971,9 +1900,8 @@
                       id="g-svg-421"
                       fill="none"
                       class="legend-category-item-background-group"
-                      transform="matrix(1,0,0,1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-422"
                           fill="none"
@@ -1991,13 +1919,10 @@
                       class="legend-category-item-marker-group"
                       transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-416"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -2010,7 +1935,7 @@
                       class="legend-category-item-label-group"
                       transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-418"
                           fill="rgba(255,0,0,1)"
@@ -2037,7 +1962,7 @@
                       class="legend-category-item-value-group"
                       transform="matrix(1,0,0,1,51.666668,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-420"
                           fill="rgba(0,128,0,1)"
@@ -2062,7 +1987,7 @@
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-423"
                 fill="none"
@@ -2084,11 +2009,11 @@
                 class="navigator-prev-btn-group"
                 transform="matrix(0,-1,1,0,9.140000,-17)"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
                     id="g-svg-426"
                     fill="rgba(0,0,0,1)"
-                    d="M 0,0 L 12,6 L 0,12 Z"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                     class="navigator-prev-btn"
                     visibility="visible"
                   />
@@ -2100,11 +2025,11 @@
                 class="navigator-next-btn-group"
                 transform="matrix(0,1,-1,0,9.140000,17)"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
                     id="g-svg-428"
                     fill="rgba(0,0,0,1)"
-                    d="M 0,0 L 12,6 L 0,12 Z"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                     class="navigator-next-btn"
                     visibility="visible"
                   />
@@ -2116,7 +2041,7 @@
                 class="navigator-page-info-group"
                 transform="matrix(1,0,0,1,9.140000,0)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-430"
                     fill="rgba(0,0,0,1)"
diff --git a/__tests__/integration/snapshots/CategoryItems3.svg b/__tests__/integration/snapshots/CategoryItems3.svg
index a98b6ad9b..b9fb4c2f4 100644
--- a/__tests__/integration/snapshots/CategoryItems3.svg
+++ b/__tests__/integration/snapshots/CategoryItems3.svg
@@ -1,65 +1,43 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="155"
-  height="210"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-229-2">
-      <use href="#g-svg-229" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-229-2">
+      <use href="#g-svg-229" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-104" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-105"
-          fill="none"
-          width="155"
-          height="210"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-104" fill="none">
+        <g id="g-svg-105" fill="none" width="155" height="210">
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
               clip-path="url(#clip-path-229-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-185"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-185" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="100"
                     height="23"
                   >
                     <g
                       id="g-svg-12"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-13"
                           fill="none"
@@ -74,14 +52,16 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <path
                           id="g-svg-7"
                           fill="rgba(255,0,0,1)"
-                          d="M 0,0 l 16,0 l 0,16 l-16 0 z"
+                          d="M -8,-8 l 16,0 l 0,16 l-16 0 z"
+                          x="-8"
+                          y="-8"
                           width="16"
                           height="16"
                           class="legend-category-item-marker"
@@ -92,10 +72,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(255,0,0,1)"
@@ -119,10 +99,10 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-11"
                           fill="rgba(0,128,0,1)"
@@ -147,18 +127,19 @@
                   <g
                     id="g-svg-14"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,33)"
                     class="items-item"
+                    x="0"
+                    y="33"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,33)"
                   >
                     <g
                       id="g-svg-21"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-22"
                           fill="none"
@@ -173,16 +154,15 @@
                     <g
                       id="g-svg-15"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-16"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-8,-8)"
-                          cx="8"
-                          cy="8"
+                          cx="0"
+                          cy="0"
                           r="8"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -192,10 +172,10 @@
                     <g
                       id="g-svg-17"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-18"
                           fill="rgba(255,0,0,1)"
@@ -219,10 +199,10 @@
                     <g
                       id="g-svg-19"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-20"
                           fill="rgba(0,128,0,1)"
@@ -247,18 +227,19 @@
                   <g
                     id="g-svg-23"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,66)"
                     class="items-item"
+                    x="0"
+                    y="66"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,66)"
                   >
                     <g
                       id="g-svg-30"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-31"
                           fill="none"
@@ -273,14 +254,16 @@
                     <g
                       id="g-svg-24"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <path
                           id="g-svg-25"
                           fill="rgba(255,0,0,1)"
-                          d="M 0,0 l 16,0 l 0,16 l-16 0 z"
+                          d="M -8,-8 l 16,0 l 0,16 l-16 0 z"
+                          x="-8"
+                          y="-8"
                           width="16"
                           height="16"
                           class="legend-category-item-marker"
@@ -291,10 +274,10 @@
                     <g
                       id="g-svg-26"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-27"
                           fill="rgba(255,0,0,1)"
@@ -318,10 +301,10 @@
                     <g
                       id="g-svg-28"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-29"
                           fill="rgba(0,128,0,1)"
@@ -346,18 +329,19 @@
                   <g
                     id="g-svg-32"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,99)"
                     class="items-item"
+                    x="0"
+                    y="99"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,99)"
                   >
                     <g
                       id="g-svg-39"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-40"
                           fill="none"
@@ -372,16 +356,15 @@
                     <g
                       id="g-svg-33"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-34"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-8,-8)"
-                          cx="8"
-                          cy="8"
+                          cx="0"
+                          cy="0"
                           r="8"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -391,10 +374,10 @@
                     <g
                       id="g-svg-35"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-36"
                           fill="rgba(255,0,0,1)"
@@ -418,10 +401,10 @@
                     <g
                       id="g-svg-37"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-38"
                           fill="rgba(0,128,0,1)"
@@ -446,18 +429,19 @@
                   <g
                     id="g-svg-41"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,132)"
                     class="items-item"
+                    x="0"
+                    y="132"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,132)"
                   >
                     <g
                       id="g-svg-48"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-49"
                           fill="none"
@@ -472,14 +456,16 @@
                     <g
                       id="g-svg-42"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <path
                           id="g-svg-43"
                           fill="rgba(255,0,0,1)"
-                          d="M 0,0 l 16,0 l 0,16 l-16 0 z"
+                          d="M -8,-8 l 16,0 l 0,16 l-16 0 z"
+                          x="-8"
+                          y="-8"
                           width="16"
                           height="16"
                           class="legend-category-item-marker"
@@ -490,10 +476,10 @@
                     <g
                       id="g-svg-44"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-45"
                           fill="rgba(255,0,0,1)"
@@ -517,10 +503,10 @@
                     <g
                       id="g-svg-46"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-47"
                           fill="rgba(0,128,0,1)"
@@ -543,27 +529,22 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-196"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-196" fill="none" class="items-item-page">
                   <g
                     id="g-svg-50"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="100"
                     height="23"
                   >
                     <g
                       id="g-svg-57"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-58"
                           fill="none"
@@ -578,16 +559,15 @@
                     <g
                       id="g-svg-51"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-52"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-8,-8)"
-                          cx="8"
-                          cy="8"
+                          cx="0"
+                          cy="0"
                           r="8"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -597,10 +577,10 @@
                     <g
                       id="g-svg-53"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-54"
                           fill="rgba(255,0,0,1)"
@@ -624,10 +604,10 @@
                     <g
                       id="g-svg-55"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-56"
                           fill="rgba(0,128,0,1)"
@@ -652,18 +632,19 @@
                   <g
                     id="g-svg-59"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,33)"
                     class="items-item"
+                    x="0"
+                    y="33"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,33)"
                   >
                     <g
                       id="g-svg-66"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-67"
                           fill="none"
@@ -678,14 +659,16 @@
                     <g
                       id="g-svg-60"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <path
                           id="g-svg-61"
                           fill="rgba(255,0,0,1)"
-                          d="M 0,0 l 16,0 l 0,16 l-16 0 z"
+                          d="M -8,-8 l 16,0 l 0,16 l-16 0 z"
+                          x="-8"
+                          y="-8"
                           width="16"
                           height="16"
                           class="legend-category-item-marker"
@@ -696,10 +679,10 @@
                     <g
                       id="g-svg-62"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-63"
                           fill="rgba(255,0,0,1)"
@@ -723,10 +706,10 @@
                     <g
                       id="g-svg-64"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-65"
                           fill="rgba(0,128,0,1)"
@@ -751,18 +734,19 @@
                   <g
                     id="g-svg-68"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,66)"
                     class="items-item"
+                    x="0"
+                    y="66"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,66)"
                   >
                     <g
                       id="g-svg-75"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-76"
                           fill="none"
@@ -777,16 +761,15 @@
                     <g
                       id="g-svg-69"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-70"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-8,-8)"
-                          cx="8"
-                          cy="8"
+                          cx="0"
+                          cy="0"
                           r="8"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -796,10 +779,10 @@
                     <g
                       id="g-svg-71"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-72"
                           fill="rgba(255,0,0,1)"
@@ -823,10 +806,10 @@
                     <g
                       id="g-svg-73"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-74"
                           fill="rgba(0,128,0,1)"
@@ -851,18 +834,19 @@
                   <g
                     id="g-svg-77"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,99)"
                     class="items-item"
+                    x="0"
+                    y="99"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,99)"
                   >
                     <g
                       id="g-svg-84"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-85"
                           fill="none"
@@ -877,14 +861,16 @@
                     <g
                       id="g-svg-78"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <path
                           id="g-svg-79"
                           fill="rgba(255,0,0,1)"
-                          d="M 0,0 l 16,0 l 0,16 l-16 0 z"
+                          d="M -8,-8 l 16,0 l 0,16 l-16 0 z"
+                          x="-8"
+                          y="-8"
                           width="16"
                           height="16"
                           class="legend-category-item-marker"
@@ -895,10 +881,10 @@
                     <g
                       id="g-svg-80"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-81"
                           fill="rgba(255,0,0,1)"
@@ -922,10 +908,10 @@
                     <g
                       id="g-svg-82"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-83"
                           fill="rgba(0,128,0,1)"
@@ -950,18 +936,19 @@
                   <g
                     id="g-svg-86"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,132)"
                     class="items-item"
+                    x="0"
+                    y="132"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,132)"
                   >
                     <g
                       id="g-svg-93"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-94"
                           fill="none"
@@ -976,16 +963,15 @@
                     <g
                       id="g-svg-87"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-88"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-8,-8)"
-                          cx="8"
-                          cy="8"
+                          cx="0"
+                          cy="0"
                           r="8"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -995,10 +981,10 @@
                     <g
                       id="g-svg-89"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-90"
                           fill="rgba(255,0,0,1)"
@@ -1022,10 +1008,10 @@
                     <g
                       id="g-svg-91"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-92"
                           fill="rgba(0,128,0,1)"
@@ -1048,27 +1034,22 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-207"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-207" fill="none" class="items-item-page">
                   <g
                     id="g-svg-95"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="100"
                     height="23"
                   >
                     <g
                       id="g-svg-102"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-103"
                           fill="none"
@@ -1083,14 +1064,16 @@
                     <g
                       id="g-svg-96"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <path
                           id="g-svg-97"
                           fill="rgba(255,0,0,1)"
-                          d="M 0,0 l 16,0 l 0,16 l-16 0 z"
+                          d="M -8,-8 l 16,0 l 0,16 l-16 0 z"
+                          x="-8"
+                          y="-8"
                           width="16"
                           height="16"
                           class="legend-category-item-marker"
@@ -1101,10 +1084,10 @@
                     <g
                       id="g-svg-98"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-99"
                           fill="rgba(255,0,0,1)"
@@ -1128,10 +1111,10 @@
                     <g
                       id="g-svg-100"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-101"
                           fill="rgba(0,128,0,1)"
@@ -1156,18 +1139,19 @@
                   <g
                     id="g-svg-104"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,33)"
                     class="items-item"
+                    x="0"
+                    y="33"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,33)"
                   >
                     <g
                       id="g-svg-111"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-112"
                           fill="none"
@@ -1182,16 +1166,15 @@
                     <g
                       id="g-svg-105"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-106"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-8,-8)"
-                          cx="8"
-                          cy="8"
+                          cx="0"
+                          cy="0"
                           r="8"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1201,10 +1184,10 @@
                     <g
                       id="g-svg-107"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-108"
                           fill="rgba(255,0,0,1)"
@@ -1228,10 +1211,10 @@
                     <g
                       id="g-svg-109"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-110"
                           fill="rgba(0,128,0,1)"
@@ -1256,18 +1239,19 @@
                   <g
                     id="g-svg-113"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,66)"
                     class="items-item"
+                    x="0"
+                    y="66"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,66)"
                   >
                     <g
                       id="g-svg-120"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-121"
                           fill="none"
@@ -1282,14 +1266,16 @@
                     <g
                       id="g-svg-114"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <path
                           id="g-svg-115"
                           fill="rgba(255,0,0,1)"
-                          d="M 0,0 l 16,0 l 0,16 l-16 0 z"
+                          d="M -8,-8 l 16,0 l 0,16 l-16 0 z"
+                          x="-8"
+                          y="-8"
                           width="16"
                           height="16"
                           class="legend-category-item-marker"
@@ -1300,10 +1286,10 @@
                     <g
                       id="g-svg-116"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-117"
                           fill="rgba(255,0,0,1)"
@@ -1327,10 +1313,10 @@
                     <g
                       id="g-svg-118"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-119"
                           fill="rgba(0,128,0,1)"
@@ -1355,18 +1341,19 @@
                   <g
                     id="g-svg-122"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,99)"
                     class="items-item"
+                    x="0"
+                    y="99"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,99)"
                   >
                     <g
                       id="g-svg-129"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-130"
                           fill="none"
@@ -1381,16 +1368,15 @@
                     <g
                       id="g-svg-123"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-124"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-8,-8)"
-                          cx="8"
-                          cy="8"
+                          cx="0"
+                          cy="0"
                           r="8"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1400,10 +1386,10 @@
                     <g
                       id="g-svg-125"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-126"
                           fill="rgba(255,0,0,1)"
@@ -1427,10 +1413,10 @@
                     <g
                       id="g-svg-127"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-128"
                           fill="rgba(0,128,0,1)"
@@ -1455,18 +1441,19 @@
                   <g
                     id="g-svg-131"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,132)"
                     class="items-item"
+                    x="0"
+                    y="132"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,132)"
                   >
                     <g
                       id="g-svg-138"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-139"
                           fill="none"
@@ -1481,14 +1468,16 @@
                     <g
                       id="g-svg-132"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <path
                           id="g-svg-133"
                           fill="rgba(255,0,0,1)"
-                          d="M 0,0 l 16,0 l 0,16 l-16 0 z"
+                          d="M -8,-8 l 16,0 l 0,16 l-16 0 z"
+                          x="-8"
+                          y="-8"
                           width="16"
                           height="16"
                           class="legend-category-item-marker"
@@ -1499,10 +1488,10 @@
                     <g
                       id="g-svg-134"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-135"
                           fill="rgba(255,0,0,1)"
@@ -1526,10 +1515,10 @@
                     <g
                       id="g-svg-136"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-137"
                           fill="rgba(0,128,0,1)"
@@ -1552,27 +1541,22 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-218"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-218" fill="none" class="items-item-page">
                   <g
                     id="g-svg-140"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="100"
                     height="23"
                   >
                     <g
                       id="g-svg-147"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-148"
                           fill="none"
@@ -1587,16 +1571,15 @@
                     <g
                       id="g-svg-141"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-142"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-8,-8)"
-                          cx="8"
-                          cy="8"
+                          cx="0"
+                          cy="0"
                           r="8"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1606,10 +1589,10 @@
                     <g
                       id="g-svg-143"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-144"
                           fill="rgba(255,0,0,1)"
@@ -1633,10 +1616,10 @@
                     <g
                       id="g-svg-145"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-146"
                           fill="rgba(0,128,0,1)"
@@ -1661,18 +1644,19 @@
                   <g
                     id="g-svg-149"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,33)"
                     class="items-item"
+                    x="0"
+                    y="33"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,33)"
                   >
                     <g
                       id="g-svg-156"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-157"
                           fill="none"
@@ -1687,14 +1671,16 @@
                     <g
                       id="g-svg-150"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <path
                           id="g-svg-151"
                           fill="rgba(255,0,0,1)"
-                          d="M 0,0 l 16,0 l 0,16 l-16 0 z"
+                          d="M -8,-8 l 16,0 l 0,16 l-16 0 z"
+                          x="-8"
+                          y="-8"
                           width="16"
                           height="16"
                           class="legend-category-item-marker"
@@ -1705,10 +1691,10 @@
                     <g
                       id="g-svg-152"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-153"
                           fill="rgba(255,0,0,1)"
@@ -1732,10 +1718,10 @@
                     <g
                       id="g-svg-154"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-155"
                           fill="rgba(0,128,0,1)"
@@ -1760,18 +1746,19 @@
                   <g
                     id="g-svg-158"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,66)"
                     class="items-item"
+                    x="0"
+                    y="66"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,66)"
                   >
                     <g
                       id="g-svg-165"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-166"
                           fill="none"
@@ -1786,16 +1773,15 @@
                     <g
                       id="g-svg-159"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-160"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-8,-8)"
-                          cx="8"
-                          cy="8"
+                          cx="0"
+                          cy="0"
                           r="8"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1805,10 +1791,10 @@
                     <g
                       id="g-svg-161"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-162"
                           fill="rgba(255,0,0,1)"
@@ -1832,10 +1818,10 @@
                     <g
                       id="g-svg-163"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-164"
                           fill="rgba(0,128,0,1)"
@@ -1860,18 +1846,19 @@
                   <g
                     id="g-svg-167"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,99)"
                     class="items-item"
+                    x="0"
+                    y="99"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,99)"
                   >
                     <g
                       id="g-svg-174"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-175"
                           fill="none"
@@ -1886,14 +1873,16 @@
                     <g
                       id="g-svg-168"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <path
                           id="g-svg-169"
                           fill="rgba(255,0,0,1)"
-                          d="M 0,0 l 16,0 l 0,16 l-16 0 z"
+                          d="M -8,-8 l 16,0 l 0,16 l-16 0 z"
+                          x="-8"
+                          y="-8"
                           width="16"
                           height="16"
                           class="legend-category-item-marker"
@@ -1904,10 +1893,10 @@
                     <g
                       id="g-svg-170"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-171"
                           fill="rgba(255,0,0,1)"
@@ -1931,10 +1920,10 @@
                     <g
                       id="g-svg-172"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-173"
                           fill="rgba(0,128,0,1)"
@@ -1959,18 +1948,19 @@
                   <g
                     id="g-svg-176"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,132)"
                     class="items-item"
+                    x="0"
+                    y="132"
                     width="100"
                     height="23"
+                    transform="matrix(1,0,0,1,0,132)"
                   >
                     <g
                       id="g-svg-183"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-184"
                           fill="none"
@@ -1985,16 +1975,15 @@
                     <g
                       id="g-svg-177"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-178"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-8,-8)"
-                          cx="8"
-                          cy="8"
+                          cx="0"
+                          cy="0"
                           r="8"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -2004,10 +1993,10 @@
                     <g
                       id="g-svg-179"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-180"
                           fill="rgba(255,0,0,1)"
@@ -2031,10 +2020,10 @@
                     <g
                       id="g-svg-181"
                       fill="none"
-                      transform="matrix(1,0,0,1,55,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,55,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-182"
                           fill="rgba(0,128,0,1)"
@@ -2071,13 +2060,12 @@
                 transform="matrix(0,-1,1,0,9.260000,-17)"
                 class="navigator-prev-btn-group"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
                     id="g-svg-231"
                     fill="rgba(0,0,0,1)"
                     class="navigator-prev-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
@@ -2087,13 +2075,12 @@
                 transform="matrix(0,1,-1,0,9.260000,17)"
                 class="navigator-next-btn-group"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
                     id="g-svg-233"
                     fill="rgba(0,0,0,1)"
                     class="navigator-next-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
@@ -2103,7 +2090,7 @@
                 transform="matrix(1,0,0,1,9.260000,0)"
                 class="navigator-page-info-group"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-235"
                     fill="rgba(0,0,0,1)"
@@ -2113,14 +2100,13 @@
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
-                    visibility="visible"
                   >
                     1/4
                   </text>
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-229"
                 fill="none"
diff --git a/__tests__/integration/snapshots/CategoryItems4.svg b/__tests__/integration/snapshots/CategoryItems4.svg
index f82417383..24880f103 100644
--- a/__tests__/integration/snapshots/CategoryItems4.svg
+++ b/__tests__/integration/snapshots/CategoryItems4.svg
@@ -6,66 +6,38 @@
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-230-2">
-      <use href="#g-svg-230" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-230-2">
+      <use href="#g-svg-230" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-236"
-        fill="none"
-        width="620"
-        height="30"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-237"
-          fill="none"
-          width="555"
-          height="30"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-236" fill="none" width="620" height="30">
+        <g id="g-svg-237" fill="none" width="555" height="30">
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
               clip-path="url(#clip-path-230-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-185"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-185" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="117.5"
                     height="23"
                   >
                     <g
                       id="g-svg-12"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-13"
                           fill="none"
@@ -80,16 +52,16 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-7"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -101,10 +73,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(255,0,0,1)"
@@ -128,10 +100,10 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-11"
                           fill="rgba(0,128,0,1)"
@@ -156,18 +128,19 @@
                   <g
                     id="g-svg-14"
                     fill="none"
-                    transform="matrix(1,0,0,1,127.500000,0)"
                     class="items-item"
+                    x="127.5"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,127.500000,0)"
                   >
                     <g
                       id="g-svg-21"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-22"
                           fill="none"
@@ -182,16 +155,16 @@
                     <g
                       id="g-svg-15"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-16"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -203,10 +176,10 @@
                     <g
                       id="g-svg-17"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-18"
                           fill="rgba(255,0,0,1)"
@@ -230,10 +203,10 @@
                     <g
                       id="g-svg-19"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-20"
                           fill="rgba(0,128,0,1)"
@@ -258,18 +231,19 @@
                   <g
                     id="g-svg-23"
                     fill="none"
-                    transform="matrix(1,0,0,1,255,0)"
                     class="items-item"
+                    x="255"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,255,0)"
                   >
                     <g
                       id="g-svg-30"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-31"
                           fill="none"
@@ -284,16 +258,16 @@
                     <g
                       id="g-svg-24"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-25"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -305,10 +279,10 @@
                     <g
                       id="g-svg-26"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-27"
                           fill="rgba(255,0,0,1)"
@@ -332,10 +306,10 @@
                     <g
                       id="g-svg-28"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-29"
                           fill="rgba(0,128,0,1)"
@@ -360,18 +334,19 @@
                   <g
                     id="g-svg-32"
                     fill="none"
-                    transform="matrix(1,0,0,1,382.500000,0)"
                     class="items-item"
+                    x="382.5"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,382.500000,0)"
                   >
                     <g
                       id="g-svg-39"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-40"
                           fill="none"
@@ -386,16 +361,16 @@
                     <g
                       id="g-svg-33"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-34"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -407,10 +382,10 @@
                     <g
                       id="g-svg-35"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-36"
                           fill="rgba(255,0,0,1)"
@@ -434,10 +409,10 @@
                     <g
                       id="g-svg-37"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-38"
                           fill="rgba(0,128,0,1)"
@@ -460,27 +435,22 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-194"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-194" fill="none" class="items-item-page">
                   <g
                     id="g-svg-41"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="117.5"
                     height="23"
                   >
                     <g
                       id="g-svg-48"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-49"
                           fill="none"
@@ -495,16 +465,16 @@
                     <g
                       id="g-svg-42"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-43"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -516,10 +486,10 @@
                     <g
                       id="g-svg-44"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-45"
                           fill="rgba(255,0,0,1)"
@@ -543,10 +513,10 @@
                     <g
                       id="g-svg-46"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-47"
                           fill="rgba(0,128,0,1)"
@@ -571,18 +541,19 @@
                   <g
                     id="g-svg-50"
                     fill="none"
-                    transform="matrix(1,0,0,1,127.500000,0)"
                     class="items-item"
+                    x="127.5"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,127.500000,0)"
                   >
                     <g
                       id="g-svg-57"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-58"
                           fill="none"
@@ -597,16 +568,16 @@
                     <g
                       id="g-svg-51"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-52"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -618,10 +589,10 @@
                     <g
                       id="g-svg-53"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-54"
                           fill="rgba(255,0,0,1)"
@@ -645,10 +616,10 @@
                     <g
                       id="g-svg-55"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-56"
                           fill="rgba(0,128,0,1)"
@@ -673,18 +644,19 @@
                   <g
                     id="g-svg-59"
                     fill="none"
-                    transform="matrix(1,0,0,1,255,0)"
                     class="items-item"
+                    x="255"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,255,0)"
                   >
                     <g
                       id="g-svg-66"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-67"
                           fill="none"
@@ -699,16 +671,16 @@
                     <g
                       id="g-svg-60"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-61"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -720,10 +692,10 @@
                     <g
                       id="g-svg-62"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-63"
                           fill="rgba(255,0,0,1)"
@@ -747,10 +719,10 @@
                     <g
                       id="g-svg-64"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-65"
                           fill="rgba(0,128,0,1)"
@@ -775,18 +747,19 @@
                   <g
                     id="g-svg-68"
                     fill="none"
-                    transform="matrix(1,0,0,1,382.500000,0)"
                     class="items-item"
+                    x="382.5"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,382.500000,0)"
                   >
                     <g
                       id="g-svg-75"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-76"
                           fill="none"
@@ -801,16 +774,16 @@
                     <g
                       id="g-svg-69"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-70"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -822,10 +795,10 @@
                     <g
                       id="g-svg-71"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-72"
                           fill="rgba(255,0,0,1)"
@@ -849,10 +822,10 @@
                     <g
                       id="g-svg-73"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-74"
                           fill="rgba(0,128,0,1)"
@@ -875,27 +848,22 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-203"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-203" fill="none" class="items-item-page">
                   <g
                     id="g-svg-77"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="117.5"
                     height="23"
                   >
                     <g
                       id="g-svg-84"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-85"
                           fill="none"
@@ -910,16 +878,16 @@
                     <g
                       id="g-svg-78"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-79"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -931,10 +899,10 @@
                     <g
                       id="g-svg-80"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-81"
                           fill="rgba(255,0,0,1)"
@@ -958,10 +926,10 @@
                     <g
                       id="g-svg-82"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-83"
                           fill="rgba(0,128,0,1)"
@@ -986,18 +954,19 @@
                   <g
                     id="g-svg-86"
                     fill="none"
-                    transform="matrix(1,0,0,1,127.500000,0)"
                     class="items-item"
+                    x="127.5"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,127.500000,0)"
                   >
                     <g
                       id="g-svg-93"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-94"
                           fill="none"
@@ -1012,16 +981,16 @@
                     <g
                       id="g-svg-87"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-88"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -1033,10 +1002,10 @@
                     <g
                       id="g-svg-89"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-90"
                           fill="rgba(255,0,0,1)"
@@ -1060,10 +1029,10 @@
                     <g
                       id="g-svg-91"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-92"
                           fill="rgba(0,128,0,1)"
@@ -1088,18 +1057,19 @@
                   <g
                     id="g-svg-95"
                     fill="none"
-                    transform="matrix(1,0,0,1,255,0)"
                     class="items-item"
+                    x="255"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,255,0)"
                   >
                     <g
                       id="g-svg-102"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-103"
                           fill="none"
@@ -1114,16 +1084,16 @@
                     <g
                       id="g-svg-96"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-97"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -1135,10 +1105,10 @@
                     <g
                       id="g-svg-98"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-99"
                           fill="rgba(255,0,0,1)"
@@ -1162,10 +1132,10 @@
                     <g
                       id="g-svg-100"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-101"
                           fill="rgba(0,128,0,1)"
@@ -1190,18 +1160,19 @@
                   <g
                     id="g-svg-104"
                     fill="none"
-                    transform="matrix(1,0,0,1,382.500000,0)"
                     class="items-item"
+                    x="382.5"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,382.500000,0)"
                   >
                     <g
                       id="g-svg-111"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-112"
                           fill="none"
@@ -1216,16 +1187,16 @@
                     <g
                       id="g-svg-105"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-106"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -1237,10 +1208,10 @@
                     <g
                       id="g-svg-107"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-108"
                           fill="rgba(255,0,0,1)"
@@ -1264,10 +1235,10 @@
                     <g
                       id="g-svg-109"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-110"
                           fill="rgba(0,128,0,1)"
@@ -1290,27 +1261,22 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-212"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-212" fill="none" class="items-item-page">
                   <g
                     id="g-svg-113"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="117.5"
                     height="23"
                   >
                     <g
                       id="g-svg-120"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-121"
                           fill="none"
@@ -1325,16 +1291,16 @@
                     <g
                       id="g-svg-114"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-115"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -1346,10 +1312,10 @@
                     <g
                       id="g-svg-116"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-117"
                           fill="rgba(255,0,0,1)"
@@ -1373,10 +1339,10 @@
                     <g
                       id="g-svg-118"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-119"
                           fill="rgba(0,128,0,1)"
@@ -1401,18 +1367,19 @@
                   <g
                     id="g-svg-122"
                     fill="none"
-                    transform="matrix(1,0,0,1,127.500000,0)"
                     class="items-item"
+                    x="127.5"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,127.500000,0)"
                   >
                     <g
                       id="g-svg-129"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-130"
                           fill="none"
@@ -1427,16 +1394,16 @@
                     <g
                       id="g-svg-123"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-124"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -1448,10 +1415,10 @@
                     <g
                       id="g-svg-125"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-126"
                           fill="rgba(255,0,0,1)"
@@ -1475,10 +1442,10 @@
                     <g
                       id="g-svg-127"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-128"
                           fill="rgba(0,128,0,1)"
@@ -1503,18 +1470,19 @@
                   <g
                     id="g-svg-131"
                     fill="none"
-                    transform="matrix(1,0,0,1,255,0)"
                     class="items-item"
+                    x="255"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,255,0)"
                   >
                     <g
                       id="g-svg-138"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-139"
                           fill="none"
@@ -1529,16 +1497,16 @@
                     <g
                       id="g-svg-132"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-133"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -1550,10 +1518,10 @@
                     <g
                       id="g-svg-134"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-135"
                           fill="rgba(255,0,0,1)"
@@ -1577,10 +1545,10 @@
                     <g
                       id="g-svg-136"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-137"
                           fill="rgba(0,128,0,1)"
@@ -1605,18 +1573,19 @@
                   <g
                     id="g-svg-140"
                     fill="none"
-                    transform="matrix(1,0,0,1,382.500000,0)"
                     class="items-item"
+                    x="382.5"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,382.500000,0)"
                   >
                     <g
                       id="g-svg-147"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-148"
                           fill="none"
@@ -1631,16 +1600,16 @@
                     <g
                       id="g-svg-141"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-142"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -1652,10 +1621,10 @@
                     <g
                       id="g-svg-143"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-144"
                           fill="rgba(255,0,0,1)"
@@ -1679,10 +1648,10 @@
                     <g
                       id="g-svg-145"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-146"
                           fill="rgba(0,128,0,1)"
@@ -1705,27 +1674,22 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-221"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-221" fill="none" class="items-item-page">
                   <g
                     id="g-svg-149"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="117.5"
                     height="23"
                   >
                     <g
                       id="g-svg-156"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-157"
                           fill="none"
@@ -1740,16 +1704,16 @@
                     <g
                       id="g-svg-150"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-151"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -1761,10 +1725,10 @@
                     <g
                       id="g-svg-152"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-153"
                           fill="rgba(255,0,0,1)"
@@ -1788,10 +1752,10 @@
                     <g
                       id="g-svg-154"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-155"
                           fill="rgba(0,128,0,1)"
@@ -1816,18 +1780,19 @@
                   <g
                     id="g-svg-158"
                     fill="none"
-                    transform="matrix(1,0,0,1,127.500000,0)"
                     class="items-item"
+                    x="127.5"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,127.500000,0)"
                   >
                     <g
                       id="g-svg-165"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-166"
                           fill="none"
@@ -1842,16 +1807,16 @@
                     <g
                       id="g-svg-159"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-160"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -1863,10 +1828,10 @@
                     <g
                       id="g-svg-161"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-162"
                           fill="rgba(255,0,0,1)"
@@ -1890,10 +1855,10 @@
                     <g
                       id="g-svg-163"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-164"
                           fill="rgba(0,128,0,1)"
@@ -1918,18 +1883,19 @@
                   <g
                     id="g-svg-167"
                     fill="none"
-                    transform="matrix(1,0,0,1,255,0)"
                     class="items-item"
+                    x="255"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,255,0)"
                   >
                     <g
                       id="g-svg-174"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-175"
                           fill="none"
@@ -1944,16 +1910,16 @@
                     <g
                       id="g-svg-168"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-169"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -1965,10 +1931,10 @@
                     <g
                       id="g-svg-170"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-171"
                           fill="rgba(255,0,0,1)"
@@ -1992,10 +1958,10 @@
                     <g
                       id="g-svg-172"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-173"
                           fill="rgba(0,128,0,1)"
@@ -2020,18 +1986,19 @@
                   <g
                     id="g-svg-176"
                     fill="none"
-                    transform="matrix(1,0,0,1,382.500000,0)"
                     class="items-item"
+                    x="382.5"
+                    y="0"
                     width="117.5"
                     height="23"
+                    transform="matrix(1,0,0,1,382.500000,0)"
                   >
                     <g
                       id="g-svg-183"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-184"
                           fill="none"
@@ -2046,16 +2013,16 @@
                     <g
                       id="g-svg-177"
                       fill="none"
-                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.625000,0,0,0.625000,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,-8,-8)">
+                      <g>
                         <image
                           id="g-svg-178"
                           fill="none"
                           preserveAspectRatio="none"
-                          x="0"
-                          y="0"
+                          x="-8"
+                          y="-8"
                           href="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
                           width="16"
                           height="16"
@@ -2067,10 +2034,10 @@
                     <g
                       id="g-svg-179"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-180"
                           fill="rgba(255,0,0,1)"
@@ -2094,10 +2061,10 @@
                     <g
                       id="g-svg-181"
                       fill="none"
-                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                       class="legend-category-item-value-group"
+                      transform="matrix(1,0,0,1,63.750000,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-182"
                           fill="rgba(0,128,0,1)"
@@ -2134,13 +2101,12 @@
                 transform="matrix(-0.800000,-0,0,-0.800000,0,0)"
                 class="navigator-prev-btn-group"
               >
-                <g transform="matrix(1.250000,0,0,1.250000,-7.500000,-7.500000)">
+                <g transform="matrix(1.250000,0,0,1.250000,0,0)">
                   <path
                     id="g-svg-232"
                     fill="rgba(0,0,255,1)"
                     class="navigator-prev-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
@@ -2150,13 +2116,12 @@
                 transform="matrix(0.800000,0,0,0.800000,93.680000,0)"
                 class="navigator-next-btn-group"
               >
-                <g transform="matrix(1.250000,0,0,1.250000,-7.500000,-7.500000)">
+                <g transform="matrix(1.250000,0,0,1.250000,0,0)">
                   <path
                     id="g-svg-234"
                     fill="rgba(0,0,255,1)"
                     class="navigator-next-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
@@ -2166,7 +2131,7 @@
                 transform="matrix(1,0,0,1,11,0)"
                 class="navigator-page-info-group"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-236"
                     fill="rgba(255,0,0,1)"
@@ -2176,14 +2141,13 @@
                     dx="0.5"
                     font-size="12"
                     text-anchor="left"
-                    visibility="visible"
                   >
                     第1页(共5页)
                   </text>
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-230"
                 fill="none"
@@ -2195,12 +2159,13 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,50)">
+        <g>
           <text
             id="g-svg-238"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            y="50"
             dx="0.5"
             font-family="sans-serif"
             font-size="16"
@@ -2209,16 +2174,19 @@
             font-weight="normal"
             stroke-width="1"
             text-anchor="left"
+            x="0"
           >
             try to hover to the items⬆️
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,250,50)">
+        <g>
           <text
             id="g-svg-239"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="250"
+            y="50"
             dx="0.5"
             font-family="sans-serif"
             font-size="16"
diff --git a/__tests__/integration/snapshots/CategoryItems5.svg b/__tests__/integration/snapshots/CategoryItems5.svg
index cd272d143..5f82f35ea 100644
--- a/__tests__/integration/snapshots/CategoryItems5.svg
+++ b/__tests__/integration/snapshots/CategoryItems5.svg
@@ -1,65 +1,43 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="555"
-  height="50"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-207-2">
-      <use href="#g-svg-207" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-207-2">
+      <use href="#g-svg-207" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-237" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-238"
-          fill="none"
-          width="555"
-          height="50"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-237" fill="none">
+        <g id="g-svg-238" fill="none" width="555" height="50">
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
               clip-path="url(#clip-path-207-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-165"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-165" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="62.5"
                     height="23"
                   >
                     <g
                       id="g-svg-11"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-12"
                           fill="none"
@@ -74,16 +52,13 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-7"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -93,10 +68,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(100,100,100,1)"
@@ -120,25 +95,25 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-13"
                     fill="none"
-                    transform="matrix(1,0,0,1,62.500000,0)"
                     class="items-item"
+                    x="62.5"
+                    y="0"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,62.500000,0)"
                   >
                     <g
                       id="g-svg-19"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-20"
                           fill="none"
@@ -153,16 +128,13 @@
                     <g
                       id="g-svg-14"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-15"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -172,10 +144,10 @@
                     <g
                       id="g-svg-16"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-17"
                           fill="rgba(100,100,100,1)"
@@ -199,25 +171,25 @@
                     <g
                       id="g-svg-18"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-21"
                     fill="none"
-                    transform="matrix(1,0,0,1,125,0)"
                     class="items-item"
+                    x="125"
+                    y="0"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,125,0)"
                   >
                     <g
                       id="g-svg-27"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-28"
                           fill="none"
@@ -232,16 +204,13 @@
                     <g
                       id="g-svg-22"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-23"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -251,10 +220,10 @@
                     <g
                       id="g-svg-24"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-25"
                           fill="rgba(100,100,100,1)"
@@ -278,25 +247,25 @@
                     <g
                       id="g-svg-26"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-29"
                     fill="none"
-                    transform="matrix(1,0,0,1,187.500000,0)"
                     class="items-item"
+                    x="187.5"
+                    y="0"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,187.500000,0)"
                   >
                     <g
                       id="g-svg-35"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-36"
                           fill="none"
@@ -311,16 +280,13 @@
                     <g
                       id="g-svg-30"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-31"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -330,10 +296,10 @@
                     <g
                       id="g-svg-32"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-33"
                           fill="rgba(100,100,100,1)"
@@ -357,25 +323,25 @@
                     <g
                       id="g-svg-34"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-37"
                     fill="none"
-                    transform="matrix(1,0,0,1,250,0)"
                     class="items-item"
+                    x="250"
+                    y="0"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,250,0)"
                   >
                     <g
                       id="g-svg-43"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-44"
                           fill="none"
@@ -390,16 +356,13 @@
                     <g
                       id="g-svg-38"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-39"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -409,10 +372,10 @@
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-41"
                           fill="rgba(100,100,100,1)"
@@ -436,25 +399,25 @@
                     <g
                       id="g-svg-42"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-45"
                     fill="none"
-                    transform="matrix(1,0,0,1,312.500000,0)"
                     class="items-item"
+                    x="312.5"
+                    y="0"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,312.500000,0)"
                   >
                     <g
                       id="g-svg-51"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-52"
                           fill="none"
@@ -469,16 +432,13 @@
                     <g
                       id="g-svg-46"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-47"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -488,10 +448,10 @@
                     <g
                       id="g-svg-48"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-49"
                           fill="rgba(100,100,100,1)"
@@ -515,25 +475,25 @@
                     <g
                       id="g-svg-50"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-53"
                     fill="none"
-                    transform="matrix(1,0,0,1,375,0)"
                     class="items-item"
+                    x="375"
+                    y="0"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,375,0)"
                   >
                     <g
                       id="g-svg-59"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-60"
                           fill="none"
@@ -548,16 +508,13 @@
                     <g
                       id="g-svg-54"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-55"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -567,10 +524,10 @@
                     <g
                       id="g-svg-56"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-57"
                           fill="rgba(100,100,100,1)"
@@ -594,25 +551,25 @@
                     <g
                       id="g-svg-58"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-61"
                     fill="none"
-                    transform="matrix(1,0,0,1,437.500000,0)"
                     class="items-item"
+                    x="437.5"
+                    y="0"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,437.500000,0)"
                   >
                     <g
                       id="g-svg-67"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-68"
                           fill="none"
@@ -627,16 +584,13 @@
                     <g
                       id="g-svg-62"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-63"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -646,10 +600,10 @@
                     <g
                       id="g-svg-64"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-65"
                           fill="rgba(100,100,100,1)"
@@ -673,25 +627,25 @@
                     <g
                       id="g-svg-66"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-69"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,23)"
                     class="items-item"
+                    x="0"
+                    y="23"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,0,23)"
                   >
                     <g
                       id="g-svg-75"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-76"
                           fill="none"
@@ -706,16 +660,13 @@
                     <g
                       id="g-svg-70"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-71"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -725,10 +676,10 @@
                     <g
                       id="g-svg-72"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-73"
                           fill="rgba(100,100,100,1)"
@@ -752,25 +703,25 @@
                     <g
                       id="g-svg-74"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-77"
                     fill="none"
-                    transform="matrix(1,0,0,1,62.500000,23)"
                     class="items-item"
+                    x="62.5"
+                    y="23"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,62.500000,23)"
                   >
                     <g
                       id="g-svg-83"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-84"
                           fill="none"
@@ -785,16 +736,13 @@
                     <g
                       id="g-svg-78"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-79"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -804,10 +752,10 @@
                     <g
                       id="g-svg-80"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-81"
                           fill="rgba(100,100,100,1)"
@@ -831,25 +779,25 @@
                     <g
                       id="g-svg-82"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-85"
                     fill="none"
-                    transform="matrix(1,0,0,1,125,23)"
                     class="items-item"
+                    x="125"
+                    y="23"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,125,23)"
                   >
                     <g
                       id="g-svg-91"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-92"
                           fill="none"
@@ -864,16 +812,13 @@
                     <g
                       id="g-svg-86"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-87"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -883,10 +828,10 @@
                     <g
                       id="g-svg-88"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-89"
                           fill="rgba(100,100,100,1)"
@@ -910,25 +855,25 @@
                     <g
                       id="g-svg-90"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-93"
                     fill="none"
-                    transform="matrix(1,0,0,1,187.500000,23)"
                     class="items-item"
+                    x="187.5"
+                    y="23"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,187.500000,23)"
                   >
                     <g
                       id="g-svg-99"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-100"
                           fill="none"
@@ -943,16 +888,13 @@
                     <g
                       id="g-svg-94"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-95"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -962,10 +904,10 @@
                     <g
                       id="g-svg-96"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-97"
                           fill="rgba(100,100,100,1)"
@@ -989,25 +931,25 @@
                     <g
                       id="g-svg-98"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-101"
                     fill="none"
-                    transform="matrix(1,0,0,1,250,23)"
                     class="items-item"
+                    x="250"
+                    y="23"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,250,23)"
                   >
                     <g
                       id="g-svg-107"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-108"
                           fill="none"
@@ -1022,16 +964,13 @@
                     <g
                       id="g-svg-102"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-103"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -1041,10 +980,10 @@
                     <g
                       id="g-svg-104"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-105"
                           fill="rgba(100,100,100,1)"
@@ -1068,25 +1007,25 @@
                     <g
                       id="g-svg-106"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-109"
                     fill="none"
-                    transform="matrix(1,0,0,1,312.500000,23)"
                     class="items-item"
+                    x="312.5"
+                    y="23"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,312.500000,23)"
                   >
                     <g
                       id="g-svg-115"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-116"
                           fill="none"
@@ -1101,16 +1040,13 @@
                     <g
                       id="g-svg-110"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-111"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -1120,10 +1056,10 @@
                     <g
                       id="g-svg-112"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-113"
                           fill="rgba(100,100,100,1)"
@@ -1147,25 +1083,25 @@
                     <g
                       id="g-svg-114"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-117"
                     fill="none"
-                    transform="matrix(1,0,0,1,375,23)"
                     class="items-item"
+                    x="375"
+                    y="23"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,375,23)"
                   >
                     <g
                       id="g-svg-123"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-124"
                           fill="none"
@@ -1180,16 +1116,13 @@
                     <g
                       id="g-svg-118"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-119"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -1199,10 +1132,10 @@
                     <g
                       id="g-svg-120"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-121"
                           fill="rgba(100,100,100,1)"
@@ -1226,25 +1159,25 @@
                     <g
                       id="g-svg-122"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-125"
                     fill="none"
-                    transform="matrix(1,0,0,1,437.500000,23)"
                     class="items-item"
+                    x="437.5"
+                    y="23"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,437.500000,23)"
                   >
                     <g
                       id="g-svg-131"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-132"
                           fill="none"
@@ -1259,16 +1192,13 @@
                     <g
                       id="g-svg-126"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-127"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -1278,10 +1208,10 @@
                     <g
                       id="g-svg-128"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-129"
                           fill="rgba(100,100,100,1)"
@@ -1305,32 +1235,26 @@
                     <g
                       id="g-svg-130"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-198"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-198" fill="none" class="items-item-page">
                   <g
                     id="g-svg-133"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="62.5"
                     height="23"
                   >
                     <g
                       id="g-svg-139"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-140"
                           fill="none"
@@ -1345,16 +1269,13 @@
                     <g
                       id="g-svg-134"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-135"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1364,10 +1285,10 @@
                     <g
                       id="g-svg-136"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-137"
                           fill="rgba(100,100,100,1)"
@@ -1391,25 +1312,25 @@
                     <g
                       id="g-svg-138"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-141"
                     fill="none"
-                    transform="matrix(1,0,0,1,62.500000,0)"
                     class="items-item"
+                    x="62.5"
+                    y="0"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,62.500000,0)"
                   >
                     <g
                       id="g-svg-147"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-148"
                           fill="none"
@@ -1424,16 +1345,13 @@
                     <g
                       id="g-svg-142"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-143"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1443,10 +1361,10 @@
                     <g
                       id="g-svg-144"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-145"
                           fill="rgba(100,100,100,1)"
@@ -1470,25 +1388,25 @@
                     <g
                       id="g-svg-146"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-149"
                     fill="none"
-                    transform="matrix(1,0,0,1,125,0)"
                     class="items-item"
+                    x="125"
+                    y="0"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,125,0)"
                   >
                     <g
                       id="g-svg-155"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-156"
                           fill="none"
@@ -1503,16 +1421,13 @@
                     <g
                       id="g-svg-150"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-151"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1522,10 +1437,10 @@
                     <g
                       id="g-svg-152"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-153"
                           fill="rgba(100,100,100,1)"
@@ -1549,25 +1464,25 @@
                     <g
                       id="g-svg-154"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-157"
                     fill="none"
-                    transform="matrix(1,0,0,1,187.500000,0)"
                     class="items-item"
+                    x="187.5"
+                    y="0"
                     width="62.5"
                     height="23"
+                    transform="matrix(1,0,0,1,187.500000,0)"
                   >
                     <g
                       id="g-svg-163"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-164"
                           fill="none"
@@ -1582,16 +1497,13 @@
                     <g
                       id="g-svg-158"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-159"
                           fill="rgba(211,210,211,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -1601,10 +1513,10 @@
                     <g
                       id="g-svg-160"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-161"
                           fill="rgba(100,100,100,1)"
@@ -1628,7 +1540,6 @@
                     <g
                       id="g-svg-162"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
@@ -1644,32 +1555,30 @@
               <g
                 id="g-svg-208"
                 fill="none"
-                transform="matrix(-1,-0,0,-1,0,0)"
                 class="navigator-prev-btn-group"
+                transform="matrix(-1,-0,0,-1,0,0)"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
                     id="g-svg-209"
                     fill="rgba(0,0,0,1)"
                     class="navigator-prev-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
               <g
                 id="g-svg-210"
                 fill="none"
-                transform="matrix(1,0,0,1,40.040001,0)"
                 class="navigator-next-btn-group"
+                transform="matrix(1,0,0,1,40.040001,0)"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
                     id="g-svg-211"
                     fill="rgba(0,0,0,1)"
                     class="navigator-next-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
@@ -1679,7 +1588,7 @@
                 transform="matrix(1,0,0,1,11,0)"
                 class="navigator-page-info-group"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-213"
                     fill="rgba(0,0,0,1)"
@@ -1689,14 +1598,13 @@
                     dx="0.5"
                     font-size="12"
                     text-anchor="left"
-                    visibility="visible"
                   >
                     1/2
                   </text>
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-207"
                 fill="none"
diff --git a/__tests__/integration/snapshots/CategoryItems6.svg b/__tests__/integration/snapshots/CategoryItems6.svg
index 2b82fa1c1..5eca6f91e 100644
--- a/__tests__/integration/snapshots/CategoryItems6.svg
+++ b/__tests__/integration/snapshots/CategoryItems6.svg
@@ -1,65 +1,43 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="1000"
-  height="100"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-76-2">
-      <use href="#g-svg-76" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-76-2">
+      <use href="#g-svg-76" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-214" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-215"
-          fill="none"
-          width="1000"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-214" fill="none">
+        <g id="g-svg-215" fill="none" width="1000" height="100">
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
               clip-path="url(#clip-path-76-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-61"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-61" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="78.56"
                     height="23"
                   >
                     <g
                       id="g-svg-11"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-12"
                           fill="none"
@@ -74,16 +52,13 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-7"
                           fill="rgba(255,0,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -93,10 +68,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(255,0,0,1)"
@@ -120,25 +95,25 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-13"
                     fill="none"
-                    transform="matrix(1,0,0,1,78.559998,0)"
                     class="items-item"
+                    x="78.56"
+                    y="0"
                     width="73.03999999999999"
                     height="23"
+                    transform="matrix(1,0,0,1,78.559998,0)"
                   >
                     <g
                       id="g-svg-19"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-20"
                           fill="none"
@@ -153,16 +128,13 @@
                     <g
                       id="g-svg-14"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-15"
                           fill="rgba(255,165,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -172,10 +144,10 @@
                     <g
                       id="g-svg-16"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-17"
                           fill="rgba(255,0,0,1)"
@@ -199,25 +171,25 @@
                     <g
                       id="g-svg-18"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-21"
                     fill="none"
-                    transform="matrix(1,0,0,1,151.600006,0)"
                     class="items-item"
+                    x="151.6"
+                    y="0"
                     width="64.16"
                     height="23"
+                    transform="matrix(1,0,0,1,151.600006,0)"
                   >
                     <g
                       id="g-svg-27"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-28"
                           fill="none"
@@ -232,16 +204,13 @@
                     <g
                       id="g-svg-22"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-23"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -251,10 +220,10 @@
                     <g
                       id="g-svg-24"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-25"
                           fill="rgba(255,0,0,1)"
@@ -278,25 +247,25 @@
                     <g
                       id="g-svg-26"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-29"
                     fill="none"
-                    transform="matrix(1,0,0,1,215.759995,0)"
                     class="items-item"
+                    x="215.76"
+                    y="0"
                     width="189.32"
                     height="23"
+                    transform="matrix(1,0,0,1,215.759995,0)"
                   >
                     <g
                       id="g-svg-35"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-36"
                           fill="none"
@@ -311,16 +280,13 @@
                     <g
                       id="g-svg-30"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-31"
                           fill="rgba(0,0,255,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -330,10 +296,10 @@
                     <g
                       id="g-svg-32"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-33"
                           fill="rgba(255,0,0,1)"
@@ -357,25 +323,25 @@
                     <g
                       id="g-svg-34"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-37"
                     fill="none"
-                    transform="matrix(1,0,0,1,405.079987,0)"
                     class="items-item"
+                    x="405.08"
+                    y="0"
                     width="123.92000000000002"
                     height="23"
+                    transform="matrix(1,0,0,1,405.079987,0)"
                   >
                     <g
                       id="g-svg-43"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-44"
                           fill="none"
@@ -390,16 +356,13 @@
                     <g
                       id="g-svg-38"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-39"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -409,10 +372,10 @@
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-41"
                           fill="rgba(255,0,0,1)"
@@ -436,25 +399,25 @@
                     <g
                       id="g-svg-42"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-45"
                     fill="none"
-                    transform="matrix(1,0,0,1,529,0)"
                     class="items-item"
+                    x="529"
+                    y="0"
                     width="137.48000000000002"
                     height="23"
+                    transform="matrix(1,0,0,1,529,0)"
                   >
                     <g
                       id="g-svg-51"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-52"
                           fill="none"
@@ -469,16 +432,13 @@
                     <g
                       id="g-svg-46"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-47"
                           fill="rgba(255,0,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -488,10 +448,10 @@
                     <g
                       id="g-svg-48"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-49"
                           fill="rgba(255,0,0,1)"
@@ -515,25 +475,25 @@
                     <g
                       id="g-svg-50"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-53"
                     fill="none"
-                    transform="matrix(1,0,0,1,666.479980,0)"
                     class="items-item"
+                    x="666.48"
+                    y="0"
                     width="80.84"
                     height="23"
+                    transform="matrix(1,0,0,1,666.479980,0)"
                   >
                     <g
                       id="g-svg-59"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-60"
                           fill="none"
@@ -548,16 +508,13 @@
                     <g
                       id="g-svg-54"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-55"
                           fill="rgba(255,165,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -567,10 +524,10 @@
                     <g
                       id="g-svg-56"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-57"
                           fill="rgba(255,0,0,1)"
@@ -594,26 +551,20 @@
                     <g
                       id="g-svg-58"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-4"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="navigator-controller"
-            />
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-4" fill="none" class="navigator-controller" />
+            <g>
               <path
                 id="g-svg-76"
                 fill="none"
-                d="M 0,0 l 747.3199805084863,0 l 0,23 l-747.3199805084863 0 z"
+                d="M 0,0 l 747.3199804687499,0 l 0,23 l-747.3199804687499 0 z"
                 class="navigator-clip-path"
-                width="747.3199805084863"
+                width="747.3199804687499"
                 height="23"
               />
             </g>
diff --git a/__tests__/integration/snapshots/CategoryItems7.svg b/__tests__/integration/snapshots/CategoryItems7.svg
index 2e9c289b6..447db860c 100644
--- a/__tests__/integration/snapshots/CategoryItems7.svg
+++ b/__tests__/integration/snapshots/CategoryItems7.svg
@@ -1,65 +1,43 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="1000"
-  height="100"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-76-2">
-      <use href="#g-svg-76" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-76-2">
+      <use href="#g-svg-76" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-77" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-78"
-          fill="none"
-          width="1000"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-77" fill="none">
+        <g id="g-svg-78" fill="none" width="1000" height="100">
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
               clip-path="url(#clip-path-76-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-61"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-61" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="78.56"
                     height="23"
                   >
                     <g
                       id="g-svg-11"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-12"
                           fill="none"
@@ -74,16 +52,13 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-7"
                           fill="rgba(255,0,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -93,10 +68,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(255,0,0,1)"
@@ -120,25 +95,25 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-13"
                     fill="none"
-                    transform="matrix(1,0,0,1,88.559998,0)"
                     class="items-item"
+                    x="88.56"
+                    y="0"
                     width="73.03999999999999"
                     height="23"
+                    transform="matrix(1,0,0,1,88.559998,0)"
                   >
                     <g
                       id="g-svg-19"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-20"
                           fill="none"
@@ -153,16 +128,13 @@
                     <g
                       id="g-svg-14"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-15"
                           fill="rgba(255,165,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -172,10 +144,10 @@
                     <g
                       id="g-svg-16"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-17"
                           fill="rgba(255,0,0,1)"
@@ -199,25 +171,25 @@
                     <g
                       id="g-svg-18"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-21"
                     fill="none"
-                    transform="matrix(1,0,0,1,171.600006,0)"
                     class="items-item"
+                    x="171.6"
+                    y="0"
                     width="64.16"
                     height="23"
+                    transform="matrix(1,0,0,1,171.600006,0)"
                   >
                     <g
                       id="g-svg-27"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-28"
                           fill="none"
@@ -232,16 +204,13 @@
                     <g
                       id="g-svg-22"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-23"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -251,10 +220,10 @@
                     <g
                       id="g-svg-24"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-25"
                           fill="rgba(255,0,0,1)"
@@ -278,25 +247,25 @@
                     <g
                       id="g-svg-26"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-29"
                     fill="none"
-                    transform="matrix(1,0,0,1,245.759995,0)"
                     class="items-item"
+                    x="245.76"
+                    y="0"
                     width="189.32"
                     height="23"
+                    transform="matrix(1,0,0,1,245.759995,0)"
                   >
                     <g
                       id="g-svg-35"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-36"
                           fill="none"
@@ -311,16 +280,13 @@
                     <g
                       id="g-svg-30"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-31"
                           fill="rgba(0,0,255,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -330,10 +296,10 @@
                     <g
                       id="g-svg-32"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-33"
                           fill="rgba(255,0,0,1)"
@@ -357,25 +323,25 @@
                     <g
                       id="g-svg-34"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-37"
                     fill="none"
-                    transform="matrix(1,0,0,1,445.079987,0)"
                     class="items-item"
+                    x="445.08"
+                    y="0"
                     width="123.92000000000002"
                     height="23"
+                    transform="matrix(1,0,0,1,445.079987,0)"
                   >
                     <g
                       id="g-svg-43"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-44"
                           fill="none"
@@ -390,16 +356,13 @@
                     <g
                       id="g-svg-38"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-39"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -409,10 +372,10 @@
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-41"
                           fill="rgba(255,0,0,1)"
@@ -436,25 +399,25 @@
                     <g
                       id="g-svg-42"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-45"
                     fill="none"
-                    transform="matrix(1,0,0,1,579,0)"
                     class="items-item"
+                    x="579"
+                    y="0"
                     width="137.48000000000002"
                     height="23"
+                    transform="matrix(1,0,0,1,579,0)"
                   >
                     <g
                       id="g-svg-51"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-52"
                           fill="none"
@@ -469,16 +432,13 @@
                     <g
                       id="g-svg-46"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-47"
                           fill="rgba(255,0,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -488,10 +448,10 @@
                     <g
                       id="g-svg-48"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-49"
                           fill="rgba(255,0,0,1)"
@@ -515,25 +475,25 @@
                     <g
                       id="g-svg-50"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-53"
                     fill="none"
-                    transform="matrix(1,0,0,1,726.479980,0)"
                     class="items-item"
+                    x="726.48"
+                    y="0"
                     width="80.84"
                     height="23"
+                    transform="matrix(1,0,0,1,726.479980,0)"
                   >
                     <g
                       id="g-svg-59"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-60"
                           fill="none"
@@ -548,16 +508,13 @@
                     <g
                       id="g-svg-54"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-55"
                           fill="rgba(255,165,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -567,10 +524,10 @@
                     <g
                       id="g-svg-56"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-57"
                           fill="rgba(255,0,0,1)"
@@ -594,26 +551,20 @@
                     <g
                       id="g-svg-58"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-4"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="navigator-controller"
-            />
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-4" fill="none" class="navigator-controller" />
+            <g>
               <path
                 id="g-svg-76"
                 fill="none"
-                d="M 0,0 l 807.3199805084863,0 l 0,23 l-807.3199805084863 0 z"
+                d="M 0,0 l 807.3199804687499,0 l 0,23 l-807.3199804687499 0 z"
                 class="navigator-clip-path"
-                width="807.3199805084863"
+                width="807.3199804687499"
                 height="23"
               />
             </g>
diff --git a/__tests__/integration/snapshots/CategoryItems8.svg b/__tests__/integration/snapshots/CategoryItems8.svg
index 977e11e0b..f6380c6cd 100644
--- a/__tests__/integration/snapshots/CategoryItems8.svg
+++ b/__tests__/integration/snapshots/CategoryItems8.svg
@@ -1,65 +1,43 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="650"
-  height="50"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-76-2">
-      <use href="#g-svg-76" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-76-2">
+      <use href="#g-svg-76" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-77" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-78"
-          fill="none"
-          width="650"
-          height="50"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-77" fill="none">
+        <g id="g-svg-78" fill="none" width="650" height="50">
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
               clip-path="url(#clip-path-76-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-61"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-61" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="78.56"
                     height="23"
                   >
                     <g
                       id="g-svg-11"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-12"
                           fill="none"
@@ -74,16 +52,13 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-7"
                           fill="rgba(255,0,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -93,10 +68,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(255,0,0,1)"
@@ -120,25 +95,25 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-13"
                     fill="none"
-                    transform="matrix(1,0,0,1,88.559998,0)"
                     class="items-item"
+                    x="88.56"
+                    y="0"
                     width="73.03999999999999"
                     height="23"
+                    transform="matrix(1,0,0,1,88.559998,0)"
                   >
                     <g
                       id="g-svg-19"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-20"
                           fill="none"
@@ -153,16 +128,13 @@
                     <g
                       id="g-svg-14"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-15"
                           fill="rgba(255,165,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -172,10 +144,10 @@
                     <g
                       id="g-svg-16"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-17"
                           fill="rgba(255,0,0,1)"
@@ -199,25 +171,25 @@
                     <g
                       id="g-svg-18"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-21"
                     fill="none"
-                    transform="matrix(1,0,0,1,171.600006,0)"
                     class="items-item"
+                    x="171.6"
+                    y="0"
                     width="64.16"
                     height="23"
+                    transform="matrix(1,0,0,1,171.600006,0)"
                   >
                     <g
                       id="g-svg-27"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-28"
                           fill="none"
@@ -232,16 +204,13 @@
                     <g
                       id="g-svg-22"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-23"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -251,10 +220,10 @@
                     <g
                       id="g-svg-24"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-25"
                           fill="rgba(255,0,0,1)"
@@ -278,25 +247,25 @@
                     <g
                       id="g-svg-26"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-29"
                     fill="none"
-                    transform="matrix(1,0,0,1,245.759995,0)"
                     class="items-item"
+                    x="245.76"
+                    y="0"
                     width="189.32"
                     height="23"
+                    transform="matrix(1,0,0,1,245.759995,0)"
                   >
                     <g
                       id="g-svg-35"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-36"
                           fill="none"
@@ -311,16 +280,13 @@
                     <g
                       id="g-svg-30"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-31"
                           fill="rgba(0,0,255,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -330,10 +296,10 @@
                     <g
                       id="g-svg-32"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-33"
                           fill="rgba(255,0,0,1)"
@@ -357,25 +323,25 @@
                     <g
                       id="g-svg-34"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-37"
                     fill="none"
-                    transform="matrix(1,0,0,1,445.079987,0)"
                     class="items-item"
+                    x="445.08"
+                    y="0"
                     width="123.92000000000002"
                     height="23"
+                    transform="matrix(1,0,0,1,445.079987,0)"
                   >
                     <g
                       id="g-svg-43"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-44"
                           fill="none"
@@ -390,16 +356,13 @@
                     <g
                       id="g-svg-38"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-39"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -409,10 +372,10 @@
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-41"
                           fill="rgba(255,0,0,1)"
@@ -436,25 +399,25 @@
                     <g
                       id="g-svg-42"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-45"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,23)"
                     class="items-item"
+                    x="0"
+                    y="23"
                     width="137.48000000000002"
                     height="23"
+                    transform="matrix(1,0,0,1,0,23)"
                   >
                     <g
                       id="g-svg-51"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-52"
                           fill="none"
@@ -469,16 +432,13 @@
                     <g
                       id="g-svg-46"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-47"
                           fill="rgba(255,0,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -488,10 +448,10 @@
                     <g
                       id="g-svg-48"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-49"
                           fill="rgba(255,0,0,1)"
@@ -515,25 +475,25 @@
                     <g
                       id="g-svg-50"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-53"
                     fill="none"
-                    transform="matrix(1,0,0,1,147.479996,23)"
                     class="items-item"
+                    x="147.48000000000002"
+                    y="23"
                     width="80.84"
                     height="23"
+                    transform="matrix(1,0,0,1,147.479996,23)"
                   >
                     <g
                       id="g-svg-59"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-60"
                           fill="none"
@@ -548,16 +508,13 @@
                     <g
                       id="g-svg-54"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-55"
                           fill="rgba(255,165,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -567,10 +524,10 @@
                     <g
                       id="g-svg-56"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-57"
                           fill="rgba(255,0,0,1)"
@@ -594,26 +551,20 @@
                     <g
                       id="g-svg-58"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-4"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="navigator-controller"
-            />
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-4" fill="none" class="navigator-controller" />
+            <g>
               <path
                 id="g-svg-76"
                 fill="none"
-                d="M 0,0 l 568.9999866120021,0 l 0,46 l-568.9999866120021 0 z"
+                d="M 0,0 l 568.9999865722657,0 l 0,46 l-568.9999865722657 0 z"
                 class="navigator-clip-path"
-                width="568.9999866120021"
+                width="568.9999865722657"
                 height="46"
               />
             </g>
diff --git a/__tests__/integration/snapshots/CategoryItems9.svg b/__tests__/integration/snapshots/CategoryItems9.svg
index 994e0ce64..ebeb3c6b6 100644
--- a/__tests__/integration/snapshots/CategoryItems9.svg
+++ b/__tests__/integration/snapshots/CategoryItems9.svg
@@ -1,65 +1,43 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="500"
-  height="50"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-77-2">
-      <use href="#g-svg-77" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-57-2">
+      <use href="#g-svg-57" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-77" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-78"
-          fill="none"
-          width="500"
-          height="50"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="items-navigator"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-77" fill="none">
+        <g id="g-svg-78" fill="none" width="500" height="50">
+          <g id="g-svg-1" fill="none" x="0" y="0" class="items-navigator">
             <g
               id="g-svg-2"
               fill="none"
               class="navigator-content-group"
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-77-2)"
+              clip-path="url(#clip-path-57-2)"
             >
-              <g
-                id="g-svg-3"
-                fill="none"
-                class="navigator-play-window"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g
-                  id="g-svg-61"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+              <g id="g-svg-3" fill="none" class="navigator-play-window">
+                <g id="g-svg-45" fill="none" class="items-item-page">
                   <g
                     id="g-svg-5"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="78.56"
                     height="23"
                   >
                     <g
                       id="g-svg-11"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-12"
                           fill="none"
@@ -74,16 +52,13 @@
                     <g
                       id="g-svg-6"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-7"
                           fill="rgba(255,0,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -93,10 +68,10 @@
                     <g
                       id="g-svg-8"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-9"
                           fill="rgba(255,0,0,1)"
@@ -120,25 +95,25 @@
                     <g
                       id="g-svg-10"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-13"
                     fill="none"
-                    transform="matrix(1,0,0,1,88.559998,0)"
                     class="items-item"
+                    x="88.56"
+                    y="0"
                     width="73.03999999999999"
                     height="23"
+                    transform="matrix(1,0,0,1,88.559998,0)"
                   >
                     <g
                       id="g-svg-19"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-20"
                           fill="none"
@@ -153,16 +128,13 @@
                     <g
                       id="g-svg-14"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-15"
                           fill="rgba(255,165,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -172,10 +144,10 @@
                     <g
                       id="g-svg-16"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-17"
                           fill="rgba(255,0,0,1)"
@@ -199,25 +171,25 @@
                     <g
                       id="g-svg-18"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-21"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,23)"
                     class="items-item"
+                    x="0"
+                    y="23"
                     width="64.16"
                     height="23"
+                    transform="matrix(1,0,0,1,0,23)"
                   >
                     <g
                       id="g-svg-27"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-28"
                           fill="none"
@@ -232,16 +204,13 @@
                     <g
                       id="g-svg-22"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-23"
                           fill="rgba(0,128,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -251,10 +220,10 @@
                     <g
                       id="g-svg-24"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-25"
                           fill="rgba(255,0,0,1)"
@@ -278,25 +247,25 @@
                     <g
                       id="g-svg-26"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                   <g
                     id="g-svg-29"
                     fill="none"
-                    transform="matrix(1,0,0,1,74.160004,23)"
                     class="items-item"
+                    x="74.16"
+                    y="23"
                     width="189.32"
                     height="23"
+                    transform="matrix(1,0,0,1,74.160004,23)"
                   >
                     <g
                       id="g-svg-35"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-36"
                           fill="none"
@@ -311,16 +280,13 @@
                     <g
                       id="g-svg-30"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-31"
                           fill="rgba(0,0,255,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="visible"
@@ -330,10 +296,10 @@
                     <g
                       id="g-svg-32"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-33"
                           fill="rgba(255,0,0,1)"
@@ -357,32 +323,26 @@
                     <g
                       id="g-svg-34"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-70"
-                  fill="none"
-                  class="items-item-page"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
+                <g id="g-svg-54" fill="none" class="items-item-page">
                   <g
                     id="g-svg-37"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="items-item"
+                    x="0"
+                    y="0"
                     width="123.92000000000002"
                     height="23"
                   >
                     <g
                       id="g-svg-43"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-background-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-44"
                           fill="none"
@@ -397,16 +357,13 @@
                     <g
                       id="g-svg-38"
                       fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                       class="legend-category-item-marker-group"
+                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <circle
                           id="g-svg-39"
                           fill="rgba(128,0,128,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
                           r="6"
                           class="legend-category-item-marker"
                           visibility="hidden"
@@ -416,10 +373,10 @@
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
                       class="legend-category-item-label-group"
+                      transform="matrix(1,0,0,1,10,11.500000)"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-41"
                           fill="rgba(255,0,0,1)"
@@ -443,165 +400,6 @@
                     <g
                       id="g-svg-42"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                      class="legend-category-item-value-group"
-                    />
-                  </g>
-                  <g
-                    id="g-svg-45"
-                    fill="none"
-                    transform="matrix(1,0,0,1,133.919998,0)"
-                    class="items-item"
-                    width="137.48000000000002"
-                    height="23"
-                  >
-                    <g
-                      id="g-svg-51"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                      class="legend-category-item-background-group"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
-                        <path
-                          id="g-svg-52"
-                          fill="none"
-                          class="legend-category-item-background"
-                          d="M 0,0 l 137.48000000000002,0 l 0,23 l-137.48000000000002 0 z"
-                          width="137.48000000000002"
-                          height="23"
-                          visibility="hidden"
-                        />
-                      </g>
-                    </g>
-                    <g
-                      id="g-svg-46"
-                      fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
-                      class="legend-category-item-marker-group"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
-                        <circle
-                          id="g-svg-47"
-                          fill="rgba(255,0,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
-                          r="6"
-                          class="legend-category-item-marker"
-                          visibility="hidden"
-                        />
-                      </g>
-                    </g>
-                    <g
-                      id="g-svg-48"
-                      fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
-                      class="legend-category-item-label-group"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
-                        <text
-                          id="g-svg-49"
-                          fill="rgba(255,0,0,1)"
-                          dominant-baseline="central"
-                          paint-order="stroke"
-                          dx="0.5"
-                          font-family="sans-serif"
-                          font-size="12"
-                          font-style="normal"
-                          font-variant="normal"
-                          font-weight="normal"
-                          stroke-width="1"
-                          text-anchor="left"
-                          class="legend-category-item-label"
-                          visibility="hidden"
-                        >
-                          pre-colonial Americas
-                        </text>
-                      </g>
-                    </g>
-                    <g
-                      id="g-svg-50"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                      class="legend-category-item-value-group"
-                    />
-                  </g>
-                  <g
-                    id="g-svg-53"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,23)"
-                    class="items-item"
-                    width="80.84"
-                    height="23"
-                  >
-                    <g
-                      id="g-svg-59"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                      class="legend-category-item-background-group"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
-                        <path
-                          id="g-svg-60"
-                          fill="none"
-                          class="legend-category-item-background"
-                          d="M 0,0 l 80.84,0 l 0,23 l-80.84 0 z"
-                          width="80.84"
-                          height="23"
-                          visibility="hidden"
-                        />
-                      </g>
-                    </g>
-                    <g
-                      id="g-svg-54"
-                      fill="none"
-                      transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
-                      class="legend-category-item-marker-group"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
-                        <circle
-                          id="g-svg-55"
-                          fill="rgba(255,165,0,1)"
-                          transform="translate(-6,-6)"
-                          cx="6"
-                          cy="6"
-                          r="6"
-                          class="legend-category-item-marker"
-                          visibility="hidden"
-                        />
-                      </g>
-                    </g>
-                    <g
-                      id="g-svg-56"
-                      fill="none"
-                      transform="matrix(1,0,0,1,10,11.500000)"
-                      class="legend-category-item-label-group"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
-                        <text
-                          id="g-svg-57"
-                          fill="rgba(255,0,0,1)"
-                          dominant-baseline="central"
-                          paint-order="stroke"
-                          dx="0.5"
-                          font-family="sans-serif"
-                          font-size="12"
-                          font-style="normal"
-                          font-variant="normal"
-                          font-weight="normal"
-                          stroke-width="1"
-                          text-anchor="left"
-                          class="legend-category-item-label"
-                          visibility="hidden"
-                        >
-                          the Steppes
-                        </text>
-                      </g>
-                    </g>
-                    <g
-                      id="g-svg-58"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
                       class="legend-category-item-value-group"
                     />
                   </g>
@@ -611,50 +409,48 @@
             <g
               id="g-svg-4"
               fill="none"
-              transform="matrix(1,0,0,1,276.399994,23)"
+              transform="matrix(1,0,0,1,268.480011,23)"
               class="navigator-controller"
             >
               <g
-                id="g-svg-78"
+                id="g-svg-58"
                 fill="none"
-                transform="matrix(-1,-0,0,-1,0,0)"
                 class="navigator-prev-btn-group"
+                transform="matrix(-1,-0,0,-1,0,0)"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
-                    id="g-svg-79"
+                    id="g-svg-59"
                     fill="rgba(0,0,0,1)"
                     class="navigator-prev-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
               <g
-                id="g-svg-80"
+                id="g-svg-60"
                 fill="none"
-                transform="matrix(1,0,0,1,40.040001,0)"
                 class="navigator-next-btn-group"
+                transform="matrix(1,0,0,1,40.040001,0)"
               >
-                <g transform="matrix(1,0,0,1,-6,-6)">
+                <g>
                   <path
-                    id="g-svg-81"
+                    id="g-svg-61"
                     fill="rgba(0,0,0,1)"
                     class="navigator-next-btn"
-                    d="M 0,0 L 12,6 L 0,12 Z"
-                    visibility="visible"
+                    d="M -6,-6 L 6,0 L -6,6 Z"
                   />
                 </g>
               </g>
               <g
-                id="g-svg-82"
+                id="g-svg-62"
                 fill="none"
                 transform="matrix(1,0,0,1,11,0)"
                 class="navigator-page-info-group"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
-                    id="g-svg-83"
+                    id="g-svg-63"
                     fill="rgba(0,0,0,1)"
                     class="navigator-page-info"
                     dominant-baseline="central"
@@ -662,20 +458,19 @@
                     dx="0.5"
                     font-size="12"
                     text-anchor="left"
-                    visibility="visible"
                   >
                     1/2
                   </text>
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
-                id="g-svg-77"
+                id="g-svg-57"
                 fill="none"
-                d="M 0,0 l 271.3999982086817,0 l 0,46 l-271.3999982086817 0 z"
+                d="M 0,0 l 263.48000366210937,0 l 0,46 l-263.48000366210937 0 z"
                 class="navigator-clip-path"
-                width="271.3999982086817"
+                width="263.48000366210937"
                 height="46"
               />
             </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout1.svg b/__tests__/integration/snapshots/CategoryLayout1.svg
index 16835c91c..f4c1449fa 100644
--- a/__tests__/integration/snapshots/CategoryLayout1.svg
+++ b/__tests__/integration/snapshots/CategoryLayout1.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="1000"
-  height="40"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-57" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-58"
-          fill="none"
-          height="40"
-          width="1000"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-57" fill="none">
+        <g id="g-svg-58" fill="none" height="40" width="1000">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="1000"
               height="40"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="1000"
               height="13"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,25 +291,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,215.759995,0)"
                         class="items-item"
+                        x="215.76"
+                        y="0"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,215.759995,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -358,16 +324,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -377,10 +340,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -404,25 +367,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,405.079987,0)"
                         class="items-item"
+                        x="405.08"
+                        y="0"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,405.079987,0)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -437,16 +400,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -456,10 +416,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -483,25 +443,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,529,0)"
                         class="items-item"
+                        x="529"
+                        y="0"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,529,0)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -516,16 +476,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -535,10 +492,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -562,25 +519,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,666.479980,0)"
                         class="items-item"
+                        x="666.48"
+                        y="0"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,666.479980,0)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -595,16 +552,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -614,10 +568,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -641,26 +595,20 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-9"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-9" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 747.3199805084863,0 l 0,23 l-747.3199805084863 0 z"
+                    d="M 0,0 l 747.3199804687499,0 l 0,23 l-747.3199804687499 0 z"
                     class="navigator-clip-path"
-                    width="747.3199805084863"
+                    width="747.3199804687499"
                     height="23"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout10.svg b/__tests__/integration/snapshots/CategoryLayout10.svg
index f0ffc39ae..bbe6f6cec 100644
--- a/__tests__/integration/snapshots/CategoryLayout10.svg
+++ b/__tests__/integration/snapshots/CategoryLayout10.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="400"
-  height="130"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-81" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-81" fill="none">
         <g
           id="g-svg-82"
           fill="none"
+          y="30"
           width="400"
           height="100"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="400"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="400"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,189.320007,23)"
                         class="items-item"
+                        x="189.32"
+                        y="23"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,189.320007,23)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,32 +425,26 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-76"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-76" fill="none" class="items-item-page">
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="137.48000000000002"
                         height="23"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -505,16 +459,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -524,10 +475,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -551,25 +502,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,137.479996,0)"
                         class="items-item"
+                        x="137.48000000000002"
+                        y="0"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,137.479996,0)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -584,16 +535,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -603,10 +551,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -630,7 +578,6 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -646,32 +593,30 @@
                   <g
                     id="g-svg-82"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-83"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-84"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.040001,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.040001,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-85"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -681,7 +626,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-87"
                         fill="rgba(0,0,0,1)"
@@ -691,20 +636,19 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 313.2400073639552,0 l 0,46 l-313.2400073639552 0 z"
+                    d="M 0,0 l 313.2400073242188,0 l 0,46 l-313.2400073242188 0 z"
                     class="navigator-clip-path"
-                    width="313.2400073639552"
+                    width="313.2400073242188"
                     height="46"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout11.svg b/__tests__/integration/snapshots/CategoryLayout11.svg
index c9748fd52..3f980eb73 100644
--- a/__tests__/integration/snapshots/CategoryLayout11.svg
+++ b/__tests__/integration/snapshots/CategoryLayout11.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="600"
-  height="130"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-80" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-88" fill="none">
         <g
           id="g-svg-89"
           fill="none"
+          y="30"
           width="600"
           height="100"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="600"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="600"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-80-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,215.759995,0)"
                         class="items-item"
+                        x="215.76"
+                        y="0"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,215.759995,0)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +425,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,123.919998,23)"
                         class="items-item"
+                        x="123.92000000000002"
+                        y="23"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,123.919998,23)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +458,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +474,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,25 +501,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,261.399994,23)"
                         class="items-item"
+                        x="261.40000000000003"
+                        y="23"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,261.399994,23)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -577,16 +534,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -596,10 +550,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -623,26 +577,20 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-8" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
-                    d="M 0,0 l 405.07999454657227,0 l 0,46 l-405.07999454657227 0 z"
+                    d="M 0,0 l 405.0799945068359,0 l 0,46 l-405.0799945068359 0 z"
                     class="navigator-clip-path"
-                    width="405.07999454657227"
+                    width="405.0799945068359"
                     height="46"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout12.svg b/__tests__/integration/snapshots/CategoryLayout12.svg
index 91fa5d0d6..59475afd7 100644
--- a/__tests__/integration/snapshots/CategoryLayout12.svg
+++ b/__tests__/integration/snapshots/CategoryLayout12.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="500"
-  height="130"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-81" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-81" fill="none">
         <g
           id="g-svg-82"
           fill="none"
+          y="30"
           width="500"
           height="100"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="500"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="500"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,215.759995,0)"
                         class="items-item"
+                        x="215.76"
+                        y="0"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,215.759995,0)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,32 +349,26 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-74"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-74" fill="none" class="items-item-page">
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="123.92000000000002"
                         height="23"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -426,16 +383,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -445,10 +399,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -472,25 +426,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,123.919998,0)"
                         class="items-item"
+                        x="123.92000000000002"
+                        y="0"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,123.919998,0)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -505,16 +459,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -524,10 +475,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -551,25 +502,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,261.399994,0)"
                         class="items-item"
+                        x="261.40000000000003"
+                        y="0"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,261.399994,0)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -584,16 +535,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -603,10 +551,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -630,7 +578,6 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -646,32 +593,30 @@
                   <g
                     id="g-svg-82"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-83"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-84"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.040001,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.040001,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-85"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -681,7 +626,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-87"
                         fill="rgba(0,0,0,1)"
@@ -691,20 +636,19 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 405.07999454657227,0 l 0,23 l-405.07999454657227 0 z"
+                    d="M 0,0 l 405.0799945068359,0 l 0,23 l-405.0799945068359 0 z"
                     class="navigator-clip-path"
-                    width="405.07999454657227"
+                    width="405.0799945068359"
                     height="23"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout13.svg b/__tests__/integration/snapshots/CategoryLayout13.svg
index e81307ced..667643130 100644
--- a/__tests__/integration/snapshots/CategoryLayout13.svg
+++ b/__tests__/integration/snapshots/CategoryLayout13.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="600"
-  height="130"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-88" fill="none">
         <g
           id="g-svg-89"
           fill="none"
+          y="30"
           width="600"
           height="100"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="600"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="600"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,215.759995,0)"
                         class="items-item"
+                        x="215.76"
+                        y="0"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,215.759995,0)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,32 +349,26 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-74"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-74" fill="none" class="items-item-page">
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="123.92000000000002"
                         height="23"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -426,16 +383,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -445,10 +399,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -472,25 +426,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,123.919998,0)"
                         class="items-item"
+                        x="123.92000000000002"
+                        y="0"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,123.919998,0)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -505,16 +459,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -524,10 +475,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -551,25 +502,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,261.399994,0)"
                         class="items-item"
+                        x="261.40000000000003"
+                        y="0"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,261.399994,0)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -584,16 +535,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -603,10 +551,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -630,7 +578,6 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -646,32 +593,30 @@
                   <g
                     id="g-svg-82"
                     fill="none"
-                    transform="matrix(0,-1,1,0,9.020000,-17)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(0,-1,1,0,9.020000,-17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-83"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-84"
                     fill="none"
-                    transform="matrix(0,1,-1,0,9.020000,17)"
                     class="navigator-next-btn-group"
+                    transform="matrix(0,1,-1,0,9.020000,17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-85"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -681,7 +626,7 @@
                     transform="matrix(1,0,0,1,9.020000,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-87"
                         fill="rgba(0,0,0,1)"
@@ -691,20 +636,19 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 405.07999454657227,0 l 0,23 l-405.07999454657227 0 z"
+                    d="M 0,0 l 405.0799945068359,0 l 0,23 l-405.0799945068359 0 z"
                     class="navigator-clip-path"
-                    width="405.07999454657227"
+                    width="405.0799945068359"
                     height="23"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout14.svg b/__tests__/integration/snapshots/CategoryLayout14.svg
index 0f93a4fc6..d8cde3d0a 100644
--- a/__tests__/integration/snapshots/CategoryLayout14.svg
+++ b/__tests__/integration/snapshots/CategoryLayout14.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="600"
-  height="130"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-88" fill="none">
         <g
           id="g-svg-89"
           fill="none"
+          y="30"
           width="600"
           height="100"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="600"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="600"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,189.320007,23)"
                         class="items-item"
+                        x="189.32"
+                        y="23"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,189.320007,23)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +425,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,313.239990,23)"
                         class="items-item"
+                        x="313.24"
+                        y="23"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,313.239990,23)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +458,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +474,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,32 +501,26 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-78"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-78" fill="none" class="items-item-page">
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="80.84"
                         height="23"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -584,16 +535,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -603,10 +551,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -630,7 +578,6 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -646,32 +593,30 @@
                   <g
                     id="g-svg-82"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-83"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-84"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.040001,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.040001,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-85"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -681,7 +626,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-87"
                         fill="rgba(0,0,0,1)"
@@ -691,20 +636,19 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 450.7199902741114,0 l 0,46 l-450.7199902741114 0 z"
+                    d="M 0,0 l 450.719990234375,0 l 0,46 l-450.719990234375 0 z"
                     class="navigator-clip-path"
-                    width="450.7199902741114"
+                    width="450.719990234375"
                     height="46"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout15.svg b/__tests__/integration/snapshots/CategoryLayout15.svg
index 62c73a79f..e68d74860 100644
--- a/__tests__/integration/snapshots/CategoryLayout15.svg
+++ b/__tests__/integration/snapshots/CategoryLayout15.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="200"
-  height="330"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-80" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-88" fill="none">
         <g
           id="g-svg-89"
           fill="none"
+          y="30"
           width="200"
           height="300"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="200"
               height="300"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="200"
               height="300"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-80-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,69)"
                         class="items-item"
+                        x="0"
+                        y="69"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,0,69)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,92)"
                         class="items-item"
+                        x="0"
+                        y="92"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,92)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +425,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,115)"
                         class="items-item"
+                        x="0"
+                        y="115"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,115)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +458,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +474,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,25 +501,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,138)"
                         class="items-item"
+                        x="0"
+                        y="138"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,0,138)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -577,16 +534,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -596,10 +550,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -623,26 +577,20 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-8" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
-                    d="M 0,0 l 189.3200000397364,0 l 0,161 l-189.3200000397364 0 z"
+                    d="M 0,0 l 189.32,0 l 0,161 l-189.32 0 z"
                     class="navigator-clip-path"
-                    width="189.3200000397364"
+                    width="189.32"
                     height="161"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout16.svg b/__tests__/integration/snapshots/CategoryLayout16.svg
index 263080230..f0eb9eb5b 100644
--- a/__tests__/integration/snapshots/CategoryLayout16.svg
+++ b/__tests__/integration/snapshots/CategoryLayout16.svg
@@ -10,91 +10,60 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-81"
-        fill="none"
-        width="230"
-        height="330"
-        transform="matrix(1,0,0,1,0,0)"
-      >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-81" fill="none" width="230" height="330">
         <g
           id="g-svg-82"
           fill="none"
+          y="30"
           width="200"
           height="300"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="200"
               height="300"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="200"
               height="300"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -109,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -128,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -155,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -188,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -207,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -234,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -267,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -286,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -313,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,69)"
                         class="items-item"
+                        x="0"
+                        y="69"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,0,69)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -346,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -365,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -392,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,92)"
                         class="items-item"
+                        x="0"
+                        y="92"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,92)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -425,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -444,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -471,32 +425,26 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-76"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-76" fill="none" class="items-item-page">
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="137.48000000000002"
                         height="23"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -511,16 +459,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -530,10 +475,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -557,25 +502,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -590,16 +535,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -609,10 +551,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -636,7 +578,6 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -652,32 +593,30 @@
                   <g
                     id="g-svg-82"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-83"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-84"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.040001,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.040001,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-85"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -687,7 +626,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-87"
                         fill="rgba(0,0,0,1)"
@@ -697,20 +636,19 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 189.3200000397364,0 l 0,115 l-189.3200000397364 0 z"
+                    d="M 0,0 l 189.32,0 l 0,115 l-189.32 0 z"
                     class="navigator-clip-path"
-                    width="189.3200000397364"
+                    width="189.32"
                     height="115"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout17.svg b/__tests__/integration/snapshots/CategoryLayout17.svg
index 2d29a798d..d00a201d1 100644
--- a/__tests__/integration/snapshots/CategoryLayout17.svg
+++ b/__tests__/integration/snapshots/CategoryLayout17.svg
@@ -10,91 +10,60 @@
       <use href="#g-svg-82" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-88"
-        fill="none"
-        width="210"
-        height="110"
-        transform="matrix(1,0,0,1,0,0)"
-      >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-88" fill="none" width="210" height="110">
         <g
           id="g-svg-89"
           fill="none"
+          y="30"
           width="200"
           height="80"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="200"
               height="80"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="200"
               height="80"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-82-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -109,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -128,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -155,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -188,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -207,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -234,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -267,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -286,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -313,32 +273,26 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-72"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-72" fill="none" class="items-item-page">
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="189.32"
                         height="23"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -353,16 +307,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -372,10 +323,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -399,25 +350,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -432,16 +383,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -451,10 +399,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -478,25 +426,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -511,16 +459,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -530,10 +475,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -557,32 +502,26 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-79"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-79" fill="none" class="items-item-page">
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="80.84"
                         height="23"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -597,16 +536,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -616,10 +552,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -643,7 +579,6 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -659,32 +594,30 @@
                   <g
                     id="g-svg-83"
                     fill="none"
-                    transform="matrix(0,-1,1,0,9.140000,-17)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(0,-1,1,0,9.140000,-17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-84"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-85"
                     fill="none"
-                    transform="matrix(0,1,-1,0,9.140000,17)"
                     class="navigator-next-btn-group"
+                    transform="matrix(0,1,-1,0,9.140000,17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-86"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -694,7 +627,7 @@
                     transform="matrix(1,0,0,1,9.140000,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-88"
                         fill="rgba(0,0,0,1)"
@@ -704,20 +637,19 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
-                        visibility="visible"
                       >
                         1/3
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
-                    d="M 0,0 l 189.3200000397364,0 l 0,69 l-189.3200000397364 0 z"
+                    d="M 0,0 l 189.32,0 l 0,69 l-189.32 0 z"
                     class="navigator-clip-path"
-                    width="189.3200000397364"
+                    width="189.32"
                     height="69"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout18.svg b/__tests__/integration/snapshots/CategoryLayout18.svg
index ed77f3866..3e6a09f80 100644
--- a/__tests__/integration/snapshots/CategoryLayout18.svg
+++ b/__tests__/integration/snapshots/CategoryLayout18.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="400"
-  height="330"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-89" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-89" fill="none">
         <g
           id="g-svg-90"
           fill="none"
+          y="30"
           width="400"
           height="300"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="400"
               height="300"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="400"
               height="300"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,64.160004,23)"
                         class="items-item"
+                        x="64.16"
+                        y="23"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,64.160004,23)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +425,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,123.919998,46)"
                         class="items-item"
+                        x="123.92000000000002"
+                        y="46"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,123.919998,46)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +458,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +474,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,32 +501,26 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-78"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-78" fill="none" class="items-item-page">
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="80.84"
                         height="23"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -584,16 +535,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -603,10 +551,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -630,7 +578,6 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -646,32 +593,30 @@
                   <g
                     id="g-svg-82"
                     fill="none"
-                    transform="matrix(0,-1,1,0,9.020000,-17)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(0,-1,1,0,9.020000,-17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-83"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-84"
                     fill="none"
-                    transform="matrix(0,1,-1,0,9.020000,17)"
                     class="navigator-next-btn-group"
+                    transform="matrix(0,1,-1,0,9.020000,17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-85"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -681,7 +626,7 @@
                     transform="matrix(1,0,0,1,9.020000,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-87"
                         fill="rgba(0,0,0,1)"
@@ -691,20 +636,19 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 261.3999982086817,0 l 0,69 l-261.3999982086817 0 z"
+                    d="M 0,0 l 261.39999816894533,0 l 0,69 l-261.39999816894533 0 z"
                     class="navigator-clip-path"
-                    width="261.3999982086817"
+                    width="261.39999816894533"
                     height="69"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout19.svg b/__tests__/integration/snapshots/CategoryLayout19.svg
index a9bcea598..42147a70d 100644
--- a/__tests__/integration/snapshots/CategoryLayout19.svg
+++ b/__tests__/integration/snapshots/CategoryLayout19.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="500"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-80" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-88" fill="none">
         <g
           id="g-svg-89"
           fill="none"
+          y="30"
           width="500"
           height="30"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="500"
               height="30"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="500"
               height="30"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-80-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="71.42857142857143"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,71.428574,0)"
                         class="items-item"
+                        x="71.42857142857143"
+                        y="0"
                         width="71.42857142857143"
                         height="23"
+                        transform="matrix(1,0,0,1,71.428574,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,142.857147,0)"
                         class="items-item"
+                        x="142.85714285714286"
+                        y="0"
                         width="71.42857142857143"
                         height="23"
+                        transform="matrix(1,0,0,1,142.857147,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,214.285721,0)"
                         class="items-item"
+                        x="214.28571428571428"
+                        y="0"
                         width="71.42857142857143"
                         height="23"
+                        transform="matrix(1,0,0,1,214.285721,0)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,285.714294,0)"
                         class="items-item"
+                        x="285.7142857142857"
+                        y="0"
                         width="71.42857142857143"
                         height="23"
+                        transform="matrix(1,0,0,1,285.714294,0)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +425,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,357.142853,0)"
                         class="items-item"
+                        x="357.14285714285717"
+                        y="0"
                         width="71.42857142857143"
                         height="23"
+                        transform="matrix(1,0,0,1,357.142853,0)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +458,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +474,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,25 +501,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,428.571442,0)"
                         class="items-item"
+                        x="428.57142857142856"
+                        y="0"
                         width="71.42857142857143"
                         height="23"
+                        transform="matrix(1,0,0,1,428.571442,0)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -577,16 +534,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -596,10 +550,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -623,20 +577,14 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-8" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout2.svg b/__tests__/integration/snapshots/CategoryLayout2.svg
index cc1fda41d..bfce18ca6 100644
--- a/__tests__/integration/snapshots/CategoryLayout2.svg
+++ b/__tests__/integration/snapshots/CategoryLayout2.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="600"
-  height="40"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-82" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-82" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-83"
-          fill="none"
-          height="40"
-          width="600"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none">
+        <g id="g-svg-83" fill="none" height="40" width="600">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="600"
               height="40"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="600"
               height="13"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-82-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,25 +291,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,215.759995,0)"
                         class="items-item"
+                        x="215.76"
+                        y="0"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,215.759995,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -358,16 +324,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -377,10 +340,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -404,25 +367,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,405.079987,0)"
                         class="items-item"
+                        x="405.08"
+                        y="0"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,405.079987,0)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -437,16 +400,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -456,10 +416,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -483,32 +443,26 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-77"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-77" fill="none" class="items-item-page">
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="137.48000000000002"
                         height="23"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -523,16 +477,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -542,10 +493,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -569,25 +520,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,137.479996,0)"
                         class="items-item"
+                        x="137.48000000000002"
+                        y="0"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,137.479996,0)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -602,16 +553,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -621,10 +569,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -648,7 +596,6 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -664,32 +611,30 @@
                   <g
                     id="g-svg-83"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-84"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-85"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.040001,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.040001,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-86"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -699,7 +644,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-88"
                         fill="rgba(0,0,0,1)"
@@ -709,20 +654,19 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
-                    d="M 0,0 l 528.9999866120021,0 l 0,23 l-528.9999866120021 0 z"
+                    d="M 0,0 l 528.9999865722657,0 l 0,23 l-528.9999865722657 0 z"
                     class="navigator-clip-path"
-                    width="528.9999866120021"
+                    width="528.9999865722657"
                     height="23"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout20.svg b/__tests__/integration/snapshots/CategoryLayout20.svg
index 658635219..1dd9b2fd1 100644
--- a/__tests__/integration/snapshots/CategoryLayout20.svg
+++ b/__tests__/integration/snapshots/CategoryLayout20.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="300"
-  height="90"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-80" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-81" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-81" fill="none">
         <g
           id="g-svg-82"
           fill="none"
+          y="30"
           width="300"
           height="60"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="300"
               height="60"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="300"
               height="60"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-80-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="75"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="75"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,75,0)"
                         class="items-item"
+                        x="75"
+                        y="0"
                         width="75"
                         height="23"
+                        transform="matrix(1,0,0,1,75,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,75,23)"
                         class="items-item"
+                        x="75"
+                        y="23"
                         width="75"
                         height="23"
+                        transform="matrix(1,0,0,1,75,23)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,150,0)"
                         class="items-item"
+                        x="150"
+                        y="0"
                         width="75"
                         height="23"
+                        transform="matrix(1,0,0,1,150,0)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +425,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,150,23)"
                         class="items-item"
+                        x="150"
+                        y="23"
                         width="75"
                         height="23"
+                        transform="matrix(1,0,0,1,150,23)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +458,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +474,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,25 +501,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,225,0)"
                         class="items-item"
+                        x="225"
+                        y="0"
                         width="75"
                         height="23"
+                        transform="matrix(1,0,0,1,225,0)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -577,16 +534,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -596,10 +550,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -623,20 +577,14 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-8" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout21.svg b/__tests__/integration/snapshots/CategoryLayout21.svg
index d7ee96565..81f2c7205 100644
--- a/__tests__/integration/snapshots/CategoryLayout21.svg
+++ b/__tests__/integration/snapshots/CategoryLayout21.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="300"
-  height="90"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-81" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-81" fill="none">
         <g
           id="g-svg-82"
           fill="none"
+          y="30"
           width="300"
           height="60"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="300"
               height="60"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="300"
               height="60"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="81.66666666666667"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,81.666664,0)"
                         class="items-item"
+                        x="81.66666666666667"
+                        y="0"
                         width="81.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,81.666664,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,163.333328,0)"
                         class="items-item"
+                        x="163.33333333333334"
+                        y="0"
                         width="81.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,163.333328,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="81.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,81.666664,23)"
                         class="items-item"
+                        x="81.66666666666667"
+                        y="23"
                         width="81.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,81.666664,23)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +425,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,163.333328,23)"
                         class="items-item"
+                        x="163.33333333333334"
+                        y="23"
                         width="81.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,163.333328,23)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +458,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +474,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,32 +501,26 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-78"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-78" fill="none" class="items-item-page">
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="81.66666666666667"
                         height="23"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -584,16 +535,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -603,10 +551,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -630,7 +578,6 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -646,32 +593,30 @@
                   <g
                     id="g-svg-82"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-83"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-84"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.040001,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.040001,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-85"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -681,7 +626,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-87"
                         fill="rgba(0,0,0,1)"
@@ -691,14 +636,13 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout22.svg b/__tests__/integration/snapshots/CategoryLayout22.svg
index bc6f2558a..da854b4d7 100644
--- a/__tests__/integration/snapshots/CategoryLayout22.svg
+++ b/__tests__/integration/snapshots/CategoryLayout22.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="200"
-  height="230"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-80" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-88" fill="none">
         <g
           id="g-svg-89"
           fill="none"
+          y="30"
           width="200"
           height="200"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="200"
               height="200"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="200"
               height="200"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-80-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="200"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="200"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="200"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,69)"
                         class="items-item"
+                        x="0"
+                        y="69"
                         width="200"
                         height="23"
+                        transform="matrix(1,0,0,1,0,69)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,92)"
                         class="items-item"
+                        x="0"
+                        y="92"
                         width="200"
                         height="23"
+                        transform="matrix(1,0,0,1,0,92)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +425,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,115)"
                         class="items-item"
+                        x="0"
+                        y="115"
                         width="200"
                         height="23"
+                        transform="matrix(1,0,0,1,0,115)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +458,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +474,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,25 +501,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,138)"
                         class="items-item"
+                        x="0"
+                        y="138"
                         width="200"
                         height="23"
+                        transform="matrix(1,0,0,1,0,138)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -577,16 +534,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -596,10 +550,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -623,20 +577,14 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-8" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout23.svg b/__tests__/integration/snapshots/CategoryLayout23.svg
index 62980c7f8..492a290e2 100644
--- a/__tests__/integration/snapshots/CategoryLayout23.svg
+++ b/__tests__/integration/snapshots/CategoryLayout23.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="500"
-  height="130"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-210" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-81" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-81" fill="none">
         <g
           id="g-svg-82"
           fill="none"
+          y="30"
           width="500"
           height="100"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="500"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="500"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-210-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-169"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-169" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="100"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,100,0)"
                         class="items-item"
+                        x="100"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,100,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,300,0)"
                         class="items-item"
+                        x="300"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,300,0)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,400,0)"
                         class="items-item"
+                        x="400"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,400,0)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +425,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +458,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +474,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,25 +501,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,100,23)"
                         class="items-item"
+                        x="100"
+                        y="23"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,100,23)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -577,16 +534,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -596,10 +550,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -623,25 +577,25 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-65"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,23)"
                         class="items-item"
+                        x="200"
+                        y="23"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,200,23)"
                       >
                         <g
                           id="g-svg-71"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-72"
                               fill="none"
@@ -656,16 +610,13 @@
                         <g
                           id="g-svg-66"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-67"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -675,10 +626,10 @@
                         <g
                           id="g-svg-68"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-69"
                               fill="rgba(100,100,100,1)"
@@ -702,25 +653,25 @@
                         <g
                           id="g-svg-70"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-73"
                         fill="none"
-                        transform="matrix(1,0,0,1,300,23)"
                         class="items-item"
+                        x="300"
+                        y="23"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,300,23)"
                       >
                         <g
                           id="g-svg-79"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-80"
                               fill="none"
@@ -735,16 +686,13 @@
                         <g
                           id="g-svg-74"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-75"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -754,10 +702,10 @@
                         <g
                           id="g-svg-76"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-77"
                               fill="rgba(100,100,100,1)"
@@ -781,25 +729,25 @@
                         <g
                           id="g-svg-78"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-81"
                         fill="none"
-                        transform="matrix(1,0,0,1,400,23)"
                         class="items-item"
+                        x="400"
+                        y="23"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,400,23)"
                       >
                         <g
                           id="g-svg-87"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-88"
                               fill="none"
@@ -814,16 +762,13 @@
                         <g
                           id="g-svg-82"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-83"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -833,10 +778,10 @@
                         <g
                           id="g-svg-84"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-85"
                               fill="rgba(100,100,100,1)"
@@ -860,25 +805,25 @@
                         <g
                           id="g-svg-86"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-89"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-95"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-96"
                               fill="none"
@@ -893,16 +838,13 @@
                         <g
                           id="g-svg-90"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-91"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -912,10 +854,10 @@
                         <g
                           id="g-svg-92"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-93"
                               fill="rgba(100,100,100,1)"
@@ -939,25 +881,25 @@
                         <g
                           id="g-svg-94"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-97"
                         fill="none"
-                        transform="matrix(1,0,0,1,100,46)"
                         class="items-item"
+                        x="100"
+                        y="46"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,100,46)"
                       >
                         <g
                           id="g-svg-103"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-104"
                               fill="none"
@@ -972,16 +914,13 @@
                         <g
                           id="g-svg-98"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-99"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -991,10 +930,10 @@
                         <g
                           id="g-svg-100"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-101"
                               fill="rgba(100,100,100,1)"
@@ -1018,25 +957,25 @@
                         <g
                           id="g-svg-102"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-105"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,46)"
                         class="items-item"
+                        x="200"
+                        y="46"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,200,46)"
                       >
                         <g
                           id="g-svg-111"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-112"
                               fill="none"
@@ -1051,16 +990,13 @@
                         <g
                           id="g-svg-106"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-107"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -1070,10 +1006,10 @@
                         <g
                           id="g-svg-108"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-109"
                               fill="rgba(100,100,100,1)"
@@ -1097,25 +1033,25 @@
                         <g
                           id="g-svg-110"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-113"
                         fill="none"
-                        transform="matrix(1,0,0,1,300,46)"
                         class="items-item"
+                        x="300"
+                        y="46"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,300,46)"
                       >
                         <g
                           id="g-svg-119"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-120"
                               fill="none"
@@ -1130,16 +1066,13 @@
                         <g
                           id="g-svg-114"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-115"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -1149,10 +1082,10 @@
                         <g
                           id="g-svg-116"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-117"
                               fill="rgba(100,100,100,1)"
@@ -1176,25 +1109,25 @@
                         <g
                           id="g-svg-118"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-121"
                         fill="none"
-                        transform="matrix(1,0,0,1,400,46)"
                         class="items-item"
+                        x="400"
+                        y="46"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,400,46)"
                       >
                         <g
                           id="g-svg-127"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-128"
                               fill="none"
@@ -1209,16 +1142,13 @@
                         <g
                           id="g-svg-122"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-123"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -1228,10 +1158,10 @@
                         <g
                           id="g-svg-124"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-125"
                               fill="rgba(100,100,100,1)"
@@ -1255,25 +1185,25 @@
                         <g
                           id="g-svg-126"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-129"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,69)"
                         class="items-item"
+                        x="0"
+                        y="69"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,0,69)"
                       >
                         <g
                           id="g-svg-135"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-136"
                               fill="none"
@@ -1288,16 +1218,13 @@
                         <g
                           id="g-svg-130"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-131"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -1307,10 +1234,10 @@
                         <g
                           id="g-svg-132"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-133"
                               fill="rgba(100,100,100,1)"
@@ -1334,25 +1261,25 @@
                         <g
                           id="g-svg-134"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-137"
                         fill="none"
-                        transform="matrix(1,0,0,1,100,69)"
                         class="items-item"
+                        x="100"
+                        y="69"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,100,69)"
                       >
                         <g
                           id="g-svg-143"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-144"
                               fill="none"
@@ -1367,16 +1294,13 @@
                         <g
                           id="g-svg-138"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-139"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -1386,10 +1310,10 @@
                         <g
                           id="g-svg-140"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-141"
                               fill="rgba(100,100,100,1)"
@@ -1413,25 +1337,25 @@
                         <g
                           id="g-svg-142"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-145"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,69)"
                         class="items-item"
+                        x="200"
+                        y="69"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,200,69)"
                       >
                         <g
                           id="g-svg-151"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-152"
                               fill="none"
@@ -1446,16 +1370,13 @@
                         <g
                           id="g-svg-146"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-147"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -1465,10 +1386,10 @@
                         <g
                           id="g-svg-148"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-149"
                               fill="rgba(100,100,100,1)"
@@ -1492,25 +1413,25 @@
                         <g
                           id="g-svg-150"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-153"
                         fill="none"
-                        transform="matrix(1,0,0,1,300,69)"
                         class="items-item"
+                        x="300"
+                        y="69"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,300,69)"
                       >
                         <g
                           id="g-svg-159"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-160"
                               fill="none"
@@ -1525,16 +1446,13 @@
                         <g
                           id="g-svg-154"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-155"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -1544,10 +1462,10 @@
                         <g
                           id="g-svg-156"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-157"
                               fill="rgba(100,100,100,1)"
@@ -1571,25 +1489,25 @@
                         <g
                           id="g-svg-158"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-161"
                         fill="none"
-                        transform="matrix(1,0,0,1,400,69)"
                         class="items-item"
+                        x="400"
+                        y="69"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,400,69)"
                       >
                         <g
                           id="g-svg-167"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-168"
                               fill="none"
@@ -1604,16 +1522,13 @@
                         <g
                           id="g-svg-162"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-163"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -1623,10 +1538,10 @@
                         <g
                           id="g-svg-164"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-165"
                               fill="rgba(100,100,100,1)"
@@ -1650,20 +1565,14 @@
                         <g
                           id="g-svg-166"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-8" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-210"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout24.svg b/__tests__/integration/snapshots/CategoryLayout24.svg
index d6aa1e7c2..d6d9b27c0 100644
--- a/__tests__/integration/snapshots/CategoryLayout24.svg
+++ b/__tests__/integration/snapshots/CategoryLayout24.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="300"
-  height="110"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-80" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-211" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-211" fill="none">
         <g
           id="g-svg-212"
           fill="none"
+          y="30"
           width="300"
           height="80"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="300"
               height="80"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="300"
               height="80"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-80-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="150"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="150"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="150"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,69)"
                         class="items-item"
+                        x="0"
+                        y="69"
                         width="150"
                         height="23"
+                        transform="matrix(1,0,0,1,0,69)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,150,0)"
                         class="items-item"
+                        x="150"
+                        y="0"
                         width="150"
                         height="23"
+                        transform="matrix(1,0,0,1,150,0)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +425,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,150,23)"
                         class="items-item"
+                        x="150"
+                        y="23"
                         width="150"
                         height="23"
+                        transform="matrix(1,0,0,1,150,23)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +458,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +474,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,25 +501,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,150,46)"
                         class="items-item"
+                        x="150"
+                        y="46"
                         width="150"
                         height="23"
+                        transform="matrix(1,0,0,1,150,46)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -577,16 +534,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -596,10 +550,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -623,20 +577,14 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-8" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout25.svg b/__tests__/integration/snapshots/CategoryLayout25.svg
index 741cea167..cfefb525f 100644
--- a/__tests__/integration/snapshots/CategoryLayout25.svg
+++ b/__tests__/integration/snapshots/CategoryLayout25.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="300"
-  height="110"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,85 +10,60 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,30)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-81" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-81" fill="none">
         <g
           id="g-svg-82"
           fill="none"
+          y="30"
           width="300"
           height="80"
           transform="matrix(1,0,0,1,0,30)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="300"
               height="80"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="300"
               height="80"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="122.5"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +78,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +94,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +121,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="122.5"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +154,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +170,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +197,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="122.5"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +230,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +246,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +273,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,122.500000,0)"
                         class="items-item"
+                        x="122.5"
+                        y="0"
                         width="122.5"
                         height="23"
+                        transform="matrix(1,0,0,1,122.500000,0)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +306,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +322,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +349,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,122.500000,23)"
                         class="items-item"
+                        x="122.5"
+                        y="23"
                         width="122.5"
                         height="23"
+                        transform="matrix(1,0,0,1,122.500000,23)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +382,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +398,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +425,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,122.500000,46)"
                         class="items-item"
+                        x="122.5"
+                        y="46"
                         width="122.5"
                         height="23"
+                        transform="matrix(1,0,0,1,122.500000,46)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +458,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +474,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,32 +501,26 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-78"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-78" fill="none" class="items-item-page">
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="122.5"
                         height="23"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -584,16 +535,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -603,10 +551,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -630,7 +578,6 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -646,32 +593,30 @@
                   <g
                     id="g-svg-82"
                     fill="none"
-                    transform="matrix(0,-1,1,0,9.020000,-17)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(0,-1,1,0,9.020000,-17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-83"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-84"
                     fill="none"
-                    transform="matrix(0,1,-1,0,9.020000,17)"
                     class="navigator-next-btn-group"
+                    transform="matrix(0,1,-1,0,9.020000,17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-85"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -681,7 +626,7 @@
                     transform="matrix(1,0,0,1,9.020000,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-87"
                         fill="rgba(0,0,0,1)"
@@ -691,14 +636,13 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout26.svg b/__tests__/integration/snapshots/CategoryLayout26.svg
index a7b32b413..f7dd5e869 100644
--- a/__tests__/integration/snapshots/CategoryLayout26.svg
+++ b/__tests__/integration/snapshots/CategoryLayout26.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="500"
-  height="100"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-89"
-          fill="none"
-          width="500"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-88" fill="none">
+        <g id="g-svg-89" fill="none" width="500" height="100">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="500"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="500"
               height="73"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,25 +291,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,215.759995,0)"
                         class="items-item"
+                        x="215.76"
+                        y="0"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,215.759995,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -358,16 +324,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -377,10 +340,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -404,25 +367,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -437,16 +400,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -456,10 +416,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -483,25 +443,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,123.919998,23)"
                         class="items-item"
+                        x="123.92000000000002"
+                        y="23"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,123.919998,23)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -516,16 +476,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -535,10 +492,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -562,25 +519,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,261.399994,23)"
                         class="items-item"
+                        x="261.40000000000003"
+                        y="23"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,261.399994,23)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -595,16 +552,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -614,10 +568,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -641,26 +595,20 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-9"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-9" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 405.07999454657227,0 l 0,46 l-405.07999454657227 0 z"
+                    d="M 0,0 l 405.0799945068359,0 l 0,46 l-405.0799945068359 0 z"
                     class="navigator-clip-path"
-                    width="405.07999454657227"
+                    width="405.0799945068359"
                     height="46"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout27.svg b/__tests__/integration/snapshots/CategoryLayout27.svg
index f0c5f6654..fe981f6ff 100644
--- a/__tests__/integration/snapshots/CategoryLayout27.svg
+++ b/__tests__/integration/snapshots/CategoryLayout27.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="300"
-  height="100"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-82" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-82" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-83"
-          fill="none"
-          height="100"
-          width="300"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none">
+        <g id="g-svg-83" fill="none" height="100" width="300">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="300"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="300"
               height="73"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-82-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,25 +291,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -358,16 +324,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -377,10 +340,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -404,32 +367,26 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-75"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-75" fill="none" class="items-item-page">
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="123.92000000000002"
                         height="23"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -444,16 +401,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -463,10 +417,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -490,25 +444,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -523,16 +477,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -542,10 +493,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -569,25 +520,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,137.479996,23)"
                         class="items-item"
+                        x="137.48000000000002"
+                        y="23"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,137.479996,23)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -602,16 +553,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -621,10 +569,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -648,7 +596,6 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -664,32 +611,30 @@
                   <g
                     id="g-svg-83"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-84"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-85"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.040001,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.040001,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-86"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -699,7 +644,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-88"
                         fill="rgba(0,0,0,1)"
@@ -709,20 +654,19 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
-                    d="M 0,0 l 218.31999576727551,0 l 0,46 l-218.31999576727551 0 z"
+                    d="M 0,0 l 218.3199957275391,0 l 0,46 l-218.3199957275391 0 z"
                     class="navigator-clip-path"
-                    width="218.31999576727551"
+                    width="218.3199957275391"
                     height="46"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout28.svg b/__tests__/integration/snapshots/CategoryLayout28.svg
index de04fda51..db335cf6b 100644
--- a/__tests__/integration/snapshots/CategoryLayout28.svg
+++ b/__tests__/integration/snapshots/CategoryLayout28.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="500"
-  height="100"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-89" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-90"
-          fill="none"
-          height="100"
-          width="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-89" fill="none">
+        <g id="g-svg-90" fill="none" height="100" width="500">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="500"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="500"
               height="73"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,25 +291,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,215.759995,0)"
                         class="items-item"
+                        x="215.76"
+                        y="0"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,215.759995,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -358,16 +324,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -377,10 +340,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -404,25 +367,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -437,16 +400,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -456,10 +416,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -483,25 +443,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,123.919998,23)"
                         class="items-item"
+                        x="123.92000000000002"
+                        y="23"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,123.919998,23)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -516,16 +476,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -535,10 +492,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -562,25 +519,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,261.399994,23)"
                         class="items-item"
+                        x="261.40000000000003"
+                        y="23"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,261.399994,23)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -595,16 +552,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -614,10 +568,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -641,26 +595,20 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-9"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-9" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 405.07999454657227,0 l 0,46 l-405.07999454657227 0 z"
+                    d="M 0,0 l 405.0799945068359,0 l 0,46 l-405.0799945068359 0 z"
                     class="navigator-clip-path"
-                    width="405.07999454657227"
+                    width="405.0799945068359"
                     height="46"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout29.svg b/__tests__/integration/snapshots/CategoryLayout29.svg
index 9d999c13c..8ab0c64b7 100644
--- a/__tests__/integration/snapshots/CategoryLayout29.svg
+++ b/__tests__/integration/snapshots/CategoryLayout29.svg
@@ -1,6 +1,6 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="200"
+  width="400"
   height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
@@ -10,31 +10,19 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-82" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-83"
-          fill="none"
-          width="200"
-          height="300"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none">
+        <g id="g-svg-83" fill="none" width="200" height="300">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="200"
               height="300"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="200"
               height="273"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,25 +291,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,69)"
                         class="items-item"
+                        x="0"
+                        y="69"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,0,69)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -358,16 +324,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -377,10 +340,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -404,25 +367,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,92)"
                         class="items-item"
+                        x="0"
+                        y="92"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,92)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -437,16 +400,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -456,10 +416,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -483,25 +443,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,115)"
                         class="items-item"
+                        x="0"
+                        y="115"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,115)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -516,16 +476,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -535,10 +492,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -562,25 +519,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,138)"
                         class="items-item"
+                        x="0"
+                        y="138"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,0,138)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -595,16 +552,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -614,10 +568,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -641,26 +595,20 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-9"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-9" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 189.3200000397364,0 l 0,161 l-189.3200000397364 0 z"
+                    d="M 0,0 l 189.32,0 l 0,161 l-189.32 0 z"
                     class="navigator-clip-path"
-                    width="189.3200000397364"
+                    width="189.32"
                     height="161"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout3.svg b/__tests__/integration/snapshots/CategoryLayout3.svg
index fd5eb10f2..c6945ef27 100644
--- a/__tests__/integration/snapshots/CategoryLayout3.svg
+++ b/__tests__/integration/snapshots/CategoryLayout3.svg
@@ -10,37 +10,19 @@
       <use href="#g-svg-82" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-89"
-        fill="none"
-        width="600"
-        height="60"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-90"
-          fill="none"
-          height="40"
-          width="600"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-89" fill="none" width="600" height="60">
+        <g id="g-svg-90" fill="none" height="40" width="600">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="600"
               height="40"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -52,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -70,49 +54,34 @@
               fill="none"
               width="600"
               height="13"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-82-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="83.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -127,14 +96,14 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-12"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(87,129,240,1)"
                               stroke-width="3"
@@ -145,10 +114,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -172,25 +141,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,93.559998,0)"
                         class="items-item"
+                        x="93.56"
+                        y="0"
                         width="78.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,93.559998,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -205,14 +174,14 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-20"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(112,210,160,1)"
                               stroke-width="3"
@@ -223,10 +192,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -250,25 +219,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,181.600006,0)"
                         class="items-item"
+                        x="181.6"
+                        y="0"
                         width="69.16"
                         height="23"
+                        transform="matrix(1,0,0,1,181.600006,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -283,14 +252,14 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-28"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(85,100,132,1)"
                               stroke-width="3"
@@ -301,10 +270,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -328,25 +297,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,260.760010,0)"
                         class="items-item"
+                        x="260.76"
+                        y="0"
                         width="194.32"
                         height="23"
+                        transform="matrix(1,0,0,1,260.760010,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -361,14 +330,14 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-36"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(239,183,69,1)"
                               stroke-width="3"
@@ -379,10 +348,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -406,32 +375,26 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-75"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-75" fill="none" class="items-item-page">
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="128.92000000000002"
                         height="23"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -446,14 +409,14 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-44"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(95,79,238,1)"
                               stroke-width="3"
@@ -464,10 +427,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -491,25 +454,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,138.919998,0)"
                         class="items-item"
+                        x="138.92000000000002"
+                        y="0"
                         width="142.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,138.919998,0)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -524,14 +487,14 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-52"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(87,129,240,1)"
                               stroke-width="3"
@@ -542,10 +505,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -569,25 +532,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,291.399994,0)"
                         class="items-item"
+                        x="291.40000000000003"
+                        y="0"
                         width="85.84"
                         height="23"
+                        transform="matrix(1,0,0,1,291.399994,0)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -602,14 +565,14 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-60"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(112,210,160,1)"
                               stroke-width="3"
@@ -620,10 +583,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -647,7 +610,6 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -663,32 +625,30 @@
                   <g
                     id="g-svg-83"
                     fill="none"
-                    transform="matrix(0,-1,1,0,9.020000,-17)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(0,-1,1,0,9.020000,-17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-84"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-85"
                     fill="none"
-                    transform="matrix(0,1,-1,0,9.020000,17)"
                     class="navigator-next-btn-group"
+                    transform="matrix(0,1,-1,0,9.020000,17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-86"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -698,7 +658,7 @@
                     transform="matrix(1,0,0,1,9.020000,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-88"
                         fill="rgba(0,0,0,1)"
@@ -708,14 +668,13 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout30.svg b/__tests__/integration/snapshots/CategoryLayout30.svg
index b2e71e250..8f76c2265 100644
--- a/__tests__/integration/snapshots/CategoryLayout30.svg
+++ b/__tests__/integration/snapshots/CategoryLayout30.svg
@@ -10,37 +10,19 @@
       <use href="#g-svg-82" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-82"
-        fill="none"
-        width="230"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-83"
-          fill="none"
-          width="200"
-          height="300"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none" width="230" height="300">
+        <g id="g-svg-83" fill="none" width="200" height="300">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="200"
               height="300"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -52,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -70,49 +54,34 @@
               fill="none"
               width="200"
               height="273"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-82-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -127,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -146,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -173,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -206,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -225,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -252,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -285,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -304,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -331,25 +291,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,69)"
                         class="items-item"
+                        x="0"
+                        y="69"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,0,69)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -364,16 +324,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -383,10 +340,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -410,25 +367,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,92)"
                         class="items-item"
+                        x="0"
+                        y="92"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,92)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -443,16 +400,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -462,10 +416,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -489,32 +443,26 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-77"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-77" fill="none" class="items-item-page">
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="137.48000000000002"
                         height="23"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -529,16 +477,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -548,10 +493,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -575,25 +520,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -608,16 +553,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -627,10 +569,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -654,7 +596,6 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -670,32 +611,30 @@
                   <g
                     id="g-svg-83"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-84"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-85"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.040001,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.040001,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-86"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -705,7 +644,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-88"
                         fill="rgba(0,0,0,1)"
@@ -715,20 +654,19 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
-                    d="M 0,0 l 189.3200000397364,0 l 0,115 l-189.3200000397364 0 z"
+                    d="M 0,0 l 189.32,0 l 0,115 l-189.32 0 z"
                     class="navigator-clip-path"
-                    width="189.3200000397364"
+                    width="189.32"
                     height="115"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout31.svg b/__tests__/integration/snapshots/CategoryLayout31.svg
index 555c7e2a6..adb214c5f 100644
--- a/__tests__/integration/snapshots/CategoryLayout31.svg
+++ b/__tests__/integration/snapshots/CategoryLayout31.svg
@@ -10,37 +10,19 @@
       <use href="#g-svg-84" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-89"
-        fill="none"
-        width="200"
-        height="110"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-90"
-          fill="none"
-          width="200"
-          height="80"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-89" fill="none" width="200" height="110">
+        <g id="g-svg-90" fill="none" width="200" height="80">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="200"
               height="80"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -52,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -70,49 +54,34 @@
               fill="none"
               width="200"
               height="53"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-84-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -127,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -146,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -173,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -206,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -225,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -252,32 +215,26 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-71"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-71" fill="none" class="items-item-page">
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="64.16"
                         height="23"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -292,16 +249,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -311,10 +265,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -338,25 +292,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -371,16 +325,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -390,10 +341,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -417,32 +368,26 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-76"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-76" fill="none" class="items-item-page">
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="123.92000000000002"
                         height="23"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -457,16 +402,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -476,10 +418,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -503,25 +445,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -536,16 +478,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -555,10 +494,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -582,32 +521,26 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-81"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-81" fill="none" class="items-item-page">
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="80.84"
                         height="23"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -622,16 +555,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -641,10 +571,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -668,7 +598,6 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -684,32 +613,30 @@
                   <g
                     id="g-svg-85"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-86"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-87"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.520000,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.520000,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-88"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -719,7 +646,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-90"
                         fill="rgba(0,0,0,1)"
@@ -729,20 +656,19 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/4
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-84"
                     fill="none"
-                    d="M 0,0 l 189.3200000397364,0 l 0,46 l-189.3200000397364 0 z"
+                    d="M 0,0 l 189.32,0 l 0,46 l-189.32 0 z"
                     class="navigator-clip-path"
-                    width="189.3200000397364"
+                    width="189.32"
                     height="46"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout32.svg b/__tests__/integration/snapshots/CategoryLayout32.svg
index cfc5c3772..f0aaf8dfe 100644
--- a/__tests__/integration/snapshots/CategoryLayout32.svg
+++ b/__tests__/integration/snapshots/CategoryLayout32.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="500"
-  height="100"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-91" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-92"
-          fill="none"
-          height="100"
-          width="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-91" fill="none">
+        <g id="g-svg-92" fill="none" height="100" width="500">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="500"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="500"
               height="73"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,25 +291,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,215.759995,0)"
                         class="items-item"
+                        x="215.76"
+                        y="0"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,215.759995,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -358,16 +324,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -377,10 +340,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -404,25 +367,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -437,16 +400,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -456,10 +416,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -483,25 +443,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,123.919998,23)"
                         class="items-item"
+                        x="123.92000000000002"
+                        y="23"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,123.919998,23)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -516,16 +476,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -535,10 +492,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -562,25 +519,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,261.399994,23)"
                         class="items-item"
+                        x="261.40000000000003"
+                        y="23"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,261.399994,23)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -595,16 +552,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -614,10 +568,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -641,26 +595,20 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-9"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-9" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 405.07999454657227,0 l 0,46 l-405.07999454657227 0 z"
+                    d="M 0,0 l 405.0799945068359,0 l 0,46 l-405.0799945068359 0 z"
                     class="navigator-clip-path"
-                    width="405.07999454657227"
+                    width="405.0799945068359"
                     height="46"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout33.svg b/__tests__/integration/snapshots/CategoryLayout33.svg
index 99ef9b051..e3286ac2b 100644
--- a/__tests__/integration/snapshots/CategoryLayout33.svg
+++ b/__tests__/integration/snapshots/CategoryLayout33.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="500"
-  height="100"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-82" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-83"
-          fill="none"
-          height="100"
-          width="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none">
+        <g id="g-svg-83" fill="none" height="100" width="500">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="500"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="500"
               height="73"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-81-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,25 +291,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,215.759995,0)"
                         class="items-item"
+                        x="215.76"
+                        y="0"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,215.759995,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -358,16 +324,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -377,10 +340,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -404,25 +367,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -437,16 +400,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -456,10 +416,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -483,25 +443,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,123.919998,23)"
                         class="items-item"
+                        x="123.92000000000002"
+                        y="23"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,123.919998,23)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -516,16 +476,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -535,10 +492,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -562,25 +519,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,261.399994,23)"
                         class="items-item"
+                        x="261.40000000000003"
+                        y="23"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,261.399994,23)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -595,16 +552,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -614,10 +568,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -641,26 +595,20 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-9"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-9" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
-                    d="M 0,0 l 405.07999454657227,0 l 0,46 l-405.07999454657227 0 z"
+                    d="M 0,0 l 405.0799945068359,0 l 0,46 l-405.0799945068359 0 z"
                     class="navigator-clip-path"
-                    width="405.07999454657227"
+                    width="405.0799945068359"
                     height="46"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryLayout34.svg b/__tests__/integration/snapshots/CategoryLayout34.svg
index 6ffedf8ec..34020d065 100644
--- a/__tests__/integration/snapshots/CategoryLayout34.svg
+++ b/__tests__/integration/snapshots/CategoryLayout34.svg
@@ -10,37 +10,19 @@
       <use href="#g-svg-82" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-82"
-        fill="none"
-        width="600"
-        height="80"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-83"
-          fill="none"
-          height="40"
-          width="600"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none" width="600" height="80">
+        <g id="g-svg-83" fill="none" height="40" width="600">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="600"
               height="40"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -52,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -70,49 +54,34 @@
               fill="none"
               width="600"
               height="13"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-82-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-66"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-66" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="83.56"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -127,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(87,129,240,1)"
@@ -148,10 +114,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -175,25 +141,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,93.559998,0)"
                         class="items-item"
+                        x="93.56"
+                        y="0"
                         width="78.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,93.559998,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -208,16 +174,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(112,210,160,1)"
@@ -229,10 +192,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -256,25 +219,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,181.600006,0)"
                         class="items-item"
+                        x="181.6"
+                        y="0"
                         width="69.16"
                         height="23"
+                        transform="matrix(1,0,0,1,181.600006,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -289,16 +252,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(85,100,132,1)"
@@ -310,10 +270,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -337,25 +297,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,260.760010,0)"
                         class="items-item"
+                        x="260.76"
+                        y="0"
                         width="194.32"
                         height="23"
+                        transform="matrix(1,0,0,1,260.760010,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -370,16 +330,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(239,183,69,1)"
@@ -391,10 +348,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -418,32 +375,26 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-75"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-75" fill="none" class="items-item-page">
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="128.92000000000002"
                         height="23"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -458,16 +409,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(95,79,238,1)"
@@ -479,10 +427,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -506,25 +454,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,138.919998,0)"
                         class="items-item"
+                        x="138.92000000000002"
+                        y="0"
                         width="142.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,138.919998,0)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -539,16 +487,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(87,129,240,1)"
@@ -560,10 +505,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -587,25 +532,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,291.399994,0)"
                         class="items-item"
+                        x="291.40000000000003"
+                        y="0"
                         width="85.84"
                         height="23"
+                        transform="matrix(1,0,0,1,291.399994,0)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -620,16 +565,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(112,210,160,1)"
@@ -641,10 +583,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -668,7 +610,6 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -684,34 +625,32 @@
                   <g
                     id="g-svg-83"
                     fill="none"
-                    transform="matrix(0,-1,1,0,9.020000,-17)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(0,-1,1,0,9.020000,-17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-84"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                         fill-opacity="0.5"
-                        visibility="visible"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-85"
                     fill="none"
-                    transform="matrix(0,1,-1,0,9.020000,17)"
                     class="navigator-next-btn-group"
+                    transform="matrix(0,1,-1,0,9.020000,17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-86"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                         fill-opacity="0.5"
-                        visibility="visible"
                       />
                     </g>
                   </g>
@@ -721,7 +660,7 @@
                     transform="matrix(1,0,0,1,9.020000,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-88"
                         fill="rgba(0,0,0,1)"
@@ -731,14 +670,13 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout4.svg b/__tests__/integration/snapshots/CategoryLayout4.svg
index 06397ce38..14075197e 100644
--- a/__tests__/integration/snapshots/CategoryLayout4.svg
+++ b/__tests__/integration/snapshots/CategoryLayout4.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="455"
-  height="50"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-214" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-89" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-90"
-          fill="none"
-          width="455"
-          height="50"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-89" fill="none">
+        <g id="g-svg-90" fill="none" width="455" height="50">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="455"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="455"
               height="23"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-214-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-170"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-170" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,66.666664,0)"
                         class="items-item"
+                        x="66.66666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,66.666664,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,133.333328,0)"
                         class="items-item"
+                        x="133.33333333333334"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,133.333328,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,25 +291,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -358,16 +324,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -377,10 +340,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -404,25 +367,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,266.666656,0)"
                         class="items-item"
+                        x="266.6666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,266.666656,0)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -437,16 +400,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -456,10 +416,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -483,25 +443,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,333.333344,0)"
                         class="items-item"
+                        x="333.33333333333337"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,333.333344,0)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -516,16 +476,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -535,10 +492,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -562,32 +519,26 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-183"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-183" fill="none" class="items-item-page">
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -602,16 +553,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -621,10 +569,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -648,25 +596,25 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-66"
                         fill="none"
-                        transform="matrix(1,0,0,1,66.666664,0)"
                         class="items-item"
+                        x="66.66666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,66.666664,0)"
                       >
                         <g
                           id="g-svg-72"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-73"
                               fill="none"
@@ -681,16 +629,13 @@
                         <g
                           id="g-svg-67"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-68"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -700,10 +645,10 @@
                         <g
                           id="g-svg-69"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-70"
                               fill="rgba(100,100,100,1)"
@@ -727,25 +672,25 @@
                         <g
                           id="g-svg-71"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-74"
                         fill="none"
-                        transform="matrix(1,0,0,1,133.333328,0)"
                         class="items-item"
+                        x="133.33333333333334"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,133.333328,0)"
                       >
                         <g
                           id="g-svg-80"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-81"
                               fill="none"
@@ -760,16 +705,13 @@
                         <g
                           id="g-svg-75"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-76"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -779,10 +721,10 @@
                         <g
                           id="g-svg-77"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-78"
                               fill="rgba(100,100,100,1)"
@@ -806,25 +748,25 @@
                         <g
                           id="g-svg-79"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-82"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-88"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-89"
                               fill="none"
@@ -839,16 +781,13 @@
                         <g
                           id="g-svg-83"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-84"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -858,10 +797,10 @@
                         <g
                           id="g-svg-85"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-86"
                               fill="rgba(100,100,100,1)"
@@ -885,25 +824,25 @@
                         <g
                           id="g-svg-87"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-90"
                         fill="none"
-                        transform="matrix(1,0,0,1,266.666656,0)"
                         class="items-item"
+                        x="266.6666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,266.666656,0)"
                       >
                         <g
                           id="g-svg-96"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-97"
                               fill="none"
@@ -918,16 +857,13 @@
                         <g
                           id="g-svg-91"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-92"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -937,10 +873,10 @@
                         <g
                           id="g-svg-93"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-94"
                               fill="rgba(100,100,100,1)"
@@ -964,25 +900,25 @@
                         <g
                           id="g-svg-95"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-98"
                         fill="none"
-                        transform="matrix(1,0,0,1,333.333344,0)"
                         class="items-item"
+                        x="333.33333333333337"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,333.333344,0)"
                       >
                         <g
                           id="g-svg-104"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-105"
                               fill="none"
@@ -997,16 +933,13 @@
                         <g
                           id="g-svg-99"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-100"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1016,10 +949,10 @@
                         <g
                           id="g-svg-101"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-102"
                               fill="rgba(100,100,100,1)"
@@ -1043,32 +976,26 @@
                         <g
                           id="g-svg-103"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-196"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-196" fill="none" class="items-item-page">
                       <g
                         id="g-svg-106"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
                       >
                         <g
                           id="g-svg-112"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-113"
                               fill="none"
@@ -1083,16 +1010,13 @@
                         <g
                           id="g-svg-107"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-108"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1102,10 +1026,10 @@
                         <g
                           id="g-svg-109"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-110"
                               fill="rgba(100,100,100,1)"
@@ -1129,25 +1053,25 @@
                         <g
                           id="g-svg-111"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-114"
                         fill="none"
-                        transform="matrix(1,0,0,1,66.666664,0)"
                         class="items-item"
+                        x="66.66666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,66.666664,0)"
                       >
                         <g
                           id="g-svg-120"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-121"
                               fill="none"
@@ -1162,16 +1086,13 @@
                         <g
                           id="g-svg-115"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-116"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1181,10 +1102,10 @@
                         <g
                           id="g-svg-117"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-118"
                               fill="rgba(100,100,100,1)"
@@ -1208,25 +1129,25 @@
                         <g
                           id="g-svg-119"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-122"
                         fill="none"
-                        transform="matrix(1,0,0,1,133.333328,0)"
                         class="items-item"
+                        x="133.33333333333334"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,133.333328,0)"
                       >
                         <g
                           id="g-svg-128"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-129"
                               fill="none"
@@ -1241,16 +1162,13 @@
                         <g
                           id="g-svg-123"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-124"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1260,10 +1178,10 @@
                         <g
                           id="g-svg-125"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-126"
                               fill="rgba(100,100,100,1)"
@@ -1287,25 +1205,25 @@
                         <g
                           id="g-svg-127"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-130"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-136"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-137"
                               fill="none"
@@ -1320,16 +1238,13 @@
                         <g
                           id="g-svg-131"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-132"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1339,10 +1254,10 @@
                         <g
                           id="g-svg-133"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-134"
                               fill="rgba(100,100,100,1)"
@@ -1366,25 +1281,25 @@
                         <g
                           id="g-svg-135"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-138"
                         fill="none"
-                        transform="matrix(1,0,0,1,266.666656,0)"
                         class="items-item"
+                        x="266.6666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,266.666656,0)"
                       >
                         <g
                           id="g-svg-144"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-145"
                               fill="none"
@@ -1399,16 +1314,13 @@
                         <g
                           id="g-svg-139"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-140"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1418,10 +1330,10 @@
                         <g
                           id="g-svg-141"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-142"
                               fill="rgba(100,100,100,1)"
@@ -1445,25 +1357,25 @@
                         <g
                           id="g-svg-143"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-146"
                         fill="none"
-                        transform="matrix(1,0,0,1,333.333344,0)"
                         class="items-item"
+                        x="333.33333333333337"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,333.333344,0)"
                       >
                         <g
                           id="g-svg-152"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-153"
                               fill="none"
@@ -1478,16 +1390,13 @@
                         <g
                           id="g-svg-147"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-148"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1497,10 +1406,10 @@
                         <g
                           id="g-svg-149"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-150"
                               fill="rgba(100,100,100,1)"
@@ -1524,32 +1433,26 @@
                         <g
                           id="g-svg-151"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-209"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-209" fill="none" class="items-item-page">
                       <g
                         id="g-svg-154"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
                       >
                         <g
                           id="g-svg-160"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-161"
                               fill="none"
@@ -1564,16 +1467,13 @@
                         <g
                           id="g-svg-155"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-156"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1583,10 +1483,10 @@
                         <g
                           id="g-svg-157"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-158"
                               fill="rgba(100,100,100,1)"
@@ -1610,25 +1510,25 @@
                         <g
                           id="g-svg-159"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-162"
                         fill="none"
-                        transform="matrix(1,0,0,1,66.666664,0)"
                         class="items-item"
+                        x="66.66666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,66.666664,0)"
                       >
                         <g
                           id="g-svg-168"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-169"
                               fill="none"
@@ -1643,16 +1543,13 @@
                         <g
                           id="g-svg-163"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-164"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1662,10 +1559,10 @@
                         <g
                           id="g-svg-165"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-166"
                               fill="rgba(100,100,100,1)"
@@ -1689,7 +1586,6 @@
                         <g
                           id="g-svg-167"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -1705,32 +1601,30 @@
                   <g
                     id="g-svg-215"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-216"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-217"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.520000,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.520000,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-218"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -1740,7 +1634,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-220"
                         fill="rgba(0,0,0,1)"
@@ -1750,14 +1644,13 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/4
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-214"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout5.svg b/__tests__/integration/snapshots/CategoryLayout5.svg
index 00eee5193..48642942c 100644
--- a/__tests__/integration/snapshots/CategoryLayout5.svg
+++ b/__tests__/integration/snapshots/CategoryLayout5.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="455"
-  height="50"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-71" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-221" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-222"
-          fill="none"
-          width="455"
-          height="50"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-221" fill="none">
+        <g id="g-svg-222" fill="none" width="455" height="50">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="455"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="455"
               height="23"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-71-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-58"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-58" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="75.83333333333333"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,75.833336,0)"
                         class="items-item"
+                        x="75.83333333333333"
+                        y="0"
                         width="75.83333333333333"
                         height="23"
+                        transform="matrix(1,0,0,1,75.833336,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.666672,0)"
                         class="items-item"
+                        x="151.66666666666666"
+                        y="0"
                         width="75.83333333333333"
                         height="23"
+                        transform="matrix(1,0,0,1,151.666672,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,25 +291,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,227.500000,0)"
                         class="items-item"
+                        x="227.5"
+                        y="0"
                         width="75.83333333333333"
                         height="23"
+                        transform="matrix(1,0,0,1,227.500000,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -358,16 +324,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -377,10 +340,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -404,25 +367,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,303.333344,0)"
                         class="items-item"
+                        x="303.3333333333333"
+                        y="0"
                         width="75.83333333333333"
                         height="23"
+                        transform="matrix(1,0,0,1,303.333344,0)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -437,16 +400,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -456,10 +416,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -483,25 +443,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,379.166656,0)"
                         class="items-item"
+                        x="379.16666666666663"
+                        y="0"
                         width="75.83333333333333"
                         height="23"
+                        transform="matrix(1,0,0,1,379.166656,0)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -516,16 +476,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -535,10 +492,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -562,20 +519,14 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-9"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-9" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-71"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout6.svg b/__tests__/integration/snapshots/CategoryLayout6.svg
index 63bd1a786..04403c8a6 100644
--- a/__tests__/integration/snapshots/CategoryLayout6.svg
+++ b/__tests__/integration/snapshots/CategoryLayout6.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="455"
-  height="50"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,19 @@
       <use href="#g-svg-212" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-72" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-73"
-          fill="none"
-          width="455"
-          height="50"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-72" fill="none">
+        <g id="g-svg-73" fill="none" width="455" height="50">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="455"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +54,34 @@
               fill="none"
               width="455"
               height="23"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-212-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-170"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-170" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -121,16 +96,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +112,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,25 +139,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,66.666664,0)"
                         class="items-item"
+                        x="66.66666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,66.666664,0)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -200,16 +172,13 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-20"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -219,10 +188,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -246,25 +215,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,133.333328,0)"
                         class="items-item"
+                        x="133.33333333333334"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,133.333328,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -279,16 +248,13 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-28"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -298,10 +264,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -325,25 +291,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -358,16 +324,13 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-36"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -377,10 +340,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -404,25 +367,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,266.666656,0)"
                         class="items-item"
+                        x="266.6666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,266.666656,0)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -437,16 +400,13 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-44"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -456,10 +416,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -483,25 +443,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,333.333344,0)"
                         class="items-item"
+                        x="333.33333333333337"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,333.333344,0)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -516,16 +476,13 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-52"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -535,10 +492,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -562,25 +519,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -595,16 +552,13 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-60"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -614,10 +568,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -641,25 +595,25 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-66"
                         fill="none"
-                        transform="matrix(1,0,0,1,66.666664,23)"
                         class="items-item"
+                        x="66.66666666666667"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,66.666664,23)"
                       >
                         <g
                           id="g-svg-72"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-73"
                               fill="none"
@@ -674,16 +628,13 @@
                         <g
                           id="g-svg-67"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-68"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -693,10 +644,10 @@
                         <g
                           id="g-svg-69"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-70"
                               fill="rgba(100,100,100,1)"
@@ -720,25 +671,25 @@
                         <g
                           id="g-svg-71"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-74"
                         fill="none"
-                        transform="matrix(1,0,0,1,133.333328,23)"
                         class="items-item"
+                        x="133.33333333333334"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,133.333328,23)"
                       >
                         <g
                           id="g-svg-80"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-81"
                               fill="none"
@@ -753,16 +704,13 @@
                         <g
                           id="g-svg-75"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-76"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -772,10 +720,10 @@
                         <g
                           id="g-svg-77"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-78"
                               fill="rgba(100,100,100,1)"
@@ -799,25 +747,25 @@
                         <g
                           id="g-svg-79"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-82"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,23)"
                         class="items-item"
+                        x="200"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,200,23)"
                       >
                         <g
                           id="g-svg-88"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-89"
                               fill="none"
@@ -832,16 +780,13 @@
                         <g
                           id="g-svg-83"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-84"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -851,10 +796,10 @@
                         <g
                           id="g-svg-85"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-86"
                               fill="rgba(100,100,100,1)"
@@ -878,25 +823,25 @@
                         <g
                           id="g-svg-87"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-90"
                         fill="none"
-                        transform="matrix(1,0,0,1,266.666656,23)"
                         class="items-item"
+                        x="266.6666666666667"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,266.666656,23)"
                       >
                         <g
                           id="g-svg-96"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-97"
                               fill="none"
@@ -911,16 +856,13 @@
                         <g
                           id="g-svg-91"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-92"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -930,10 +872,10 @@
                         <g
                           id="g-svg-93"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-94"
                               fill="rgba(100,100,100,1)"
@@ -957,25 +899,25 @@
                         <g
                           id="g-svg-95"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-98"
                         fill="none"
-                        transform="matrix(1,0,0,1,333.333344,23)"
                         class="items-item"
+                        x="333.33333333333337"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,333.333344,23)"
                       >
                         <g
                           id="g-svg-104"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-105"
                               fill="none"
@@ -990,16 +932,13 @@
                         <g
                           id="g-svg-99"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-100"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -1009,10 +948,10 @@
                         <g
                           id="g-svg-101"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-102"
                               fill="rgba(100,100,100,1)"
@@ -1036,32 +975,26 @@
                         <g
                           id="g-svg-103"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-195"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-195" fill="none" class="items-item-page">
                       <g
                         id="g-svg-106"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
                       >
                         <g
                           id="g-svg-112"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-113"
                               fill="none"
@@ -1076,16 +1009,13 @@
                         <g
                           id="g-svg-107"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-108"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1095,10 +1025,10 @@
                         <g
                           id="g-svg-109"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-110"
                               fill="rgba(100,100,100,1)"
@@ -1122,25 +1052,25 @@
                         <g
                           id="g-svg-111"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-114"
                         fill="none"
-                        transform="matrix(1,0,0,1,66.666664,0)"
                         class="items-item"
+                        x="66.66666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,66.666664,0)"
                       >
                         <g
                           id="g-svg-120"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-121"
                               fill="none"
@@ -1155,16 +1085,13 @@
                         <g
                           id="g-svg-115"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-116"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1174,10 +1101,10 @@
                         <g
                           id="g-svg-117"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-118"
                               fill="rgba(100,100,100,1)"
@@ -1201,25 +1128,25 @@
                         <g
                           id="g-svg-119"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-122"
                         fill="none"
-                        transform="matrix(1,0,0,1,133.333328,0)"
                         class="items-item"
+                        x="133.33333333333334"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,133.333328,0)"
                       >
                         <g
                           id="g-svg-128"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-129"
                               fill="none"
@@ -1234,16 +1161,13 @@
                         <g
                           id="g-svg-123"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-124"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1253,10 +1177,10 @@
                         <g
                           id="g-svg-125"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-126"
                               fill="rgba(100,100,100,1)"
@@ -1280,25 +1204,25 @@
                         <g
                           id="g-svg-127"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-130"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-136"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-137"
                               fill="none"
@@ -1313,16 +1237,13 @@
                         <g
                           id="g-svg-131"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-132"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1332,10 +1253,10 @@
                         <g
                           id="g-svg-133"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-134"
                               fill="rgba(100,100,100,1)"
@@ -1359,25 +1280,25 @@
                         <g
                           id="g-svg-135"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-138"
                         fill="none"
-                        transform="matrix(1,0,0,1,266.666656,0)"
                         class="items-item"
+                        x="266.6666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,266.666656,0)"
                       >
                         <g
                           id="g-svg-144"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-145"
                               fill="none"
@@ -1392,16 +1313,13 @@
                         <g
                           id="g-svg-139"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-140"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1411,10 +1329,10 @@
                         <g
                           id="g-svg-141"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-142"
                               fill="rgba(100,100,100,1)"
@@ -1438,25 +1356,25 @@
                         <g
                           id="g-svg-143"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-146"
                         fill="none"
-                        transform="matrix(1,0,0,1,333.333344,0)"
                         class="items-item"
+                        x="333.33333333333337"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,333.333344,0)"
                       >
                         <g
                           id="g-svg-152"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-153"
                               fill="none"
@@ -1471,16 +1389,13 @@
                         <g
                           id="g-svg-147"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-148"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1490,10 +1405,10 @@
                         <g
                           id="g-svg-149"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-150"
                               fill="rgba(100,100,100,1)"
@@ -1517,25 +1432,25 @@
                         <g
                           id="g-svg-151"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-154"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-160"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-161"
                               fill="none"
@@ -1550,16 +1465,13 @@
                         <g
                           id="g-svg-155"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-156"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1569,10 +1481,10 @@
                         <g
                           id="g-svg-157"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-158"
                               fill="rgba(100,100,100,1)"
@@ -1596,25 +1508,25 @@
                         <g
                           id="g-svg-159"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-162"
                         fill="none"
-                        transform="matrix(1,0,0,1,66.666664,23)"
                         class="items-item"
+                        x="66.66666666666667"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,66.666664,23)"
                       >
                         <g
                           id="g-svg-168"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-169"
                               fill="none"
@@ -1629,16 +1541,13 @@
                         <g
                           id="g-svg-163"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-164"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1648,10 +1557,10 @@
                         <g
                           id="g-svg-165"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-166"
                               fill="rgba(100,100,100,1)"
@@ -1675,7 +1584,6 @@
                         <g
                           id="g-svg-167"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -1691,32 +1599,30 @@
                   <g
                     id="g-svg-213"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-214"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-215"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.040001,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.040001,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-216"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -1726,7 +1632,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-218"
                         fill="rgba(0,0,0,1)"
@@ -1736,14 +1642,13 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-212"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout7.svg b/__tests__/integration/snapshots/CategoryLayout7.svg
index 4ac7e58b6..b697b058f 100644
--- a/__tests__/integration/snapshots/CategoryLayout7.svg
+++ b/__tests__/integration/snapshots/CategoryLayout7.svg
@@ -10,37 +10,19 @@
       <use href="#g-svg-212" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-219"
-        fill="none"
-        width="455"
-        height="70"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-220"
-          fill="none"
-          width="455"
-          height="50"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-219" fill="none" width="455" height="70">
+        <g id="g-svg-220" fill="none" width="455" height="50">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="455"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -52,6 +34,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -70,49 +54,34 @@
               fill="none"
               width="455"
               height="23"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-212-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-170"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-170" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
                       >
                         <g
                           id="g-svg-16"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-17"
                               fill="none"
@@ -127,14 +96,14 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-12"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(87,129,240,1)"
                               stroke-width="3"
@@ -145,10 +114,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -172,25 +141,25 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-18"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-25"
                               fill="none"
@@ -205,14 +174,14 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-20"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(112,210,160,1)"
                               stroke-width="3"
@@ -223,10 +192,10 @@
                         <g
                           id="g-svg-21"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-22"
                               fill="rgba(100,100,100,1)"
@@ -250,25 +219,25 @@
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-26"
                         fill="none"
-                        transform="matrix(1,0,0,1,66.666664,0)"
                         class="items-item"
+                        x="66.66666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,66.666664,0)"
                       >
                         <g
                           id="g-svg-32"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-33"
                               fill="none"
@@ -283,14 +252,14 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-28"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(85,100,132,1)"
                               stroke-width="3"
@@ -301,10 +270,10 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-30"
                               fill="rgba(100,100,100,1)"
@@ -328,25 +297,25 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-34"
                         fill="none"
-                        transform="matrix(1,0,0,1,66.666664,23)"
                         class="items-item"
+                        x="66.66666666666667"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,66.666664,23)"
                       >
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-41"
                               fill="none"
@@ -361,14 +330,14 @@
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-36"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(239,183,69,1)"
                               stroke-width="3"
@@ -379,10 +348,10 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-38"
                               fill="rgba(100,100,100,1)"
@@ -406,25 +375,25 @@
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-42"
                         fill="none"
-                        transform="matrix(1,0,0,1,133.333328,0)"
                         class="items-item"
+                        x="133.33333333333334"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,133.333328,0)"
                       >
                         <g
                           id="g-svg-48"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-49"
                               fill="none"
@@ -439,14 +408,14 @@
                         <g
                           id="g-svg-43"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-44"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(95,79,238,1)"
                               stroke-width="3"
@@ -457,10 +426,10 @@
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-46"
                               fill="rgba(100,100,100,1)"
@@ -484,25 +453,25 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-50"
                         fill="none"
-                        transform="matrix(1,0,0,1,133.333328,23)"
                         class="items-item"
+                        x="133.33333333333334"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,133.333328,23)"
                       >
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-57"
                               fill="none"
@@ -517,14 +486,14 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-52"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(87,129,240,1)"
                               stroke-width="3"
@@ -535,10 +504,10 @@
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-54"
                               fill="rgba(100,100,100,1)"
@@ -562,25 +531,25 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-58"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-65"
                               fill="none"
@@ -595,14 +564,14 @@
                         <g
                           id="g-svg-59"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-60"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(112,210,160,1)"
                               stroke-width="3"
@@ -613,10 +582,10 @@
                         <g
                           id="g-svg-61"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-62"
                               fill="rgba(100,100,100,1)"
@@ -640,25 +609,25 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-66"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,23)"
                         class="items-item"
+                        x="200"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,200,23)"
                       >
                         <g
                           id="g-svg-72"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-73"
                               fill="none"
@@ -673,14 +642,14 @@
                         <g
                           id="g-svg-67"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-68"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(85,100,132,1)"
                               stroke-width="3"
@@ -691,10 +660,10 @@
                         <g
                           id="g-svg-69"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-70"
                               fill="rgba(100,100,100,1)"
@@ -718,25 +687,25 @@
                         <g
                           id="g-svg-71"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-74"
                         fill="none"
-                        transform="matrix(1,0,0,1,266.666656,0)"
                         class="items-item"
+                        x="266.6666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,266.666656,0)"
                       >
                         <g
                           id="g-svg-80"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-81"
                               fill="none"
@@ -751,14 +720,14 @@
                         <g
                           id="g-svg-75"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-76"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(239,183,69,1)"
                               stroke-width="3"
@@ -769,10 +738,10 @@
                         <g
                           id="g-svg-77"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-78"
                               fill="rgba(100,100,100,1)"
@@ -796,25 +765,25 @@
                         <g
                           id="g-svg-79"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-82"
                         fill="none"
-                        transform="matrix(1,0,0,1,266.666656,23)"
                         class="items-item"
+                        x="266.6666666666667"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,266.666656,23)"
                       >
                         <g
                           id="g-svg-88"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-89"
                               fill="none"
@@ -829,14 +798,14 @@
                         <g
                           id="g-svg-83"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-84"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(95,79,238,1)"
                               stroke-width="3"
@@ -847,10 +816,10 @@
                         <g
                           id="g-svg-85"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-86"
                               fill="rgba(100,100,100,1)"
@@ -874,25 +843,25 @@
                         <g
                           id="g-svg-87"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-90"
                         fill="none"
-                        transform="matrix(1,0,0,1,333.333344,0)"
                         class="items-item"
+                        x="333.33333333333337"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,333.333344,0)"
                       >
                         <g
                           id="g-svg-96"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-97"
                               fill="none"
@@ -907,14 +876,14 @@
                         <g
                           id="g-svg-91"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-92"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(87,129,240,1)"
                               stroke-width="3"
@@ -925,10 +894,10 @@
                         <g
                           id="g-svg-93"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-94"
                               fill="rgba(100,100,100,1)"
@@ -952,25 +921,25 @@
                         <g
                           id="g-svg-95"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-98"
                         fill="none"
-                        transform="matrix(1,0,0,1,333.333344,23)"
                         class="items-item"
+                        x="333.33333333333337"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,333.333344,23)"
                       >
                         <g
                           id="g-svg-104"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-105"
                               fill="none"
@@ -985,14 +954,14 @@
                         <g
                           id="g-svg-99"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-100"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(112,210,160,1)"
                               stroke-width="3"
@@ -1003,10 +972,10 @@
                         <g
                           id="g-svg-101"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-102"
                               fill="rgba(100,100,100,1)"
@@ -1030,32 +999,26 @@
                         <g
                           id="g-svg-103"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-195"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-195" fill="none" class="items-item-page">
                       <g
                         id="g-svg-106"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
                       >
                         <g
                           id="g-svg-112"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-113"
                               fill="none"
@@ -1070,14 +1033,14 @@
                         <g
                           id="g-svg-107"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-108"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(85,100,132,1)"
                               stroke-width="3"
@@ -1088,10 +1051,10 @@
                         <g
                           id="g-svg-109"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-110"
                               fill="rgba(100,100,100,1)"
@@ -1115,25 +1078,25 @@
                         <g
                           id="g-svg-111"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-114"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-120"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-121"
                               fill="none"
@@ -1148,14 +1111,14 @@
                         <g
                           id="g-svg-115"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-116"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(239,183,69,1)"
                               stroke-width="3"
@@ -1166,10 +1129,10 @@
                         <g
                           id="g-svg-117"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-118"
                               fill="rgba(100,100,100,1)"
@@ -1193,25 +1156,25 @@
                         <g
                           id="g-svg-119"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-122"
                         fill="none"
-                        transform="matrix(1,0,0,1,66.666664,0)"
                         class="items-item"
+                        x="66.66666666666667"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,66.666664,0)"
                       >
                         <g
                           id="g-svg-128"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-129"
                               fill="none"
@@ -1226,14 +1189,14 @@
                         <g
                           id="g-svg-123"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-124"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(95,79,238,1)"
                               stroke-width="3"
@@ -1244,10 +1207,10 @@
                         <g
                           id="g-svg-125"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-126"
                               fill="rgba(100,100,100,1)"
@@ -1271,25 +1234,25 @@
                         <g
                           id="g-svg-127"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-130"
                         fill="none"
-                        transform="matrix(1,0,0,1,66.666664,23)"
                         class="items-item"
+                        x="66.66666666666667"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,66.666664,23)"
                       >
                         <g
                           id="g-svg-136"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-137"
                               fill="none"
@@ -1304,14 +1267,14 @@
                         <g
                           id="g-svg-131"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-132"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(87,129,240,1)"
                               stroke-width="3"
@@ -1322,10 +1285,10 @@
                         <g
                           id="g-svg-133"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-134"
                               fill="rgba(100,100,100,1)"
@@ -1349,25 +1312,25 @@
                         <g
                           id="g-svg-135"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-138"
                         fill="none"
-                        transform="matrix(1,0,0,1,133.333328,0)"
                         class="items-item"
+                        x="133.33333333333334"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,133.333328,0)"
                       >
                         <g
                           id="g-svg-144"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-145"
                               fill="none"
@@ -1382,14 +1345,14 @@
                         <g
                           id="g-svg-139"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-140"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(112,210,160,1)"
                               stroke-width="3"
@@ -1400,10 +1363,10 @@
                         <g
                           id="g-svg-141"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-142"
                               fill="rgba(100,100,100,1)"
@@ -1427,25 +1390,25 @@
                         <g
                           id="g-svg-143"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-146"
                         fill="none"
-                        transform="matrix(1,0,0,1,133.333328,23)"
                         class="items-item"
+                        x="133.33333333333334"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,133.333328,23)"
                       >
                         <g
                           id="g-svg-152"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-153"
                               fill="none"
@@ -1460,14 +1423,14 @@
                         <g
                           id="g-svg-147"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-148"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(85,100,132,1)"
                               stroke-width="3"
@@ -1478,10 +1441,10 @@
                         <g
                           id="g-svg-149"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-150"
                               fill="rgba(100,100,100,1)"
@@ -1505,25 +1468,25 @@
                         <g
                           id="g-svg-151"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-154"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-160"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-161"
                               fill="none"
@@ -1538,14 +1501,14 @@
                         <g
                           id="g-svg-155"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-156"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(239,183,69,1)"
                               stroke-width="3"
@@ -1556,10 +1519,10 @@
                         <g
                           id="g-svg-157"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-158"
                               fill="rgba(100,100,100,1)"
@@ -1583,25 +1546,25 @@
                         <g
                           id="g-svg-159"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-162"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,23)"
                         class="items-item"
+                        x="200"
+                        y="23"
                         width="66.66666666666667"
                         height="23"
+                        transform="matrix(1,0,0,1,200,23)"
                       >
                         <g
                           id="g-svg-168"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-169"
                               fill="none"
@@ -1616,14 +1579,14 @@
                         <g
                           id="g-svg-163"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,-6,-3)">
+                          <g>
                             <path
                               id="g-svg-164"
                               fill="rgba(0,0,0,0)"
-                              d="M 0,3 A 3 3 0 1 1 6 3 A 3 3 0 1 0 12 3"
+                              d="M -6,0 A 3 3 0 1 1 0 0 A 3 3 0 1 0 6 0"
                               class="legend-category-item-marker"
                               stroke="rgba(95,79,238,1)"
                               stroke-width="3"
@@ -1634,10 +1597,10 @@
                         <g
                           id="g-svg-165"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-166"
                               fill="rgba(100,100,100,1)"
@@ -1661,7 +1624,6 @@
                         <g
                           id="g-svg-167"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -1677,32 +1639,30 @@
                   <g
                     id="g-svg-213"
                     fill="none"
-                    transform="matrix(0,-1,1,0,9.020000,-17)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(0,-1,1,0,9.020000,-17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-214"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-215"
                     fill="none"
-                    transform="matrix(0,1,-1,0,9.020000,17)"
                     class="navigator-next-btn-group"
+                    transform="matrix(0,1,-1,0,9.020000,17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-216"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -1712,7 +1672,7 @@
                     transform="matrix(1,0,0,1,9.020000,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-218"
                         fill="rgba(0,0,0,1)"
@@ -1722,14 +1682,13 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
-                        visibility="visible"
                       >
                         1/2
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-212"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout8.svg b/__tests__/integration/snapshots/CategoryLayout8.svg
index 60931e04e..efb006dd7 100644
--- a/__tests__/integration/snapshots/CategoryLayout8.svg
+++ b/__tests__/integration/snapshots/CategoryLayout8.svg
@@ -1,94 +1,62 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="120"
-  height="128"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-212-6">
-      <use href="#g-svg-212" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-212-6">
+      <use href="#g-svg-212" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-219" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-220"
-          fill="none"
-          width="120"
-          height="128"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-219" fill="none">
+        <g id="g-svg-220" fill="none" width="120" height="128">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="120"
               height="128"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="120"
               height="128"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-212-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-169"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-169" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="65"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +71,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(87,129,240,1)"
@@ -124,10 +89,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -151,25 +116,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -184,16 +149,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(112,210,160,1)"
@@ -205,10 +167,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -232,25 +194,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -265,16 +227,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(85,100,132,1)"
@@ -286,10 +245,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -313,25 +272,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,69)"
                         class="items-item"
+                        x="0"
+                        y="69"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,69)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -346,16 +305,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(239,183,69,1)"
@@ -367,10 +323,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -394,25 +350,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,92)"
                         class="items-item"
+                        x="0"
+                        y="92"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,92)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -427,16 +383,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(95,79,238,1)"
@@ -448,10 +401,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -475,25 +428,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,115)"
                         class="items-item"
+                        x="0"
+                        y="115"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,115)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -508,16 +461,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(87,129,240,1)"
@@ -529,10 +479,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -556,25 +506,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,138)"
                         class="items-item"
+                        x="0"
+                        y="138"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,138)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -589,16 +539,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(112,210,160,1)"
@@ -610,10 +557,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -637,25 +584,25 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-65"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,161)"
                         class="items-item"
+                        x="0"
+                        y="161"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,161)"
                       >
                         <g
                           id="g-svg-71"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-72"
                               fill="none"
@@ -670,16 +617,13 @@
                         <g
                           id="g-svg-66"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-67"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(85,100,132,1)"
@@ -691,10 +635,10 @@
                         <g
                           id="g-svg-68"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-69"
                               fill="rgba(100,100,100,1)"
@@ -718,32 +662,26 @@
                         <g
                           id="g-svg-70"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-186"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-186" fill="none" class="items-item-page">
                       <g
                         id="g-svg-73"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="65"
                         height="23"
                       >
                         <g
                           id="g-svg-79"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-80"
                               fill="none"
@@ -758,16 +696,13 @@
                         <g
                           id="g-svg-74"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-75"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(239,183,69,1)"
@@ -779,10 +714,10 @@
                         <g
                           id="g-svg-76"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-77"
                               fill="rgba(100,100,100,1)"
@@ -806,25 +741,25 @@
                         <g
                           id="g-svg-78"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-81"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-87"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-88"
                               fill="none"
@@ -839,16 +774,13 @@
                         <g
                           id="g-svg-82"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-83"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(95,79,238,1)"
@@ -860,10 +792,10 @@
                         <g
                           id="g-svg-84"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-85"
                               fill="rgba(100,100,100,1)"
@@ -887,25 +819,25 @@
                         <g
                           id="g-svg-86"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-89"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-95"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-96"
                               fill="none"
@@ -920,16 +852,13 @@
                         <g
                           id="g-svg-90"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-91"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(87,129,240,1)"
@@ -941,10 +870,10 @@
                         <g
                           id="g-svg-92"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-93"
                               fill="rgba(100,100,100,1)"
@@ -968,25 +897,25 @@
                         <g
                           id="g-svg-94"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-97"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,69)"
                         class="items-item"
+                        x="0"
+                        y="69"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,69)"
                       >
                         <g
                           id="g-svg-103"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-104"
                               fill="none"
@@ -1001,16 +930,13 @@
                         <g
                           id="g-svg-98"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-99"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(112,210,160,1)"
@@ -1022,10 +948,10 @@
                         <g
                           id="g-svg-100"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-101"
                               fill="rgba(100,100,100,1)"
@@ -1049,25 +975,25 @@
                         <g
                           id="g-svg-102"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-105"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,92)"
                         class="items-item"
+                        x="0"
+                        y="92"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,92)"
                       >
                         <g
                           id="g-svg-111"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-112"
                               fill="none"
@@ -1082,16 +1008,13 @@
                         <g
                           id="g-svg-106"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-107"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(85,100,132,1)"
@@ -1103,10 +1026,10 @@
                         <g
                           id="g-svg-108"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-109"
                               fill="rgba(100,100,100,1)"
@@ -1130,25 +1053,25 @@
                         <g
                           id="g-svg-110"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-113"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,115)"
                         class="items-item"
+                        x="0"
+                        y="115"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,115)"
                       >
                         <g
                           id="g-svg-119"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-120"
                               fill="none"
@@ -1163,16 +1086,13 @@
                         <g
                           id="g-svg-114"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-115"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(239,183,69,1)"
@@ -1184,10 +1104,10 @@
                         <g
                           id="g-svg-116"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-117"
                               fill="rgba(100,100,100,1)"
@@ -1211,25 +1131,25 @@
                         <g
                           id="g-svg-118"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-121"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,138)"
                         class="items-item"
+                        x="0"
+                        y="138"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,138)"
                       >
                         <g
                           id="g-svg-127"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-128"
                               fill="none"
@@ -1244,16 +1164,13 @@
                         <g
                           id="g-svg-122"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-123"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(95,79,238,1)"
@@ -1265,10 +1182,10 @@
                         <g
                           id="g-svg-124"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-125"
                               fill="rgba(100,100,100,1)"
@@ -1292,25 +1209,25 @@
                         <g
                           id="g-svg-126"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-129"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,161)"
                         class="items-item"
+                        x="0"
+                        y="161"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,161)"
                       >
                         <g
                           id="g-svg-135"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-136"
                               fill="none"
@@ -1325,16 +1242,13 @@
                         <g
                           id="g-svg-130"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-131"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(87,129,240,1)"
@@ -1346,10 +1260,10 @@
                         <g
                           id="g-svg-132"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-133"
                               fill="rgba(100,100,100,1)"
@@ -1373,32 +1287,26 @@
                         <g
                           id="g-svg-134"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
-                    <g
-                      id="g-svg-203"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-203" fill="none" class="items-item-page">
                       <g
                         id="g-svg-137"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="65"
                         height="23"
                       >
                         <g
                           id="g-svg-143"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-144"
                               fill="none"
@@ -1413,16 +1321,13 @@
                         <g
                           id="g-svg-138"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-139"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(112,210,160,1)"
@@ -1434,10 +1339,10 @@
                         <g
                           id="g-svg-140"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-141"
                               fill="rgba(100,100,100,1)"
@@ -1461,25 +1366,25 @@
                         <g
                           id="g-svg-142"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-145"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,23)"
                         class="items-item"
+                        x="0"
+                        y="23"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,23)"
                       >
                         <g
                           id="g-svg-151"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-152"
                               fill="none"
@@ -1494,16 +1399,13 @@
                         <g
                           id="g-svg-146"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-147"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(85,100,132,1)"
@@ -1515,10 +1417,10 @@
                         <g
                           id="g-svg-148"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-149"
                               fill="rgba(100,100,100,1)"
@@ -1542,25 +1444,25 @@
                         <g
                           id="g-svg-150"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-153"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,46)"
                         class="items-item"
+                        x="0"
+                        y="46"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,46)"
                       >
                         <g
                           id="g-svg-159"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-160"
                               fill="none"
@@ -1575,16 +1477,13 @@
                         <g
                           id="g-svg-154"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-155"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(239,183,69,1)"
@@ -1596,10 +1495,10 @@
                         <g
                           id="g-svg-156"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-157"
                               fill="rgba(100,100,100,1)"
@@ -1623,25 +1522,25 @@
                         <g
                           id="g-svg-158"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-161"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,69)"
                         class="items-item"
+                        x="0"
+                        y="69"
                         width="65"
                         height="23"
+                        transform="matrix(1,0,0,1,0,69)"
                       >
                         <g
                           id="g-svg-167"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-168"
                               fill="none"
@@ -1656,16 +1555,13 @@
                         <g
                           id="g-svg-162"
                           fill="none"
-                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.538706,0,0,0.538706,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-163"
                               fill="rgba(0,0,0,0)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               stroke="rgba(95,79,238,1)"
@@ -1677,10 +1573,10 @@
                         <g
                           id="g-svg-164"
                           fill="none"
-                          transform="matrix(1,0,0,1,15,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,15,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-165"
                               fill="rgba(100,100,100,1)"
@@ -1704,7 +1600,6 @@
                         <g
                           id="g-svg-166"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
@@ -1720,32 +1615,30 @@
                   <g
                     id="g-svg-213"
                     fill="none"
-                    transform="matrix(0,-1,1,0,9.140000,-17)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(0,-1,1,0,9.140000,-17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-214"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-215"
                     fill="none"
-                    transform="matrix(0,1,-1,0,9.140000,17)"
                     class="navigator-next-btn-group"
+                    transform="matrix(0,1,-1,0,9.140000,17)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-216"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -1755,7 +1648,7 @@
                     transform="matrix(1,0,0,1,9.140000,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-218"
                         fill="rgba(0,0,0,1)"
@@ -1765,14 +1658,13 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
-                        visibility="visible"
                       >
                         1/3
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-212"
                     fill="none"
diff --git a/__tests__/integration/snapshots/CategoryLayout9.svg b/__tests__/integration/snapshots/CategoryLayout9.svg
index 0a8658a9e..604ae198e 100644
--- a/__tests__/integration/snapshots/CategoryLayout9.svg
+++ b/__tests__/integration/snapshots/CategoryLayout9.svg
@@ -1,94 +1,62 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="1000"
-  height="100"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-80-6">
-      <use href="#g-svg-80" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-80-6">
+      <use href="#g-svg-80" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-219" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-220"
-          fill="none"
-          width="1000"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-219" fill="none">
+        <g id="g-svg-220" fill="none" width="1000" height="100">
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="1000"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-items-group"
-          >
+          <g id="g-svg-3" fill="none" class="legend-items-group">
             <g
               id="g-svg-4"
               fill="none"
               width="1000"
               height="100"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-80-6)"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-65"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-7" fill="none" class="navigator-play-window">
+                    <g id="g-svg-65" fill="none" class="items-item-page">
                       <g
                         id="g-svg-9"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="78.56"
                         height="23"
                       >
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-16"
                               fill="none"
@@ -103,16 +71,13 @@
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-11"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -122,10 +87,10 @@
                         <g
                           id="g-svg-12"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-13"
                               fill="rgba(100,100,100,1)"
@@ -149,25 +114,25 @@
                         <g
                           id="g-svg-14"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-17"
                         fill="none"
-                        transform="matrix(1,0,0,1,78.559998,0)"
                         class="items-item"
+                        x="78.56"
+                        y="0"
                         width="73.03999999999999"
                         height="23"
+                        transform="matrix(1,0,0,1,78.559998,0)"
                       >
                         <g
                           id="g-svg-23"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-24"
                               fill="none"
@@ -182,16 +147,13 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-19"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -201,10 +163,10 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-21"
                               fill="rgba(100,100,100,1)"
@@ -228,25 +190,25 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-25"
                         fill="none"
-                        transform="matrix(1,0,0,1,151.600006,0)"
                         class="items-item"
+                        x="151.6"
+                        y="0"
                         width="64.16"
                         height="23"
+                        transform="matrix(1,0,0,1,151.600006,0)"
                       >
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-32"
                               fill="none"
@@ -261,16 +223,13 @@
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-27"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -280,10 +239,10 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-29"
                               fill="rgba(100,100,100,1)"
@@ -307,25 +266,25 @@
                         <g
                           id="g-svg-30"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-33"
                         fill="none"
-                        transform="matrix(1,0,0,1,215.759995,0)"
                         class="items-item"
+                        x="215.76"
+                        y="0"
                         width="189.32"
                         height="23"
+                        transform="matrix(1,0,0,1,215.759995,0)"
                       >
                         <g
                           id="g-svg-39"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-40"
                               fill="none"
@@ -340,16 +299,13 @@
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-35"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -359,10 +315,10 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-37"
                               fill="rgba(100,100,100,1)"
@@ -386,25 +342,25 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-41"
                         fill="none"
-                        transform="matrix(1,0,0,1,405.079987,0)"
                         class="items-item"
+                        x="405.08"
+                        y="0"
                         width="123.92000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,405.079987,0)"
                       >
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-48"
                               fill="none"
@@ -419,16 +375,13 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-43"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -438,10 +391,10 @@
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-45"
                               fill="rgba(100,100,100,1)"
@@ -465,25 +418,25 @@
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-49"
                         fill="none"
-                        transform="matrix(1,0,0,1,529,0)"
                         class="items-item"
+                        x="529"
+                        y="0"
                         width="137.48000000000002"
                         height="23"
+                        transform="matrix(1,0,0,1,529,0)"
                       >
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-56"
                               fill="none"
@@ -498,16 +451,13 @@
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-51"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -517,10 +467,10 @@
                         <g
                           id="g-svg-52"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-53"
                               fill="rgba(100,100,100,1)"
@@ -544,25 +494,25 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                       <g
                         id="g-svg-57"
                         fill="none"
-                        transform="matrix(1,0,0,1,666.479980,0)"
                         class="items-item"
+                        x="666.48"
+                        y="0"
                         width="80.84"
                         height="23"
+                        transform="matrix(1,0,0,1,666.479980,0)"
                       >
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-64"
                               fill="none"
@@ -577,16 +527,13 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-59"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -596,10 +543,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -623,26 +570,20 @@
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-value-group"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="navigator-controller"
-                />
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-8" fill="none" class="navigator-controller" />
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
-                    d="M 0,0 l 747.3199805084863,0 l 0,23 l-747.3199805084863 0 z"
+                    d="M 0,0 l 747.3199804687499,0 l 0,23 l-747.3199804687499 0 z"
                     class="navigator-clip-path"
-                    width="747.3199805084863"
+                    width="747.3199804687499"
                     height="23"
                   />
                 </g>
diff --git a/__tests__/integration/snapshots/CategoryPosition1.svg b/__tests__/integration/snapshots/CategoryPosition1.svg
index 7ead01c13..8e5958279 100644
--- a/__tests__/integration/snapshots/CategoryPosition1.svg
+++ b/__tests__/integration/snapshots/CategoryPosition1.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="455"
-  height="50"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,32 +10,20 @@
       <use href="#g-svg-235" transform="matrix(1,0,0,1,0,27)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-89" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-90" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-91"
-            fill="none"
-            width="455"
-            height="50"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-89" fill="none">
+        <g id="g-svg-90" fill="none">
+          <g id="g-svg-91" fill="none" width="455" height="50">
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="455"
                 height="50"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-3"
                     fill="rgba(44,53,66,1)"
@@ -47,6 +35,8 @@
                     font-weight="bold"
                     font-size="12"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     Legend Title
@@ -65,49 +55,34 @@
                 fill="none"
                 width="455"
                 height="23"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-7"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-235-7)"
                   >
-                    <g
-                      id="g-svg-8"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-190"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-8" fill="none" class="navigator-play-window">
+                      <g id="g-svg-190" fill="none" class="items-item-page">
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="100"
                           height="23"
                         >
                           <g
                             id="g-svg-17"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-18"
                                 fill="none"
@@ -122,16 +97,13 @@
                           <g
                             id="g-svg-11"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-12"
                                 fill="rgba(87,129,240,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -141,10 +113,10 @@
                           <g
                             id="g-svg-13"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-14"
                                 fill="rgba(100,100,100,1)"
@@ -168,10 +140,10 @@
                           <g
                             id="g-svg-15"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-16"
                                 fill="rgba(100,100,100,1)"
@@ -196,18 +168,19 @@
                         <g
                           id="g-svg-19"
                           fill="none"
-                          transform="matrix(1,0,0,1,100,0)"
                           class="items-item"
+                          x="100"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,100,0)"
                         >
                           <g
                             id="g-svg-26"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-27"
                                 fill="none"
@@ -222,16 +195,13 @@
                           <g
                             id="g-svg-20"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-21"
                                 fill="rgba(112,210,160,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -241,10 +211,10 @@
                           <g
                             id="g-svg-22"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-23"
                                 fill="rgba(100,100,100,1)"
@@ -268,10 +238,10 @@
                           <g
                             id="g-svg-24"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-25"
                                 fill="rgba(100,100,100,1)"
@@ -296,18 +266,19 @@
                         <g
                           id="g-svg-28"
                           fill="none"
-                          transform="matrix(1,0,0,1,200,0)"
                           class="items-item"
+                          x="200"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,200,0)"
                         >
                           <g
                             id="g-svg-35"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-36"
                                 fill="none"
@@ -322,16 +293,13 @@
                           <g
                             id="g-svg-29"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-30"
                                 fill="rgba(85,100,132,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -341,10 +309,10 @@
                           <g
                             id="g-svg-31"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-32"
                                 fill="rgba(100,100,100,1)"
@@ -368,10 +336,10 @@
                           <g
                             id="g-svg-33"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-34"
                                 fill="rgba(100,100,100,1)"
@@ -396,18 +364,19 @@
                         <g
                           id="g-svg-37"
                           fill="none"
-                          transform="matrix(1,0,0,1,300,0)"
                           class="items-item"
+                          x="300"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,300,0)"
                         >
                           <g
                             id="g-svg-44"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-45"
                                 fill="none"
@@ -422,16 +391,13 @@
                           <g
                             id="g-svg-38"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-39"
                                 fill="rgba(239,183,69,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -441,10 +407,10 @@
                           <g
                             id="g-svg-40"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-41"
                                 fill="rgba(100,100,100,1)"
@@ -468,10 +434,10 @@
                           <g
                             id="g-svg-42"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-43"
                                 fill="rgba(100,100,100,1)"
@@ -494,27 +460,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-199"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-199" fill="none" class="items-item-page">
                         <g
                           id="g-svg-46"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="100"
                           height="23"
                         >
                           <g
                             id="g-svg-53"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-54"
                                 fill="none"
@@ -529,16 +490,13 @@
                           <g
                             id="g-svg-47"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-48"
                                 fill="rgba(95,79,238,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -548,10 +506,10 @@
                           <g
                             id="g-svg-49"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-50"
                                 fill="rgba(100,100,100,1)"
@@ -575,10 +533,10 @@
                           <g
                             id="g-svg-51"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-52"
                                 fill="rgba(100,100,100,1)"
@@ -603,18 +561,19 @@
                         <g
                           id="g-svg-55"
                           fill="none"
-                          transform="matrix(1,0,0,1,100,0)"
                           class="items-item"
+                          x="100"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,100,0)"
                         >
                           <g
                             id="g-svg-62"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-63"
                                 fill="none"
@@ -629,16 +588,13 @@
                           <g
                             id="g-svg-56"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-57"
                                 fill="rgba(87,129,240,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -648,10 +604,10 @@
                           <g
                             id="g-svg-58"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-59"
                                 fill="rgba(100,100,100,1)"
@@ -675,10 +631,10 @@
                           <g
                             id="g-svg-60"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-61"
                                 fill="rgba(100,100,100,1)"
@@ -703,18 +659,19 @@
                         <g
                           id="g-svg-64"
                           fill="none"
-                          transform="matrix(1,0,0,1,200,0)"
                           class="items-item"
+                          x="200"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,200,0)"
                         >
                           <g
                             id="g-svg-71"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-72"
                                 fill="none"
@@ -729,16 +686,13 @@
                           <g
                             id="g-svg-65"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-66"
                                 fill="rgba(112,210,160,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -748,10 +702,10 @@
                           <g
                             id="g-svg-67"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-68"
                                 fill="rgba(100,100,100,1)"
@@ -775,10 +729,10 @@
                           <g
                             id="g-svg-69"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-70"
                                 fill="rgba(100,100,100,1)"
@@ -803,18 +757,19 @@
                         <g
                           id="g-svg-73"
                           fill="none"
-                          transform="matrix(1,0,0,1,300,0)"
                           class="items-item"
+                          x="300"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,300,0)"
                         >
                           <g
                             id="g-svg-80"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-81"
                                 fill="none"
@@ -829,16 +784,13 @@
                           <g
                             id="g-svg-74"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-75"
                                 fill="rgba(85,100,132,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -848,10 +800,10 @@
                           <g
                             id="g-svg-76"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-77"
                                 fill="rgba(100,100,100,1)"
@@ -875,10 +827,10 @@
                           <g
                             id="g-svg-78"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-79"
                                 fill="rgba(100,100,100,1)"
@@ -901,27 +853,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-208"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-208" fill="none" class="items-item-page">
                         <g
                           id="g-svg-82"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="100"
                           height="23"
                         >
                           <g
                             id="g-svg-89"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-90"
                                 fill="none"
@@ -936,16 +883,13 @@
                           <g
                             id="g-svg-83"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-84"
                                 fill="rgba(239,183,69,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -955,10 +899,10 @@
                           <g
                             id="g-svg-85"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-86"
                                 fill="rgba(100,100,100,1)"
@@ -982,10 +926,10 @@
                           <g
                             id="g-svg-87"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-88"
                                 fill="rgba(100,100,100,1)"
@@ -1010,18 +954,19 @@
                         <g
                           id="g-svg-91"
                           fill="none"
-                          transform="matrix(1,0,0,1,100,0)"
                           class="items-item"
+                          x="100"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,100,0)"
                         >
                           <g
                             id="g-svg-98"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-99"
                                 fill="none"
@@ -1036,16 +981,13 @@
                           <g
                             id="g-svg-92"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-93"
                                 fill="rgba(95,79,238,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1055,10 +997,10 @@
                           <g
                             id="g-svg-94"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-95"
                                 fill="rgba(100,100,100,1)"
@@ -1082,10 +1024,10 @@
                           <g
                             id="g-svg-96"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-97"
                                 fill="rgba(100,100,100,1)"
@@ -1110,18 +1052,19 @@
                         <g
                           id="g-svg-100"
                           fill="none"
-                          transform="matrix(1,0,0,1,200,0)"
                           class="items-item"
+                          x="200"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,200,0)"
                         >
                           <g
                             id="g-svg-107"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-108"
                                 fill="none"
@@ -1136,16 +1079,13 @@
                           <g
                             id="g-svg-101"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-102"
                                 fill="rgba(87,129,240,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1155,10 +1095,10 @@
                           <g
                             id="g-svg-103"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-104"
                                 fill="rgba(100,100,100,1)"
@@ -1182,10 +1122,10 @@
                           <g
                             id="g-svg-105"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-106"
                                 fill="rgba(100,100,100,1)"
@@ -1210,18 +1150,19 @@
                         <g
                           id="g-svg-109"
                           fill="none"
-                          transform="matrix(1,0,0,1,300,0)"
                           class="items-item"
+                          x="300"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,300,0)"
                         >
                           <g
                             id="g-svg-116"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-117"
                                 fill="none"
@@ -1236,16 +1177,13 @@
                           <g
                             id="g-svg-110"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-111"
                                 fill="rgba(112,210,160,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1255,10 +1193,10 @@
                           <g
                             id="g-svg-112"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-113"
                                 fill="rgba(100,100,100,1)"
@@ -1282,10 +1220,10 @@
                           <g
                             id="g-svg-114"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-115"
                                 fill="rgba(100,100,100,1)"
@@ -1308,27 +1246,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-217"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-217" fill="none" class="items-item-page">
                         <g
                           id="g-svg-118"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="100"
                           height="23"
                         >
                           <g
                             id="g-svg-125"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-126"
                                 fill="none"
@@ -1343,16 +1276,13 @@
                           <g
                             id="g-svg-119"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-120"
                                 fill="rgba(85,100,132,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1362,10 +1292,10 @@
                           <g
                             id="g-svg-121"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-122"
                                 fill="rgba(100,100,100,1)"
@@ -1389,10 +1319,10 @@
                           <g
                             id="g-svg-123"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-124"
                                 fill="rgba(100,100,100,1)"
@@ -1417,18 +1347,19 @@
                         <g
                           id="g-svg-127"
                           fill="none"
-                          transform="matrix(1,0,0,1,100,0)"
                           class="items-item"
+                          x="100"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,100,0)"
                         >
                           <g
                             id="g-svg-134"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-135"
                                 fill="none"
@@ -1443,16 +1374,13 @@
                           <g
                             id="g-svg-128"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-129"
                                 fill="rgba(239,183,69,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1462,10 +1390,10 @@
                           <g
                             id="g-svg-130"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-131"
                                 fill="rgba(100,100,100,1)"
@@ -1489,10 +1417,10 @@
                           <g
                             id="g-svg-132"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-133"
                                 fill="rgba(100,100,100,1)"
@@ -1517,18 +1445,19 @@
                         <g
                           id="g-svg-136"
                           fill="none"
-                          transform="matrix(1,0,0,1,200,0)"
                           class="items-item"
+                          x="200"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,200,0)"
                         >
                           <g
                             id="g-svg-143"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-144"
                                 fill="none"
@@ -1543,16 +1472,13 @@
                           <g
                             id="g-svg-137"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-138"
                                 fill="rgba(95,79,238,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1562,10 +1488,10 @@
                           <g
                             id="g-svg-139"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-140"
                                 fill="rgba(100,100,100,1)"
@@ -1589,10 +1515,10 @@
                           <g
                             id="g-svg-141"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-142"
                                 fill="rgba(100,100,100,1)"
@@ -1617,18 +1543,19 @@
                         <g
                           id="g-svg-145"
                           fill="none"
-                          transform="matrix(1,0,0,1,300,0)"
                           class="items-item"
+                          x="300"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,300,0)"
                         >
                           <g
                             id="g-svg-152"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-153"
                                 fill="none"
@@ -1643,16 +1570,13 @@
                           <g
                             id="g-svg-146"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-147"
                                 fill="rgba(87,129,240,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1662,10 +1586,10 @@
                           <g
                             id="g-svg-148"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-149"
                                 fill="rgba(100,100,100,1)"
@@ -1689,10 +1613,10 @@
                           <g
                             id="g-svg-150"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-151"
                                 fill="rgba(100,100,100,1)"
@@ -1715,27 +1639,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-226"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-226" fill="none" class="items-item-page">
                         <g
                           id="g-svg-154"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="100"
                           height="23"
                         >
                           <g
                             id="g-svg-161"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-162"
                                 fill="none"
@@ -1750,16 +1669,13 @@
                           <g
                             id="g-svg-155"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-156"
                                 fill="rgba(112,210,160,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1769,10 +1685,10 @@
                           <g
                             id="g-svg-157"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-158"
                                 fill="rgba(100,100,100,1)"
@@ -1796,10 +1712,10 @@
                           <g
                             id="g-svg-159"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-160"
                                 fill="rgba(100,100,100,1)"
@@ -1824,18 +1740,19 @@
                         <g
                           id="g-svg-163"
                           fill="none"
-                          transform="matrix(1,0,0,1,100,0)"
                           class="items-item"
+                          x="100"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,100,0)"
                         >
                           <g
                             id="g-svg-170"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-171"
                                 fill="none"
@@ -1850,16 +1767,13 @@
                           <g
                             id="g-svg-164"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-165"
                                 fill="rgba(85,100,132,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1869,10 +1783,10 @@
                           <g
                             id="g-svg-166"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-167"
                                 fill="rgba(100,100,100,1)"
@@ -1896,10 +1810,10 @@
                           <g
                             id="g-svg-168"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-169"
                                 fill="rgba(100,100,100,1)"
@@ -1924,18 +1838,19 @@
                         <g
                           id="g-svg-172"
                           fill="none"
-                          transform="matrix(1,0,0,1,200,0)"
                           class="items-item"
+                          x="200"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,200,0)"
                         >
                           <g
                             id="g-svg-179"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-180"
                                 fill="none"
@@ -1950,16 +1865,13 @@
                           <g
                             id="g-svg-173"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-174"
                                 fill="rgba(239,183,69,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1969,10 +1881,10 @@
                           <g
                             id="g-svg-175"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-176"
                                 fill="rgba(100,100,100,1)"
@@ -1996,10 +1908,10 @@
                           <g
                             id="g-svg-177"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-178"
                                 fill="rgba(100,100,100,1)"
@@ -2024,18 +1936,19 @@
                         <g
                           id="g-svg-181"
                           fill="none"
-                          transform="matrix(1,0,0,1,300,0)"
                           class="items-item"
+                          x="300"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,300,0)"
                         >
                           <g
                             id="g-svg-188"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-189"
                                 fill="none"
@@ -2050,16 +1963,13 @@
                           <g
                             id="g-svg-182"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-183"
                                 fill="rgba(95,79,238,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -2069,10 +1979,10 @@
                           <g
                             id="g-svg-184"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-185"
                                 fill="rgba(100,100,100,1)"
@@ -2096,10 +2006,10 @@
                           <g
                             id="g-svg-186"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-187"
                                 fill="rgba(100,100,100,1)"
@@ -2133,32 +2043,30 @@
                     <g
                       id="g-svg-236"
                       fill="none"
-                      transform="matrix(-1,-0,0,-1,0,0)"
                       class="navigator-prev-btn-group"
+                      transform="matrix(-1,-0,0,-1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-237"
                           fill="rgba(0,0,0,1)"
                           class="navigator-prev-btn"
-                          d="M 0,0 L 12,6 L 0,12 Z"
-                          visibility="visible"
+                          d="M -6,-6 L 6,0 L -6,6 Z"
                         />
                       </g>
                     </g>
                     <g
                       id="g-svg-238"
                       fill="none"
-                      transform="matrix(1,0,0,1,40.160000,0)"
                       class="navigator-next-btn-group"
+                      transform="matrix(1,0,0,1,40.160000,0)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-239"
                           fill="rgba(0,0,0,1)"
                           class="navigator-next-btn"
-                          d="M 0,0 L 12,6 L 0,12 Z"
-                          visibility="visible"
+                          d="M -6,-6 L 6,0 L -6,6 Z"
                         />
                       </g>
                     </g>
@@ -2168,7 +2076,7 @@
                       transform="matrix(1,0,0,1,11,0)"
                       class="navigator-page-info-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-241"
                           fill="rgba(0,0,0,1)"
@@ -2178,14 +2086,13 @@
                           dx="0.5"
                           font-size="12"
                           text-anchor="left"
-                          visibility="visible"
                         >
                           1/5
                         </text>
                       </g>
                     </g>
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-235"
                       fill="none"
diff --git a/__tests__/integration/snapshots/CategoryPosition2.svg b/__tests__/integration/snapshots/CategoryPosition2.svg
index 04ced4cf5..02e56ac34 100644
--- a/__tests__/integration/snapshots/CategoryPosition2.svg
+++ b/__tests__/integration/snapshots/CategoryPosition2.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="555"
-  height="150"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,86 +10,62 @@
       <use href="#g-svg-234" transform="matrix(1,0,0,1,100,100)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-242" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-242" fill="none">
         <g id="g-svg-243" fill="none" transform="matrix(1,0,0,1,50,50)">
           <g
             id="g-svg-244"
             fill="none"
+            x="50"
+            y="50"
             width="455"
             height="50"
             transform="matrix(1,0,0,1,50,50)"
           >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="455"
                 height="50"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               />
             </g>
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-items-group"
-            >
+            <g id="g-svg-3" fill="none" class="legend-items-group">
               <g
                 id="g-svg-4"
                 fill="none"
                 width="455"
                 height="50"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-5"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-5" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-6"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-234-6)"
                   >
-                    <g
-                      id="g-svg-7"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-189"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-7" fill="none" class="navigator-play-window">
+                      <g id="g-svg-189" fill="none" class="items-item-page">
                         <g
                           id="g-svg-9"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="100"
                           height="23"
                         >
                           <g
                             id="g-svg-16"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-17"
                                 fill="none"
@@ -104,16 +80,13 @@
                           <g
                             id="g-svg-10"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-11"
                                 fill="rgba(87,129,240,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -123,10 +96,10 @@
                           <g
                             id="g-svg-12"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-13"
                                 fill="rgba(100,100,100,1)"
@@ -150,10 +123,10 @@
                           <g
                             id="g-svg-14"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-15"
                                 fill="rgba(100,100,100,1)"
@@ -178,18 +151,19 @@
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(1,0,0,1,100,0)"
                           class="items-item"
+                          x="100"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,100,0)"
                         >
                           <g
                             id="g-svg-25"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-26"
                                 fill="none"
@@ -204,16 +178,13 @@
                           <g
                             id="g-svg-19"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-20"
                                 fill="rgba(112,210,160,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -223,10 +194,10 @@
                           <g
                             id="g-svg-21"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-22"
                                 fill="rgba(100,100,100,1)"
@@ -250,10 +221,10 @@
                           <g
                             id="g-svg-23"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-24"
                                 fill="rgba(100,100,100,1)"
@@ -278,18 +249,19 @@
                         <g
                           id="g-svg-27"
                           fill="none"
-                          transform="matrix(1,0,0,1,200,0)"
                           class="items-item"
+                          x="200"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,200,0)"
                         >
                           <g
                             id="g-svg-34"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-35"
                                 fill="none"
@@ -304,16 +276,13 @@
                           <g
                             id="g-svg-28"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-29"
                                 fill="rgba(85,100,132,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -323,10 +292,10 @@
                           <g
                             id="g-svg-30"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-31"
                                 fill="rgba(100,100,100,1)"
@@ -350,10 +319,10 @@
                           <g
                             id="g-svg-32"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-33"
                                 fill="rgba(100,100,100,1)"
@@ -378,18 +347,19 @@
                         <g
                           id="g-svg-36"
                           fill="none"
-                          transform="matrix(1,0,0,1,300,0)"
                           class="items-item"
+                          x="300"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,300,0)"
                         >
                           <g
                             id="g-svg-43"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-44"
                                 fill="none"
@@ -404,16 +374,13 @@
                           <g
                             id="g-svg-37"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-38"
                                 fill="rgba(239,183,69,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -423,10 +390,10 @@
                           <g
                             id="g-svg-39"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-40"
                                 fill="rgba(100,100,100,1)"
@@ -450,10 +417,10 @@
                           <g
                             id="g-svg-41"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-42"
                                 fill="rgba(100,100,100,1)"
@@ -476,27 +443,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-198"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-198" fill="none" class="items-item-page">
                         <g
                           id="g-svg-45"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="100"
                           height="23"
                         >
                           <g
                             id="g-svg-52"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-53"
                                 fill="none"
@@ -511,16 +473,13 @@
                           <g
                             id="g-svg-46"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-47"
                                 fill="rgba(95,79,238,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -530,10 +489,10 @@
                           <g
                             id="g-svg-48"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-49"
                                 fill="rgba(100,100,100,1)"
@@ -557,10 +516,10 @@
                           <g
                             id="g-svg-50"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-51"
                                 fill="rgba(100,100,100,1)"
@@ -585,18 +544,19 @@
                         <g
                           id="g-svg-54"
                           fill="none"
-                          transform="matrix(1,0,0,1,100,0)"
                           class="items-item"
+                          x="100"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,100,0)"
                         >
                           <g
                             id="g-svg-61"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-62"
                                 fill="none"
@@ -611,16 +571,13 @@
                           <g
                             id="g-svg-55"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-56"
                                 fill="rgba(87,129,240,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -630,10 +587,10 @@
                           <g
                             id="g-svg-57"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-58"
                                 fill="rgba(100,100,100,1)"
@@ -657,10 +614,10 @@
                           <g
                             id="g-svg-59"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-60"
                                 fill="rgba(100,100,100,1)"
@@ -685,18 +642,19 @@
                         <g
                           id="g-svg-63"
                           fill="none"
-                          transform="matrix(1,0,0,1,200,0)"
                           class="items-item"
+                          x="200"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,200,0)"
                         >
                           <g
                             id="g-svg-70"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-71"
                                 fill="none"
@@ -711,16 +669,13 @@
                           <g
                             id="g-svg-64"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-65"
                                 fill="rgba(112,210,160,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -730,10 +685,10 @@
                           <g
                             id="g-svg-66"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-67"
                                 fill="rgba(100,100,100,1)"
@@ -757,10 +712,10 @@
                           <g
                             id="g-svg-68"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-69"
                                 fill="rgba(100,100,100,1)"
@@ -785,18 +740,19 @@
                         <g
                           id="g-svg-72"
                           fill="none"
-                          transform="matrix(1,0,0,1,300,0)"
                           class="items-item"
+                          x="300"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,300,0)"
                         >
                           <g
                             id="g-svg-79"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-80"
                                 fill="none"
@@ -811,16 +767,13 @@
                           <g
                             id="g-svg-73"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-74"
                                 fill="rgba(85,100,132,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -830,10 +783,10 @@
                           <g
                             id="g-svg-75"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-76"
                                 fill="rgba(100,100,100,1)"
@@ -857,10 +810,10 @@
                           <g
                             id="g-svg-77"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-78"
                                 fill="rgba(100,100,100,1)"
@@ -883,27 +836,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-207"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-207" fill="none" class="items-item-page">
                         <g
                           id="g-svg-81"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="100"
                           height="23"
                         >
                           <g
                             id="g-svg-88"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-89"
                                 fill="none"
@@ -918,16 +866,13 @@
                           <g
                             id="g-svg-82"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-83"
                                 fill="rgba(239,183,69,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -937,10 +882,10 @@
                           <g
                             id="g-svg-84"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-85"
                                 fill="rgba(100,100,100,1)"
@@ -964,10 +909,10 @@
                           <g
                             id="g-svg-86"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-87"
                                 fill="rgba(100,100,100,1)"
@@ -992,18 +937,19 @@
                         <g
                           id="g-svg-90"
                           fill="none"
-                          transform="matrix(1,0,0,1,100,0)"
                           class="items-item"
+                          x="100"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,100,0)"
                         >
                           <g
                             id="g-svg-97"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-98"
                                 fill="none"
@@ -1018,16 +964,13 @@
                           <g
                             id="g-svg-91"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-92"
                                 fill="rgba(95,79,238,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1037,10 +980,10 @@
                           <g
                             id="g-svg-93"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-94"
                                 fill="rgba(100,100,100,1)"
@@ -1064,10 +1007,10 @@
                           <g
                             id="g-svg-95"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-96"
                                 fill="rgba(100,100,100,1)"
@@ -1092,18 +1035,19 @@
                         <g
                           id="g-svg-99"
                           fill="none"
-                          transform="matrix(1,0,0,1,200,0)"
                           class="items-item"
+                          x="200"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,200,0)"
                         >
                           <g
                             id="g-svg-106"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-107"
                                 fill="none"
@@ -1118,16 +1062,13 @@
                           <g
                             id="g-svg-100"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-101"
                                 fill="rgba(87,129,240,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1137,10 +1078,10 @@
                           <g
                             id="g-svg-102"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-103"
                                 fill="rgba(100,100,100,1)"
@@ -1164,10 +1105,10 @@
                           <g
                             id="g-svg-104"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-105"
                                 fill="rgba(100,100,100,1)"
@@ -1192,18 +1133,19 @@
                         <g
                           id="g-svg-108"
                           fill="none"
-                          transform="matrix(1,0,0,1,300,0)"
                           class="items-item"
+                          x="300"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,300,0)"
                         >
                           <g
                             id="g-svg-115"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-116"
                                 fill="none"
@@ -1218,16 +1160,13 @@
                           <g
                             id="g-svg-109"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-110"
                                 fill="rgba(112,210,160,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1237,10 +1176,10 @@
                           <g
                             id="g-svg-111"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-112"
                                 fill="rgba(100,100,100,1)"
@@ -1264,10 +1203,10 @@
                           <g
                             id="g-svg-113"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-114"
                                 fill="rgba(100,100,100,1)"
@@ -1290,27 +1229,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-216"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-216" fill="none" class="items-item-page">
                         <g
                           id="g-svg-117"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="100"
                           height="23"
                         >
                           <g
                             id="g-svg-124"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-125"
                                 fill="none"
@@ -1325,16 +1259,13 @@
                           <g
                             id="g-svg-118"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-119"
                                 fill="rgba(85,100,132,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1344,10 +1275,10 @@
                           <g
                             id="g-svg-120"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-121"
                                 fill="rgba(100,100,100,1)"
@@ -1371,10 +1302,10 @@
                           <g
                             id="g-svg-122"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-123"
                                 fill="rgba(100,100,100,1)"
@@ -1399,18 +1330,19 @@
                         <g
                           id="g-svg-126"
                           fill="none"
-                          transform="matrix(1,0,0,1,100,0)"
                           class="items-item"
+                          x="100"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,100,0)"
                         >
                           <g
                             id="g-svg-133"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-134"
                                 fill="none"
@@ -1425,16 +1357,13 @@
                           <g
                             id="g-svg-127"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-128"
                                 fill="rgba(239,183,69,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1444,10 +1373,10 @@
                           <g
                             id="g-svg-129"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-130"
                                 fill="rgba(100,100,100,1)"
@@ -1471,10 +1400,10 @@
                           <g
                             id="g-svg-131"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-132"
                                 fill="rgba(100,100,100,1)"
@@ -1499,18 +1428,19 @@
                         <g
                           id="g-svg-135"
                           fill="none"
-                          transform="matrix(1,0,0,1,200,0)"
                           class="items-item"
+                          x="200"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,200,0)"
                         >
                           <g
                             id="g-svg-142"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-143"
                                 fill="none"
@@ -1525,16 +1455,13 @@
                           <g
                             id="g-svg-136"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-137"
                                 fill="rgba(95,79,238,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1544,10 +1471,10 @@
                           <g
                             id="g-svg-138"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-139"
                                 fill="rgba(100,100,100,1)"
@@ -1571,10 +1498,10 @@
                           <g
                             id="g-svg-140"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-141"
                                 fill="rgba(100,100,100,1)"
@@ -1599,18 +1526,19 @@
                         <g
                           id="g-svg-144"
                           fill="none"
-                          transform="matrix(1,0,0,1,300,0)"
                           class="items-item"
+                          x="300"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,300,0)"
                         >
                           <g
                             id="g-svg-151"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-152"
                                 fill="none"
@@ -1625,16 +1553,13 @@
                           <g
                             id="g-svg-145"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-146"
                                 fill="rgba(87,129,240,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1644,10 +1569,10 @@
                           <g
                             id="g-svg-147"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-148"
                                 fill="rgba(100,100,100,1)"
@@ -1671,10 +1596,10 @@
                           <g
                             id="g-svg-149"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-150"
                                 fill="rgba(100,100,100,1)"
@@ -1697,27 +1622,22 @@
                           </g>
                         </g>
                       </g>
-                      <g
-                        id="g-svg-225"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                      <g id="g-svg-225" fill="none" class="items-item-page">
                         <g
                           id="g-svg-153"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="100"
                           height="23"
                         >
                           <g
                             id="g-svg-160"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-161"
                                 fill="none"
@@ -1732,16 +1652,13 @@
                           <g
                             id="g-svg-154"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-155"
                                 fill="rgba(112,210,160,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1751,10 +1668,10 @@
                           <g
                             id="g-svg-156"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-157"
                                 fill="rgba(100,100,100,1)"
@@ -1778,10 +1695,10 @@
                           <g
                             id="g-svg-158"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-159"
                                 fill="rgba(100,100,100,1)"
@@ -1806,18 +1723,19 @@
                         <g
                           id="g-svg-162"
                           fill="none"
-                          transform="matrix(1,0,0,1,100,0)"
                           class="items-item"
+                          x="100"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,100,0)"
                         >
                           <g
                             id="g-svg-169"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-170"
                                 fill="none"
@@ -1832,16 +1750,13 @@
                           <g
                             id="g-svg-163"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-164"
                                 fill="rgba(85,100,132,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1851,10 +1766,10 @@
                           <g
                             id="g-svg-165"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-166"
                                 fill="rgba(100,100,100,1)"
@@ -1878,10 +1793,10 @@
                           <g
                             id="g-svg-167"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-168"
                                 fill="rgba(100,100,100,1)"
@@ -1906,18 +1821,19 @@
                         <g
                           id="g-svg-171"
                           fill="none"
-                          transform="matrix(1,0,0,1,200,0)"
                           class="items-item"
+                          x="200"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,200,0)"
                         >
                           <g
                             id="g-svg-178"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-179"
                                 fill="none"
@@ -1932,16 +1848,13 @@
                           <g
                             id="g-svg-172"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-173"
                                 fill="rgba(239,183,69,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -1951,10 +1864,10 @@
                           <g
                             id="g-svg-174"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-175"
                                 fill="rgba(100,100,100,1)"
@@ -1978,10 +1891,10 @@
                           <g
                             id="g-svg-176"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-177"
                                 fill="rgba(100,100,100,1)"
@@ -2006,18 +1919,19 @@
                         <g
                           id="g-svg-180"
                           fill="none"
-                          transform="matrix(1,0,0,1,300,0)"
                           class="items-item"
+                          x="300"
+                          y="0"
                           width="100"
                           height="23"
+                          transform="matrix(1,0,0,1,300,0)"
                         >
                           <g
                             id="g-svg-187"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-188"
                                 fill="none"
@@ -2032,16 +1946,13 @@
                           <g
                             id="g-svg-181"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-182"
                                 fill="rgba(95,79,238,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="hidden"
@@ -2051,10 +1962,10 @@
                           <g
                             id="g-svg-183"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-184"
                                 fill="rgba(100,100,100,1)"
@@ -2078,10 +1989,10 @@
                           <g
                             id="g-svg-185"
                             fill="none"
-                            transform="matrix(1,0,0,1,55,11.500000)"
                             class="legend-category-item-value-group"
+                            transform="matrix(1,0,0,1,55,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-186"
                                 fill="rgba(100,100,100,1)"
@@ -2115,32 +2026,30 @@
                     <g
                       id="g-svg-235"
                       fill="none"
-                      transform="matrix(-1,-0,0,-1,0,0)"
                       class="navigator-prev-btn-group"
+                      transform="matrix(-1,-0,0,-1,0,0)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-236"
                           fill="rgba(0,0,0,1)"
                           class="navigator-prev-btn"
-                          d="M 0,0 L 12,6 L 0,12 Z"
-                          visibility="visible"
+                          d="M -6,-6 L 6,0 L -6,6 Z"
                         />
                       </g>
                     </g>
                     <g
                       id="g-svg-237"
                       fill="none"
-                      transform="matrix(1,0,0,1,40.160000,0)"
                       class="navigator-next-btn-group"
+                      transform="matrix(1,0,0,1,40.160000,0)"
                     >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                      <g>
                         <path
                           id="g-svg-238"
                           fill="rgba(0,0,0,1)"
                           class="navigator-next-btn"
-                          d="M 0,0 L 12,6 L 0,12 Z"
-                          visibility="visible"
+                          d="M -6,-6 L 6,0 L -6,6 Z"
                         />
                       </g>
                     </g>
@@ -2150,7 +2059,7 @@
                       transform="matrix(1,0,0,1,11,0)"
                       class="navigator-page-info-group"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-240"
                           fill="rgba(0,0,0,1)"
@@ -2160,14 +2069,13 @@
                           dx="0.5"
                           font-size="12"
                           text-anchor="left"
-                          visibility="visible"
                         >
                           1/5
                         </text>
                       </g>
                     </g>
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-234"
                       fill="none"
diff --git a/__tests__/integration/snapshots/CategoryPosition3.svg b/__tests__/integration/snapshots/CategoryPosition3.svg
index 717d96e85..b01cc4d6d 100644
--- a/__tests__/integration/snapshots/CategoryPosition3.svg
+++ b/__tests__/integration/snapshots/CategoryPosition3.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="555"
-  height="150"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,31 +10,27 @@
       <use href="#g-svg-235" transform="matrix(1,0,0,1,100,127)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-241" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-241" fill="none">
         <g
           id="g-svg-242"
           fill="none"
+          x="100"
+          y="100"
           width="455"
           height="50"
           transform="matrix(1,0,0,1,100,100)"
         >
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-title-group"
-          >
+          <g id="g-svg-1" fill="none" class="legend-title-group">
             <g
               id="g-svg-2"
               fill="none"
               width="455"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(44,53,66,1)"
@@ -46,6 +42,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   Legend Title
@@ -64,49 +62,34 @@
               fill="none"
               width="455"
               height="23"
-              transform="matrix(1,0,0,1,0,0)"
+              x="0"
+              y="0"
               class="legend-items"
             >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="items-navigator"
-              >
+              <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                 <g
                   id="g-svg-7"
                   fill="none"
                   class="navigator-content-group"
-                  transform="matrix(1,0,0,1,0,0)"
                   clip-path="url(#clip-path-235-7)"
                 >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    class="navigator-play-window"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g
-                      id="g-svg-190"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                  <g id="g-svg-8" fill="none" class="navigator-play-window">
+                    <g id="g-svg-190" fill="none" class="items-item-page">
                       <g
                         id="g-svg-10"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="100"
                         height="23"
                       >
                         <g
                           id="g-svg-17"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-18"
                               fill="none"
@@ -121,16 +104,13 @@
                         <g
                           id="g-svg-11"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-12"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -140,10 +120,10 @@
                         <g
                           id="g-svg-13"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-14"
                               fill="rgba(100,100,100,1)"
@@ -167,10 +147,10 @@
                         <g
                           id="g-svg-15"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-16"
                               fill="rgba(100,100,100,1)"
@@ -195,18 +175,19 @@
                       <g
                         id="g-svg-19"
                         fill="none"
-                        transform="matrix(1,0,0,1,100,0)"
                         class="items-item"
+                        x="100"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,100,0)"
                       >
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-27"
                               fill="none"
@@ -221,16 +202,13 @@
                         <g
                           id="g-svg-20"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-21"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -240,10 +218,10 @@
                         <g
                           id="g-svg-22"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-23"
                               fill="rgba(100,100,100,1)"
@@ -267,10 +245,10 @@
                         <g
                           id="g-svg-24"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-25"
                               fill="rgba(100,100,100,1)"
@@ -295,18 +273,19 @@
                       <g
                         id="g-svg-28"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-35"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-36"
                               fill="none"
@@ -321,16 +300,13 @@
                         <g
                           id="g-svg-29"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-30"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -340,10 +316,10 @@
                         <g
                           id="g-svg-31"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-32"
                               fill="rgba(100,100,100,1)"
@@ -367,10 +343,10 @@
                         <g
                           id="g-svg-33"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-34"
                               fill="rgba(100,100,100,1)"
@@ -395,18 +371,19 @@
                       <g
                         id="g-svg-37"
                         fill="none"
-                        transform="matrix(1,0,0,1,300,0)"
                         class="items-item"
+                        x="300"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,300,0)"
                       >
                         <g
                           id="g-svg-44"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-45"
                               fill="none"
@@ -421,16 +398,13 @@
                         <g
                           id="g-svg-38"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-39"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="visible"
@@ -440,10 +414,10 @@
                         <g
                           id="g-svg-40"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-41"
                               fill="rgba(100,100,100,1)"
@@ -467,10 +441,10 @@
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-43"
                               fill="rgba(100,100,100,1)"
@@ -493,27 +467,22 @@
                         </g>
                       </g>
                     </g>
-                    <g
-                      id="g-svg-199"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-199" fill="none" class="items-item-page">
                       <g
                         id="g-svg-46"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="100"
                         height="23"
                       >
                         <g
                           id="g-svg-53"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-54"
                               fill="none"
@@ -528,16 +497,13 @@
                         <g
                           id="g-svg-47"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-48"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -547,10 +513,10 @@
                         <g
                           id="g-svg-49"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-50"
                               fill="rgba(100,100,100,1)"
@@ -574,10 +540,10 @@
                         <g
                           id="g-svg-51"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-52"
                               fill="rgba(100,100,100,1)"
@@ -602,18 +568,19 @@
                       <g
                         id="g-svg-55"
                         fill="none"
-                        transform="matrix(1,0,0,1,100,0)"
                         class="items-item"
+                        x="100"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,100,0)"
                       >
                         <g
                           id="g-svg-62"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-63"
                               fill="none"
@@ -628,16 +595,13 @@
                         <g
                           id="g-svg-56"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-57"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -647,10 +611,10 @@
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-59"
                               fill="rgba(100,100,100,1)"
@@ -674,10 +638,10 @@
                         <g
                           id="g-svg-60"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-61"
                               fill="rgba(100,100,100,1)"
@@ -702,18 +666,19 @@
                       <g
                         id="g-svg-64"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-71"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-72"
                               fill="none"
@@ -728,16 +693,13 @@
                         <g
                           id="g-svg-65"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-66"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -747,10 +709,10 @@
                         <g
                           id="g-svg-67"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-68"
                               fill="rgba(100,100,100,1)"
@@ -774,10 +736,10 @@
                         <g
                           id="g-svg-69"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-70"
                               fill="rgba(100,100,100,1)"
@@ -802,18 +764,19 @@
                       <g
                         id="g-svg-73"
                         fill="none"
-                        transform="matrix(1,0,0,1,300,0)"
                         class="items-item"
+                        x="300"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,300,0)"
                       >
                         <g
                           id="g-svg-80"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-81"
                               fill="none"
@@ -828,16 +791,13 @@
                         <g
                           id="g-svg-74"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-75"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -847,10 +807,10 @@
                         <g
                           id="g-svg-76"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-77"
                               fill="rgba(100,100,100,1)"
@@ -874,10 +834,10 @@
                         <g
                           id="g-svg-78"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-79"
                               fill="rgba(100,100,100,1)"
@@ -900,27 +860,22 @@
                         </g>
                       </g>
                     </g>
-                    <g
-                      id="g-svg-208"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-208" fill="none" class="items-item-page">
                       <g
                         id="g-svg-82"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="100"
                         height="23"
                       >
                         <g
                           id="g-svg-89"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-90"
                               fill="none"
@@ -935,16 +890,13 @@
                         <g
                           id="g-svg-83"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-84"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -954,10 +906,10 @@
                         <g
                           id="g-svg-85"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-86"
                               fill="rgba(100,100,100,1)"
@@ -981,10 +933,10 @@
                         <g
                           id="g-svg-87"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-88"
                               fill="rgba(100,100,100,1)"
@@ -1009,18 +961,19 @@
                       <g
                         id="g-svg-91"
                         fill="none"
-                        transform="matrix(1,0,0,1,100,0)"
                         class="items-item"
+                        x="100"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,100,0)"
                       >
                         <g
                           id="g-svg-98"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-99"
                               fill="none"
@@ -1035,16 +988,13 @@
                         <g
                           id="g-svg-92"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-93"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1054,10 +1004,10 @@
                         <g
                           id="g-svg-94"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-95"
                               fill="rgba(100,100,100,1)"
@@ -1081,10 +1031,10 @@
                         <g
                           id="g-svg-96"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-97"
                               fill="rgba(100,100,100,1)"
@@ -1109,18 +1059,19 @@
                       <g
                         id="g-svg-100"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-107"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-108"
                               fill="none"
@@ -1135,16 +1086,13 @@
                         <g
                           id="g-svg-101"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-102"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1154,10 +1102,10 @@
                         <g
                           id="g-svg-103"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-104"
                               fill="rgba(100,100,100,1)"
@@ -1181,10 +1129,10 @@
                         <g
                           id="g-svg-105"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-106"
                               fill="rgba(100,100,100,1)"
@@ -1209,18 +1157,19 @@
                       <g
                         id="g-svg-109"
                         fill="none"
-                        transform="matrix(1,0,0,1,300,0)"
                         class="items-item"
+                        x="300"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,300,0)"
                       >
                         <g
                           id="g-svg-116"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-117"
                               fill="none"
@@ -1235,16 +1184,13 @@
                         <g
                           id="g-svg-110"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-111"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1254,10 +1200,10 @@
                         <g
                           id="g-svg-112"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-113"
                               fill="rgba(100,100,100,1)"
@@ -1281,10 +1227,10 @@
                         <g
                           id="g-svg-114"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-115"
                               fill="rgba(100,100,100,1)"
@@ -1307,27 +1253,22 @@
                         </g>
                       </g>
                     </g>
-                    <g
-                      id="g-svg-217"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-217" fill="none" class="items-item-page">
                       <g
                         id="g-svg-118"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="100"
                         height="23"
                       >
                         <g
                           id="g-svg-125"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-126"
                               fill="none"
@@ -1342,16 +1283,13 @@
                         <g
                           id="g-svg-119"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-120"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1361,10 +1299,10 @@
                         <g
                           id="g-svg-121"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-122"
                               fill="rgba(100,100,100,1)"
@@ -1388,10 +1326,10 @@
                         <g
                           id="g-svg-123"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-124"
                               fill="rgba(100,100,100,1)"
@@ -1416,18 +1354,19 @@
                       <g
                         id="g-svg-127"
                         fill="none"
-                        transform="matrix(1,0,0,1,100,0)"
                         class="items-item"
+                        x="100"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,100,0)"
                       >
                         <g
                           id="g-svg-134"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-135"
                               fill="none"
@@ -1442,16 +1381,13 @@
                         <g
                           id="g-svg-128"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-129"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1461,10 +1397,10 @@
                         <g
                           id="g-svg-130"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-131"
                               fill="rgba(100,100,100,1)"
@@ -1488,10 +1424,10 @@
                         <g
                           id="g-svg-132"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-133"
                               fill="rgba(100,100,100,1)"
@@ -1516,18 +1452,19 @@
                       <g
                         id="g-svg-136"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-143"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-144"
                               fill="none"
@@ -1542,16 +1479,13 @@
                         <g
                           id="g-svg-137"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-138"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1561,10 +1495,10 @@
                         <g
                           id="g-svg-139"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-140"
                               fill="rgba(100,100,100,1)"
@@ -1588,10 +1522,10 @@
                         <g
                           id="g-svg-141"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-142"
                               fill="rgba(100,100,100,1)"
@@ -1616,18 +1550,19 @@
                       <g
                         id="g-svg-145"
                         fill="none"
-                        transform="matrix(1,0,0,1,300,0)"
                         class="items-item"
+                        x="300"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,300,0)"
                       >
                         <g
                           id="g-svg-152"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-153"
                               fill="none"
@@ -1642,16 +1577,13 @@
                         <g
                           id="g-svg-146"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-147"
                               fill="rgba(87,129,240,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1661,10 +1593,10 @@
                         <g
                           id="g-svg-148"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-149"
                               fill="rgba(100,100,100,1)"
@@ -1688,10 +1620,10 @@
                         <g
                           id="g-svg-150"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-151"
                               fill="rgba(100,100,100,1)"
@@ -1714,27 +1646,22 @@
                         </g>
                       </g>
                     </g>
-                    <g
-                      id="g-svg-226"
-                      fill="none"
-                      class="items-item-page"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
+                    <g id="g-svg-226" fill="none" class="items-item-page">
                       <g
                         id="g-svg-154"
                         fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
                         class="items-item"
+                        x="0"
+                        y="0"
                         width="100"
                         height="23"
                       >
                         <g
                           id="g-svg-161"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-162"
                               fill="none"
@@ -1749,16 +1676,13 @@
                         <g
                           id="g-svg-155"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-156"
                               fill="rgba(112,210,160,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1768,10 +1692,10 @@
                         <g
                           id="g-svg-157"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-158"
                               fill="rgba(100,100,100,1)"
@@ -1795,10 +1719,10 @@
                         <g
                           id="g-svg-159"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-160"
                               fill="rgba(100,100,100,1)"
@@ -1823,18 +1747,19 @@
                       <g
                         id="g-svg-163"
                         fill="none"
-                        transform="matrix(1,0,0,1,100,0)"
                         class="items-item"
+                        x="100"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,100,0)"
                       >
                         <g
                           id="g-svg-170"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-171"
                               fill="none"
@@ -1849,16 +1774,13 @@
                         <g
                           id="g-svg-164"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-165"
                               fill="rgba(85,100,132,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1868,10 +1790,10 @@
                         <g
                           id="g-svg-166"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-167"
                               fill="rgba(100,100,100,1)"
@@ -1895,10 +1817,10 @@
                         <g
                           id="g-svg-168"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-169"
                               fill="rgba(100,100,100,1)"
@@ -1923,18 +1845,19 @@
                       <g
                         id="g-svg-172"
                         fill="none"
-                        transform="matrix(1,0,0,1,200,0)"
                         class="items-item"
+                        x="200"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,200,0)"
                       >
                         <g
                           id="g-svg-179"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-180"
                               fill="none"
@@ -1949,16 +1872,13 @@
                         <g
                           id="g-svg-173"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-174"
                               fill="rgba(239,183,69,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -1968,10 +1888,10 @@
                         <g
                           id="g-svg-175"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-176"
                               fill="rgba(100,100,100,1)"
@@ -1995,10 +1915,10 @@
                         <g
                           id="g-svg-177"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-178"
                               fill="rgba(100,100,100,1)"
@@ -2023,18 +1943,19 @@
                       <g
                         id="g-svg-181"
                         fill="none"
-                        transform="matrix(1,0,0,1,300,0)"
                         class="items-item"
+                        x="300"
+                        y="0"
                         width="100"
                         height="23"
+                        transform="matrix(1,0,0,1,300,0)"
                       >
                         <g
                           id="g-svg-188"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="legend-category-item-background-group"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <path
                               id="g-svg-189"
                               fill="none"
@@ -2049,16 +1970,13 @@
                         <g
                           id="g-svg-182"
                           fill="none"
-                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           class="legend-category-item-marker-group"
+                          transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <circle
                               id="g-svg-183"
                               fill="rgba(95,79,238,1)"
-                              transform="translate(-6,-6)"
-                              cx="6"
-                              cy="6"
                               r="6"
                               class="legend-category-item-marker"
                               visibility="hidden"
@@ -2068,10 +1986,10 @@
                         <g
                           id="g-svg-184"
                           fill="none"
-                          transform="matrix(1,0,0,1,10,11.500000)"
                           class="legend-category-item-label-group"
+                          transform="matrix(1,0,0,1,10,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-185"
                               fill="rgba(100,100,100,1)"
@@ -2095,10 +2013,10 @@
                         <g
                           id="g-svg-186"
                           fill="none"
-                          transform="matrix(1,0,0,1,55,11.500000)"
                           class="legend-category-item-value-group"
+                          transform="matrix(1,0,0,1,55,11.500000)"
                         >
-                          <g transform="matrix(1,0,0,1,0,0)">
+                          <g>
                             <text
                               id="g-svg-187"
                               fill="rgba(100,100,100,1)"
@@ -2132,32 +2050,30 @@
                   <g
                     id="g-svg-236"
                     fill="none"
-                    transform="matrix(-1,-0,0,-1,0,0)"
                     class="navigator-prev-btn-group"
+                    transform="matrix(-1,-0,0,-1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-237"
                         fill="rgba(0,0,0,1)"
                         class="navigator-prev-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
                   <g
                     id="g-svg-238"
                     fill="none"
-                    transform="matrix(1,0,0,1,40.160000,0)"
                     class="navigator-next-btn-group"
+                    transform="matrix(1,0,0,1,40.160000,0)"
                   >
-                    <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g>
                       <path
                         id="g-svg-239"
                         fill="rgba(0,0,0,1)"
                         class="navigator-next-btn"
-                        d="M 0,0 L 12,6 L 0,12 Z"
-                        visibility="visible"
+                        d="M -6,-6 L 6,0 L -6,6 Z"
                       />
                     </g>
                   </g>
@@ -2167,7 +2083,7 @@
                     transform="matrix(1,0,0,1,11,0)"
                     class="navigator-page-info-group"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-241"
                         fill="rgba(0,0,0,1)"
@@ -2177,14 +2093,13 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="left"
-                        visibility="visible"
                       >
                         1/5
                       </text>
                     </g>
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-235"
                     fill="none"
diff --git a/__tests__/integration/snapshots/Checkbox1.svg b/__tests__/integration/snapshots/Checkbox1.svg
index c3de89722..5ca9ea5dc 100644
--- a/__tests__/integration/snapshots/Checkbox1.svg
+++ b/__tests__/integration/snapshots/Checkbox1.svg
@@ -6,17 +6,12 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-4" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-4" fill="none">
         <g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="checkbox-content"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-1" fill="none" class="checkbox-content">
+            <g>
               <path
                 id="g-svg-2"
                 fill="rgba(255,255,255,1)"
@@ -26,20 +21,22 @@
                 stroke="rgba(218,218,218,1)"
                 stroke-width="1"
               />
-              <g transform="matrix(1,0,0,1,3,4)">
+              <g>
                 <path
                   id="g-svg-3"
                   fill="none"
                   stroke="rgba(255,255,255,1)"
-                  d="M 0,2 L 2,4.5 L 5.5,0"
+                  d="M 3,6 L 50,8.50 L 8.50,40"
                   stroke-width="1"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,16,6)">
+            <g>
               <text
                 id="g-svg-4"
                 fill="rgba(0,0,0,0.45)"
+                x="16"
+                y="6"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
@@ -52,13 +49,8 @@
           </g>
         </g>
         <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,10,30)">
-          <g
-            id="g-svg-5"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="checkbox-content"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-5" fill="none" class="checkbox-content">
+            <g>
               <path
                 id="g-svg-6"
                 fill="rgba(52,113,249,1)"
@@ -68,20 +60,22 @@
                 stroke="rgba(52,113,249,1)"
                 stroke-width="1"
               />
-              <g transform="matrix(1,0,0,1,3,4)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="none"
                   stroke="rgba(255,255,255,1)"
-                  d="M 0,2 L 2,4.5 L 5.5,0"
+                  d="M 3,6 L 50,8.50 L 8.50,40"
                   stroke-width="1"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,16,6)">
+            <g>
               <text
                 id="g-svg-8"
                 fill="rgba(0,0,0,0.45)"
+                x="16"
+                y="6"
                 dominant-baseline="central"
                 paint-order="stroke"
                 dx="0.5"
diff --git a/__tests__/integration/snapshots/Continuous1.svg b/__tests__/integration/snapshots/Continuous1.svg
index b4fee4592..44f0bcb3d 100644
--- a/__tests__/integration/snapshots/Continuous1.svg
+++ b/__tests__/integration/snapshots/Continuous1.svg
@@ -104,41 +104,30 @@
       <use href="#g-svg-192" transform="matrix(1,0,0,1,14.900000,367)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-634"
-        fill="none"
-        width="400"
-        height="420"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-634" fill="none" width="400" height="420">
+        <g>
           <path
             id="g-svg-635"
             fill="none"
             d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            x="0"
+            y="0"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-636"
-          fill="none"
-          width="400"
-          height="80"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-636" fill="none" width="400" height="80">
           <g
             id="g-svg-1"
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-2"
                 fill="rgba(44,53,66,1)"
@@ -150,6 +139,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 title
@@ -162,25 +153,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-5"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-5" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,14.900000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-32"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-32" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-33"
                       fill="rgba(255,192,203,1)"
@@ -189,23 +170,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-34"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-36-35)"
-                  >
+                <g id="g-svg-34" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-36-35)">
                     <path
                       id="g-svg-35"
                       fill="url(#g-pattern-0)"
                       class="ribbon-ribbon"
                       d="M 0,53 L 0,0 L 370.2,0 L 370.2,53 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-36"
                         fill="none"
@@ -217,68 +190,52 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-4"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            />
-            <g
-              id="g-svg-6"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-4" fill="none" class="legend-label-group" />
+            <g id="g-svg-6" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-7"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,14.900000,26.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-41"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-8" fill="none" class="handle-icon-group">
+                  <g id="g-svg-41" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-42"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-43"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-44"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -287,13 +244,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-13"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-13" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-14"
                       fill="rgba(197,197,197,1)"
@@ -304,6 +256,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -313,53 +267,47 @@
               <g
                 id="g-svg-15"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,385.100006,26.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-16"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-45"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-16" fill="none" class="handle-icon-group">
+                  <g id="g-svg-45" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-46"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-47"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-48"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -368,13 +316,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-21"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-21" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-22"
                       fill="rgba(197,197,197,1)"
@@ -385,6 +328,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       1000
                     </text>
@@ -392,18 +337,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-37"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-38"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-37" fill="none" class="legend-indicator">
+              <g id="g-svg-38" fill="none">
+                <g>
                   <path
                     id="g-svg-40"
                     fill="rgba(38,38,38,1)"
@@ -411,25 +347,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-39"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-39" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,85)">
+        <g>
           <path
             id="g-svg-637"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 0,85 l 400,0 l 0,80 l-400 0 z"
+            x="0"
+            y="85"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -442,31 +375,16 @@
           height="80"
           transform="matrix(1,0,0,1,0,85)"
         >
-          <g
-            id="g-svg-49"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-51"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-49" fill="none" class="legend-content-group">
+            <g id="g-svg-51" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-77"
                 fill="none"
                 transform="matrix(1,0,0,1,14.900000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-78"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-78" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-79"
                       fill="rgba(255,192,203,1)"
@@ -475,23 +393,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-80"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-82-81)"
-                  >
+                <g id="g-svg-80" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-82-81)">
                     <path
                       id="g-svg-81"
                       fill="url(#g-pattern-1)"
                       class="ribbon-ribbon"
                       d="M 0,80 L 0,0 L 370.2,0 L 370.2,80 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-82"
                         fill="none"
@@ -503,68 +413,52 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-50"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            />
-            <g
-              id="g-svg-52"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-50" fill="none" class="legend-label-group" />
+            <g id="g-svg-52" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-53"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,14.900000,40)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-54"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-87"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-54" fill="none" class="handle-icon-group">
+                  <g id="g-svg-87" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-88"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-89"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-90"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -573,13 +467,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-59"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-59" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-60"
                       fill="rgba(197,197,197,1)"
@@ -590,6 +479,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -599,53 +490,47 @@
               <g
                 id="g-svg-61"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,385.100006,40)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-62"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-91"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-62" fill="none" class="handle-icon-group">
+                  <g id="g-svg-91" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-92"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-93"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-94"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -654,13 +539,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-67"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-67" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-68"
                       fill="rgba(197,197,197,1)"
@@ -671,6 +551,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       1000
                     </text>
@@ -678,18 +560,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-83"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-84"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-83" fill="none" class="legend-indicator">
+              <g id="g-svg-84" fill="none">
+                <g>
                   <path
                     id="g-svg-86"
                     fill="rgba(38,38,38,1)"
@@ -697,25 +570,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-85"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-85" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,170)">
+        <g>
           <path
             id="g-svg-639"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 0,170 l 400,0 l 0,80 l-400 0 z"
+            x="0"
+            y="170"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -733,34 +603,13 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-96"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-98"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
-              <g
-                id="g-svg-100"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon"
-              >
-                <g
-                  id="g-svg-101"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-96" fill="none" class="legend-content-group">
+            <g id="g-svg-98" fill="none" class="legend-ribbon-group">
+              <g id="g-svg-100" fill="none" class="legend-ribbon">
+                <g id="g-svg-101" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-102"
                       fill="rgba(255,192,203,1)"
@@ -769,23 +618,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-103"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-105-104)"
-                  >
+                <g id="g-svg-103" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-105-104)">
                     <path
                       id="g-svg-104"
                       fill="url(#g-pattern-2)"
                       class="ribbon-ribbon"
                       d="M 0,80 L 0,0 L 400,0 L 400,80 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-105"
                         fill="none"
@@ -797,30 +638,11 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-97"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            />
-            <g
-              id="g-svg-99"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-106"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-107"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-97" fill="none" class="legend-label-group" />
+            <g id="g-svg-99" fill="none" class="legend-handles-group" />
+            <g id="g-svg-106" fill="none" class="legend-indicator">
+              <g id="g-svg-107" fill="none">
+                <g>
                   <path
                     id="g-svg-109"
                     fill="rgba(38,38,38,1)"
@@ -828,25 +650,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-108"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-108" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,255)">
+        <g>
           <path
             id="g-svg-641"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 0,255 l 400,0 l 0,80 l-400 0 z"
+            x="0"
+            y="255"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -864,34 +683,18 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-111"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-113"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-111" fill="none" class="legend-content-group">
+            <g id="g-svg-113" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-139"
                 fill="none"
                 transform="matrix(1,0,0,1,14.900000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-140"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-140" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-141"
                       fill="rgba(255,192,203,1)"
@@ -900,23 +703,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-142"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-144-143)"
-                  >
+                <g id="g-svg-142" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-144-143)">
                     <path
                       id="g-svg-143"
                       fill="url(#g-pattern-3)"
                       class="ribbon-ribbon"
                       d="M 0,20 L 0,0 L 370.2,0 L 370.2,20 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-144"
                         fill="none"
@@ -928,68 +723,52 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-112"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            />
-            <g
-              id="g-svg-114"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-112" fill="none" class="legend-label-group" />
+            <g id="g-svg-114" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-115"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,14.900000,10)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-116"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-149"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-116" fill="none" class="handle-icon-group">
+                  <g id="g-svg-149" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-150"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-151"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-152"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -998,13 +777,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-121"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-121" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-122"
                       fill="rgba(197,197,197,1)"
@@ -1015,6 +789,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -1024,53 +800,47 @@
               <g
                 id="g-svg-123"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,385.100006,10)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-124"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-153"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-124" fill="none" class="handle-icon-group">
+                  <g id="g-svg-153" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-154"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-155"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-156"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -1079,13 +849,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-129"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-129" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-130"
                       fill="rgba(197,197,197,1)"
@@ -1096,6 +861,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       1000
                     </text>
@@ -1103,18 +870,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-145"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-146"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-145" fill="none" class="legend-indicator">
+              <g id="g-svg-146" fill="none">
+                <g>
                   <path
                     id="g-svg-148"
                     fill="rgba(38,38,38,1)"
@@ -1122,25 +880,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-147"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-147" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,340)">
+        <g>
           <path
             id="g-svg-643"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 0,340 l 400,0 l 0,80 l-400 0 z"
+            x="0"
+            y="340"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -1158,10 +913,9 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-158"
                 fill="rgba(44,53,66,1)"
@@ -1173,6 +927,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 title
@@ -1185,25 +941,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-161"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-161" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-187"
                 fill="none"
                 transform="matrix(1,0,0,1,14.900000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-188"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-188" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-189"
                       fill="rgba(255,192,203,1)"
@@ -1212,23 +958,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-190"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-192-191)"
-                  >
+                <g id="g-svg-190" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-192-191)">
                     <path
                       id="g-svg-191"
                       fill="url(#g-pattern-3)"
                       class="ribbon-ribbon"
                       d="M 0,20 L 0,0 L 370.2,0 L 370.2,20 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-192"
                         fill="none"
@@ -1240,68 +978,52 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-160"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            />
-            <g
-              id="g-svg-162"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-160" fill="none" class="legend-label-group" />
+            <g id="g-svg-162" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-163"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,14.900000,10)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-164"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-197"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-164" fill="none" class="handle-icon-group">
+                  <g id="g-svg-197" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-198"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-199"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-200"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -1310,13 +1032,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-169"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-169" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-170"
                       fill="rgba(197,197,197,1)"
@@ -1327,6 +1044,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -1336,53 +1055,47 @@
               <g
                 id="g-svg-171"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,385.100006,10)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-172"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-201"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-172" fill="none" class="handle-icon-group">
+                  <g id="g-svg-201" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-202"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-203"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-204"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -1391,13 +1104,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-177"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-177" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-178"
                       fill="rgba(197,197,197,1)"
@@ -1408,6 +1116,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       1000
                     </text>
@@ -1415,18 +1125,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-193"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-194"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-193" fill="none" class="legend-indicator">
+              <g id="g-svg-194" fill="none">
+                <g>
                   <path
                     id="g-svg-196"
                     fill="rgba(38,38,38,1)"
@@ -1434,16 +1135,11 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-195"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-195" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
diff --git a/__tests__/integration/snapshots/Continuous2.svg b/__tests__/integration/snapshots/Continuous2.svg
index 14389491f..0d5f9a332 100644
--- a/__tests__/integration/snapshots/Continuous2.svg
+++ b/__tests__/integration/snapshots/Continuous2.svg
@@ -73,42 +73,31 @@
       <use href="#g-svg-106" transform="matrix(1,0,0,1,0,130)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-205"
-        fill="none"
-        width="400"
-        height="190"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-205" fill="none" width="400" height="190">
+        <g>
           <path
             id="g-svg-206"
             fill="none"
             d="M 0,0 l 400,0 l 0,60 l-400 0 z"
+            x="0"
+            y="0"
             width="400"
             height="60"
             stroke-width="1"
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-207"
-          fill="none"
-          width="400"
-          height="60"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-207" fill="none" width="400" height="60">
           <g
             id="g-svg-1"
             fill="none"
             width="400"
             height="60"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-2"
                 fill="rgba(44,53,66,1)"
@@ -120,6 +109,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 title
@@ -132,25 +123,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-5"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-5" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,14.900000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-32"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-32" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-33"
                       fill="rgba(255,192,203,1)"
@@ -159,23 +140,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-34"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-36-35)"
-                  >
+                <g id="g-svg-34" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-36-35)">
                     <path
                       id="g-svg-35"
                       fill="url(#g-pattern-0)"
                       class="ribbon-ribbon"
                       d="M 0,18 L 370.2,0 L 370.2,18 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-36"
                         fill="none"
@@ -187,68 +160,52 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-4"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            />
-            <g
-              id="g-svg-6"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-4" fill="none" class="legend-label-group" />
+            <g id="g-svg-6" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-7"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,14.900000,9)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-41"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-8" fill="none" class="handle-icon-group">
+                  <g id="g-svg-41" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-42"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-43"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-44"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -257,13 +214,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-13"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-13" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-14"
                       fill="rgba(197,197,197,1)"
@@ -274,6 +226,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -283,53 +237,47 @@
               <g
                 id="g-svg-15"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,385.100006,9)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-16"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-45"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-16" fill="none" class="handle-icon-group">
+                  <g id="g-svg-45" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-46"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-47"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-48"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -338,13 +286,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-21"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-21" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-22"
                       fill="rgba(197,197,197,1)"
@@ -355,6 +298,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       1000
                     </text>
@@ -362,18 +307,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-37"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-38"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-37" fill="none" class="legend-indicator">
+              <g id="g-svg-38" fill="none">
+                <g>
                   <path
                     id="g-svg-40"
                     fill="rgba(38,38,38,1)"
@@ -381,25 +317,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-39"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-39" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,65)">
+        <g>
           <path
             id="g-svg-208"
             fill="none"
-            d="M 0,0 l 400,0 l 0,60 l-400 0 z"
+            d="M 0,65 l 400,0 l 0,60 l-400 0 z"
+            x="0"
+            y="65"
             width="400"
             height="60"
             stroke-width="1"
@@ -418,34 +351,18 @@
             fill="none"
             width="400"
             height="60"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-52"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-50" fill="none" class="legend-content-group">
+            <g id="g-svg-52" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-78"
                 fill="none"
                 transform="matrix(1,0,0,1,14.900000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-79"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-79" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-80"
                       fill="rgba(255,192,203,1)"
@@ -454,23 +371,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-81"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-83-82)"
-                  >
+                <g id="g-svg-81" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-83-82)">
                     <path
                       id="g-svg-82"
                       fill="url(#g-pattern-1)"
                       class="ribbon-ribbon"
                       d="M 0,60 L 370.2,0 L 370.2,60 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-83"
                         fill="none"
@@ -482,68 +391,52 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-51"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            />
-            <g
-              id="g-svg-53"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-51" fill="none" class="legend-label-group" />
+            <g id="g-svg-53" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-54"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,14.900000,30)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-55"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-88"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-55" fill="none" class="handle-icon-group">
+                  <g id="g-svg-88" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-89"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-90"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-91"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -552,13 +445,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-60"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-60" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-61"
                       fill="rgba(197,197,197,1)"
@@ -569,6 +457,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -578,53 +468,47 @@
               <g
                 id="g-svg-62"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,385.100006,30)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-63"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-92"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-63" fill="none" class="handle-icon-group">
+                  <g id="g-svg-92" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-93"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-94"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-95"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -633,13 +517,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-68"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-68" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-69"
                       fill="rgba(197,197,197,1)"
@@ -650,6 +529,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       1000
                     </text>
@@ -657,18 +538,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-84"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-85"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-84" fill="none" class="legend-indicator">
+              <g id="g-svg-85" fill="none">
+                <g>
                   <path
                     id="g-svg-87"
                     fill="rgba(38,38,38,1)"
@@ -676,25 +548,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-86"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-86" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,130)">
+        <g>
           <path
             id="g-svg-210"
             fill="none"
-            d="M 0,0 l 400,0 l 0,60 l-400 0 z"
+            d="M 0,130 l 400,0 l 0,60 l-400 0 z"
+            x="0"
+            y="130"
             width="400"
             height="60"
             stroke-width="1"
@@ -713,34 +582,13 @@
             fill="none"
             width="400"
             height="60"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-97"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-99"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
-              <g
-                id="g-svg-101"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon"
-              >
-                <g
-                  id="g-svg-102"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-97" fill="none" class="legend-content-group">
+            <g id="g-svg-99" fill="none" class="legend-ribbon-group">
+              <g id="g-svg-101" fill="none" class="legend-ribbon">
+                <g id="g-svg-102" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-103"
                       fill="rgba(255,192,203,1)"
@@ -749,23 +597,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-104"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-106-105)"
-                  >
+                <g id="g-svg-104" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-106-105)">
                     <path
                       id="g-svg-105"
                       fill="url(#g-pattern-2)"
                       class="ribbon-ribbon"
                       d="M 0,60 L 400,0 L 400,60 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-106"
                         fill="none"
@@ -777,30 +617,11 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-98"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            />
-            <g
-              id="g-svg-100"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-107"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-108"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-98" fill="none" class="legend-label-group" />
+            <g id="g-svg-100" fill="none" class="legend-handles-group" />
+            <g id="g-svg-107" fill="none" class="legend-indicator">
+              <g id="g-svg-108" fill="none">
+                <g>
                   <path
                     id="g-svg-110"
                     fill="rgba(38,38,38,1)"
@@ -808,16 +629,11 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-109"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-109" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
diff --git a/__tests__/integration/snapshots/Continuous3.svg b/__tests__/integration/snapshots/Continuous3.svg
index f2e01403b..702245dd2 100644
--- a/__tests__/integration/snapshots/Continuous3.svg
+++ b/__tests__/integration/snapshots/Continuous3.svg
@@ -100,41 +100,30 @@
       <use href="#g-svg-106" transform="matrix(1,0,0,1,0,130)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-111"
-        fill="none"
-        width="400"
-        height="190"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-111" fill="none" width="400" height="190">
+        <g>
           <path
             id="g-svg-112"
             fill="none"
             d="M 0,0 l 400,0 l 0,60 l-400 0 z"
+            x="0"
+            y="0"
             width="400"
             height="60"
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-113"
-          fill="none"
-          width="400"
-          height="60"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-113" fill="none" width="400" height="60">
           <g
             id="g-svg-1"
             fill="none"
             width="400"
             height="60"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-2"
                 fill="rgba(44,53,66,1)"
@@ -146,6 +135,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 title
@@ -158,25 +149,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-5"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-5" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-31"
                 fill="none"
                 transform="matrix(1,0,0,1,12.080000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-32"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-32" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-33"
                       fill="rgba(255,192,203,1)"
@@ -185,23 +166,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-34"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-36-35)"
-                  >
+                <g id="g-svg-34" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-36-35)">
                     <path
                       id="g-svg-35"
                       fill="url(#g-pattern-0)"
                       class="ribbon-ribbon"
                       d="M 0,18 L 375.84,0 L 375.84,18 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-36"
                         fill="none"
@@ -213,68 +186,52 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-4"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            />
-            <g
-              id="g-svg-6"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-4" fill="none" class="legend-label-group" />
+            <g id="g-svg-6" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-7"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,12.080000,9)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-8"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-41"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-8" fill="none" class="handle-icon-group">
+                  <g id="g-svg-41" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-42"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-43"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-44"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -283,13 +240,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-13"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-13" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-14"
                       fill="rgba(197,197,197,1)"
@@ -300,6 +252,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -309,53 +263,47 @@
               <g
                 id="g-svg-15"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,387.920013,9)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-16"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-45"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-16" fill="none" class="handle-icon-group">
+                  <g id="g-svg-45" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-46"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-47"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-48"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -364,13 +312,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-21"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-21" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-22"
                       fill="rgba(197,197,197,1)"
@@ -381,6 +324,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -388,18 +333,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-37"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-38"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-37" fill="none" class="legend-indicator">
+              <g id="g-svg-38" fill="none">
+                <g>
                   <path
                     id="g-svg-40"
                     fill="rgba(38,38,38,1)"
@@ -407,25 +343,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-39"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-39" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,65)">
+        <g>
           <path
             id="g-svg-114"
             fill="none"
-            d="M 0,0 l 400,0 l 0,60 l-400 0 z"
+            d="M 0,65 l 400,0 l 0,60 l-400 0 z"
+            x="0"
+            y="65"
             width="400"
             height="60"
             stroke="rgba(255,0,0,1)"
@@ -443,34 +376,18 @@
             fill="none"
             width="400"
             height="60"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-52"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-50" fill="none" class="legend-content-group">
+            <g id="g-svg-52" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-78"
                 fill="none"
                 transform="matrix(1,0,0,1,12.080000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-79"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-79" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-80"
                       fill="rgba(255,192,203,1)"
@@ -479,23 +396,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-81"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-83-82)"
-                  >
+                <g id="g-svg-81" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-83-82)">
                     <path
                       id="g-svg-82"
                       fill="url(#g-pattern-1)"
                       class="ribbon-ribbon"
                       d="M 0,60 L 375.84,0 L 375.84,60 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-83"
                         fill="none"
@@ -507,68 +416,52 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-51"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            />
-            <g
-              id="g-svg-53"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-51" fill="none" class="legend-label-group" />
+            <g id="g-svg-53" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-54"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,12.080000,30)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-55"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-88"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-55" fill="none" class="handle-icon-group">
+                  <g id="g-svg-88" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-89"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-90"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-91"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -577,13 +470,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-60"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-60" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-61"
                       fill="rgba(197,197,197,1)"
@@ -594,6 +482,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -603,53 +493,47 @@
               <g
                 id="g-svg-62"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,387.920013,30)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-63"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-92"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-63" fill="none" class="handle-icon-group">
+                  <g id="g-svg-92" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-93"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-94"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-95"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -658,13 +542,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-68"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-68" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-69"
                       fill="rgba(197,197,197,1)"
@@ -675,6 +554,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -682,18 +563,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-84"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-85"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-84" fill="none" class="legend-indicator">
+              <g id="g-svg-85" fill="none">
+                <g>
                   <path
                     id="g-svg-87"
                     fill="rgba(38,38,38,1)"
@@ -701,25 +573,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-86"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-86" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,130)">
+        <g>
           <path
             id="g-svg-116"
             fill="none"
-            d="M 0,0 l 400,0 l 0,60 l-400 0 z"
+            d="M 0,130 l 400,0 l 0,60 l-400 0 z"
+            x="0"
+            y="130"
             width="400"
             height="60"
             stroke="rgba(255,0,0,1)"
@@ -737,34 +606,13 @@
             fill="none"
             width="400"
             height="60"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-97"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-99"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
-              <g
-                id="g-svg-101"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon"
-              >
-                <g
-                  id="g-svg-102"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-97" fill="none" class="legend-content-group">
+            <g id="g-svg-99" fill="none" class="legend-ribbon-group">
+              <g id="g-svg-101" fill="none" class="legend-ribbon">
+                <g id="g-svg-102" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-103"
                       fill="rgba(255,192,203,1)"
@@ -773,23 +621,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-104"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-106-105)"
-                  >
+                <g id="g-svg-104" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-106-105)">
                     <path
                       id="g-svg-105"
                       fill="url(#g-pattern-2)"
                       class="ribbon-ribbon"
                       d="M 0,60 L 400,0 L 400,60 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-106"
                         fill="none"
@@ -801,30 +641,11 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-98"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            />
-            <g
-              id="g-svg-100"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-107"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-108"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-98" fill="none" class="legend-label-group" />
+            <g id="g-svg-100" fill="none" class="legend-handles-group" />
+            <g id="g-svg-107" fill="none" class="legend-indicator">
+              <g id="g-svg-108" fill="none">
+                <g>
                   <path
                     id="g-svg-110"
                     fill="rgba(38,38,38,1)"
@@ -832,16 +653,11 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-109"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-109" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
diff --git a/__tests__/integration/snapshots/Continuous4.svg b/__tests__/integration/snapshots/Continuous4.svg
index 4da838ec8..764b858b7 100644
--- a/__tests__/integration/snapshots/Continuous4.svg
+++ b/__tests__/integration/snapshots/Continuous4.svg
@@ -241,65 +241,39 @@
       <use href="#g-svg-1220" transform="matrix(1,0,0,1,415.150000,459)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-111"
-        fill="none"
-        width="805"
-        height="505"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-111" fill="none" width="805" height="505">
+        <g>
           <path
             id="g-svg-112"
             fill="none"
             d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            x="0"
+            y="0"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-113"
-          fill="none"
-          width="400"
-          height="80"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-113" fill="none" width="400" height="80">
           <g
             id="g-svg-1"
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-41"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-2" fill="none" class="legend-content-group">
+            <g id="g-svg-41" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-67"
                 fill="none"
                 transform="matrix(1,0,0,1,12.080000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-68"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-68" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-69"
                       fill="rgba(229,229,229,1)"
@@ -308,23 +282,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-70"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-72-71)"
-                  >
+                <g id="g-svg-70" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-72-71)">
                     <path
                       id="g-svg-71"
                       fill="url(#g-pattern-0)"
                       class="ribbon-ribbon"
                       d="M 0,51 L 0,0 L 375.84,0 L 375.84,51 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-72"
                         fill="none"
@@ -336,55 +302,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-5"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  />
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+            <g id="g-svg-3" fill="none" class="legend-label-group">
+              <g id="g-svg-4" fill="none" class="legend-label">
+                <g id="g-svg-5" fill="none" class="axis-grid-group" />
+                <g id="g-svg-6" fill="none" class="axis-main-group">
+                  <g id="g-svg-7" fill="none" class="axis-line-group" />
+                  <g id="g-svg-8" fill="none" class="axis-tick-group" />
+                  <g id="g-svg-9" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-10"
                       fill="none"
                       transform="matrix(1,0,0,1,12.080000,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-77"
                           fill="rgba(0,0,0,1)"
@@ -412,7 +343,7 @@
                       transform="matrix(1,0,0,1,53.840000,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-78"
                           fill="rgba(0,0,0,1)"
@@ -440,7 +371,7 @@
                       transform="matrix(1,0,0,1,95.599998,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-79"
                           fill="rgba(0,0,0,1)"
@@ -468,7 +399,7 @@
                       transform="matrix(1,0,0,1,137.360001,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-80"
                           fill="rgba(0,0,0,1)"
@@ -496,7 +427,7 @@
                       transform="matrix(1,0,0,1,179.119995,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-81"
                           fill="rgba(0,0,0,1)"
@@ -524,7 +455,7 @@
                       transform="matrix(1,0,0,1,220.880005,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-82"
                           fill="rgba(0,0,0,1)"
@@ -552,7 +483,7 @@
                       transform="matrix(1,0,0,1,262.640015,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-83"
                           fill="rgba(0,0,0,1)"
@@ -580,7 +511,7 @@
                       transform="matrix(1,0,0,1,304.399994,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-84"
                           fill="rgba(0,0,0,1)"
@@ -608,7 +539,7 @@
                       transform="matrix(1,0,0,1,346.160004,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-85"
                           fill="rgba(0,0,0,1)"
@@ -636,7 +567,7 @@
                       transform="matrix(1,0,0,1,387.920013,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-86"
                           fill="rgba(0,0,0,1)"
@@ -660,70 +591,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-30"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-30" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-42"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-42" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-43"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,12.080000,25.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-44"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-87"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-44" fill="none" class="handle-icon-group">
+                  <g id="g-svg-87" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-88"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-89"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-90"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -732,13 +647,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-49"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-49" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-50"
                       fill="rgba(197,197,197,1)"
@@ -749,6 +659,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -758,53 +670,47 @@
               <g
                 id="g-svg-51"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,387.920013,25.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-52"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-91"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-52" fill="none" class="handle-icon-group">
+                  <g id="g-svg-91" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-92"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-93"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-94"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -813,13 +719,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-57"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-57" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-58"
                       fill="rgba(197,197,197,1)"
@@ -830,6 +731,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -837,18 +740,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-73"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-74"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-73" fill="none" class="legend-indicator">
+              <g id="g-svg-74" fill="none">
+                <g>
                   <path
                     id="g-svg-76"
                     fill="rgba(38,38,38,1)"
@@ -856,25 +750,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-75"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-75" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,85)">
+        <g>
           <path
             id="g-svg-114"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 0,85 l 400,0 l 0,80 l-400 0 z"
+            x="0"
+            y="85"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -892,34 +783,18 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-96"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-135"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-96" fill="none" class="legend-content-group">
+            <g id="g-svg-135" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-161"
                 fill="none"
                 transform="matrix(1,0,0,1,12.080000,29)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-162"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-162" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-163"
                       fill="rgba(229,229,229,1)"
@@ -928,23 +803,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-164"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-166-165)"
-                  >
+                <g id="g-svg-164" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-166-165)">
                     <path
                       id="g-svg-165"
                       fill="url(#g-pattern-0)"
                       class="ribbon-ribbon"
                       d="M 0,51 L 0,0 L 375.84,0 L 375.84,51 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-166"
                         fill="none"
@@ -956,55 +823,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-97"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-98"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-99"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-100"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-101"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-102"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  />
-                  <g
-                    id="g-svg-103"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+            <g id="g-svg-97" fill="none" class="legend-label-group">
+              <g id="g-svg-98" fill="none" class="legend-label">
+                <g id="g-svg-99" fill="none" class="axis-grid-group" />
+                <g id="g-svg-100" fill="none" class="axis-main-group">
+                  <g id="g-svg-101" fill="none" class="axis-line-group" />
+                  <g id="g-svg-102" fill="none" class="axis-tick-group" />
+                  <g id="g-svg-103" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-104"
                       fill="none"
                       transform="matrix(1,0,0,1,12.080000,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-171"
                           fill="rgba(0,0,0,1)"
@@ -1032,7 +864,7 @@
                       transform="matrix(1,0,0,1,53.840000,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-172"
                           fill="rgba(0,0,0,1)"
@@ -1060,7 +892,7 @@
                       transform="matrix(1,0,0,1,95.599998,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-173"
                           fill="rgba(0,0,0,1)"
@@ -1088,7 +920,7 @@
                       transform="matrix(1,0,0,1,137.360001,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-174"
                           fill="rgba(0,0,0,1)"
@@ -1116,7 +948,7 @@
                       transform="matrix(1,0,0,1,179.119995,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-175"
                           fill="rgba(0,0,0,1)"
@@ -1144,7 +976,7 @@
                       transform="matrix(1,0,0,1,220.880005,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-176"
                           fill="rgba(0,0,0,1)"
@@ -1172,7 +1004,7 @@
                       transform="matrix(1,0,0,1,262.640015,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-177"
                           fill="rgba(0,0,0,1)"
@@ -1200,7 +1032,7 @@
                       transform="matrix(1,0,0,1,304.399994,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-178"
                           fill="rgba(0,0,0,1)"
@@ -1228,7 +1060,7 @@
                       transform="matrix(1,0,0,1,346.160004,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-179"
                           fill="rgba(0,0,0,1)"
@@ -1256,7 +1088,7 @@
                       transform="matrix(1,0,0,1,387.920013,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-180"
                           fill="rgba(0,0,0,1)"
@@ -1280,70 +1112,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-124"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-124" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-136"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-136" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-137"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,12.080000,54.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-138"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-181"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-138" fill="none" class="handle-icon-group">
+                  <g id="g-svg-181" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-182"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-183"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-184"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -1352,13 +1168,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-143"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-143" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-144"
                       fill="rgba(197,197,197,1)"
@@ -1369,6 +1180,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -1378,53 +1191,47 @@
               <g
                 id="g-svg-145"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,387.920013,54.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-146"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-185"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-146" fill="none" class="handle-icon-group">
+                  <g id="g-svg-185" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-186"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-187"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-188"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -1433,13 +1240,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-151"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-151" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-152"
                       fill="rgba(197,197,197,1)"
@@ -1450,6 +1252,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -1457,18 +1261,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-167"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-168"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-167" fill="none" class="legend-indicator">
+              <g id="g-svg-168" fill="none">
+                <g>
                   <path
                     id="g-svg-170"
                     fill="rgba(38,38,38,1)"
@@ -1476,25 +1271,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-169"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-169" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,170)">
+        <g>
           <path
             id="g-svg-116"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 0,170 l 400,0 l 0,80 l-400 0 z"
+            x="0"
+            y="170"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -1512,10 +1304,9 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-190"
                 fill="rgba(44,53,66,1)"
@@ -1527,6 +1318,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 title
@@ -1539,25 +1332,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-230"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-230" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-256"
                 fill="none"
                 transform="matrix(1,0,0,1,12.080000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-257"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-257" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-258"
                       fill="rgba(229,229,229,1)"
@@ -1566,23 +1349,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-259"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-261-260)"
-                  >
+                <g id="g-svg-259" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-261-260)">
                     <path
                       id="g-svg-260"
                       fill="url(#g-pattern-1)"
                       class="ribbon-ribbon"
                       d="M 0,24 L 0,0 L 375.84,0 L 375.84,24 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-261"
                         fill="none"
@@ -1594,55 +1369,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-192"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-193"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-194"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-195"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-196"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-197"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  />
-                  <g
-                    id="g-svg-198"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+            <g id="g-svg-192" fill="none" class="legend-label-group">
+              <g id="g-svg-193" fill="none" class="legend-label">
+                <g id="g-svg-194" fill="none" class="axis-grid-group" />
+                <g id="g-svg-195" fill="none" class="axis-main-group">
+                  <g id="g-svg-196" fill="none" class="axis-line-group" />
+                  <g id="g-svg-197" fill="none" class="axis-tick-group" />
+                  <g id="g-svg-198" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-199"
                       fill="none"
                       transform="matrix(1,0,0,1,12.080000,34)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-266"
                           fill="rgba(0,0,0,1)"
@@ -1670,7 +1410,7 @@
                       transform="matrix(1,0,0,1,53.840000,34)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-267"
                           fill="rgba(0,0,0,1)"
@@ -1698,7 +1438,7 @@
                       transform="matrix(1,0,0,1,95.599998,34)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-268"
                           fill="rgba(0,0,0,1)"
@@ -1726,7 +1466,7 @@
                       transform="matrix(1,0,0,1,137.360001,34)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-269"
                           fill="rgba(0,0,0,1)"
@@ -1754,7 +1494,7 @@
                       transform="matrix(1,0,0,1,179.119995,34)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-270"
                           fill="rgba(0,0,0,1)"
@@ -1782,7 +1522,7 @@
                       transform="matrix(1,0,0,1,220.880005,34)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-271"
                           fill="rgba(0,0,0,1)"
@@ -1810,7 +1550,7 @@
                       transform="matrix(1,0,0,1,262.640015,34)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-272"
                           fill="rgba(0,0,0,1)"
@@ -1838,7 +1578,7 @@
                       transform="matrix(1,0,0,1,304.399994,34)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-273"
                           fill="rgba(0,0,0,1)"
@@ -1866,7 +1606,7 @@
                       transform="matrix(1,0,0,1,346.160004,34)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-274"
                           fill="rgba(0,0,0,1)"
@@ -1894,7 +1634,7 @@
                       transform="matrix(1,0,0,1,387.920013,34)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-275"
                           fill="rgba(0,0,0,1)"
@@ -1918,70 +1658,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-219"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-219" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-231"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-231" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-232"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,12.080000,12)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-233"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-276"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-233" fill="none" class="handle-icon-group">
+                  <g id="g-svg-276" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-277"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-278"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-279"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -1990,13 +1714,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-238"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-238" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-239"
                       fill="rgba(197,197,197,1)"
@@ -2007,6 +1726,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -2016,53 +1737,47 @@
               <g
                 id="g-svg-240"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,387.920013,12)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-241"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-280"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-241" fill="none" class="handle-icon-group">
+                  <g id="g-svg-280" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-281"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-282"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-283"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -2071,13 +1786,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-246"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-246" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-247"
                       fill="rgba(197,197,197,1)"
@@ -2088,6 +1798,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -2095,18 +1807,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-262"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-263"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-262" fill="none" class="legend-indicator">
+              <g id="g-svg-263" fill="none">
+                <g>
                   <path
                     id="g-svg-265"
                     fill="rgba(38,38,38,1)"
@@ -2114,25 +1817,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-264"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-264" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,255)">
+        <g>
           <path
             id="g-svg-118"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 0,255 l 400,0 l 0,80 l-400 0 z"
+            x="0"
+            y="255"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -2150,10 +1850,9 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-285"
                 fill="rgba(44,53,66,1)"
@@ -2165,6 +1864,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 title
@@ -2177,25 +1878,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-325"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-325" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-351"
                 fill="none"
                 transform="matrix(1,0,0,1,12.080000,29)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-352"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-352" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-353"
                       fill="rgba(229,229,229,1)"
@@ -2204,23 +1895,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-354"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-356-355)"
-                  >
+                <g id="g-svg-354" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-356-355)">
                     <path
                       id="g-svg-355"
                       fill="url(#g-pattern-1)"
                       class="ribbon-ribbon"
                       d="M 0,24 L 0,0 L 375.84,0 L 375.84,24 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-356"
                         fill="none"
@@ -2232,55 +1915,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-287"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-288"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-289"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-290"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-291"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-292"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  />
-                  <g
-                    id="g-svg-293"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+            <g id="g-svg-287" fill="none" class="legend-label-group">
+              <g id="g-svg-288" fill="none" class="legend-label">
+                <g id="g-svg-289" fill="none" class="axis-grid-group" />
+                <g id="g-svg-290" fill="none" class="axis-main-group">
+                  <g id="g-svg-291" fill="none" class="axis-line-group" />
+                  <g id="g-svg-292" fill="none" class="axis-tick-group" />
+                  <g id="g-svg-293" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-294"
                       fill="none"
                       transform="matrix(1,0,0,1,12.080000,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-361"
                           fill="rgba(0,0,0,1)"
@@ -2308,7 +1956,7 @@
                       transform="matrix(1,0,0,1,53.840000,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-362"
                           fill="rgba(0,0,0,1)"
@@ -2336,7 +1984,7 @@
                       transform="matrix(1,0,0,1,95.599998,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-363"
                           fill="rgba(0,0,0,1)"
@@ -2364,7 +2012,7 @@
                       transform="matrix(1,0,0,1,137.360001,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-364"
                           fill="rgba(0,0,0,1)"
@@ -2392,7 +2040,7 @@
                       transform="matrix(1,0,0,1,179.119995,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-365"
                           fill="rgba(0,0,0,1)"
@@ -2420,7 +2068,7 @@
                       transform="matrix(1,0,0,1,220.880005,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-366"
                           fill="rgba(0,0,0,1)"
@@ -2448,7 +2096,7 @@
                       transform="matrix(1,0,0,1,262.640015,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-367"
                           fill="rgba(0,0,0,1)"
@@ -2476,7 +2124,7 @@
                       transform="matrix(1,0,0,1,304.399994,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-368"
                           fill="rgba(0,0,0,1)"
@@ -2504,7 +2152,7 @@
                       transform="matrix(1,0,0,1,346.160004,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-369"
                           fill="rgba(0,0,0,1)"
@@ -2532,7 +2180,7 @@
                       transform="matrix(1,0,0,1,387.920013,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-370"
                           fill="rgba(0,0,0,1)"
@@ -2556,70 +2204,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-314"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-314" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-326"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-326" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-327"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,12.080000,41)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-328"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-371"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-328" fill="none" class="handle-icon-group">
+                  <g id="g-svg-371" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-372"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-373"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-374"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -2628,13 +2260,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-333"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-333" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-334"
                       fill="rgba(197,197,197,1)"
@@ -2645,6 +2272,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -2654,53 +2283,47 @@
               <g
                 id="g-svg-335"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,387.920013,41)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-336"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-375"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-336" fill="none" class="handle-icon-group">
+                  <g id="g-svg-375" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-376"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-377"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-378"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -2709,13 +2332,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-341"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-341" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-342"
                       fill="rgba(197,197,197,1)"
@@ -2726,6 +2344,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -2733,18 +2353,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-357"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-358"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-357" fill="none" class="legend-indicator">
+              <g id="g-svg-358" fill="none">
+                <g>
                   <path
                     id="g-svg-360"
                     fill="rgba(38,38,38,1)"
@@ -2752,25 +2363,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-359"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-359" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,340)">
+        <g>
           <path
             id="g-svg-120"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 0,340 l 400,0 l 0,80 l-400 0 z"
+            x="0"
+            y="340"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -2788,34 +2396,18 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-380"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-419"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-380" fill="none" class="legend-content-group">
+            <g id="g-svg-419" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-421"
                 fill="none"
                 transform="matrix(1,0,0,1,10.150000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-422"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-422" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-423"
                       fill="rgba(229,229,229,1)"
@@ -2824,23 +2416,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-424"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-426-425)"
-                  >
+                <g id="g-svg-424" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-426-425)">
                     <path
                       id="g-svg-425"
                       fill="url(#g-pattern-2)"
                       class="ribbon-ribbon"
                       d="M 0,51 L 0,0 L 379.7,0 L 379.7,51 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-426"
                         fill="none"
@@ -2852,55 +2436,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-381"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-382"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-383"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-384"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-385"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-386"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  />
-                  <g
-                    id="g-svg-387"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+            <g id="g-svg-381" fill="none" class="legend-label-group">
+              <g id="g-svg-382" fill="none" class="legend-label">
+                <g id="g-svg-383" fill="none" class="axis-grid-group" />
+                <g id="g-svg-384" fill="none" class="axis-main-group">
+                  <g id="g-svg-385" fill="none" class="axis-line-group" />
+                  <g id="g-svg-386" fill="none" class="axis-tick-group" />
+                  <g id="g-svg-387" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-388"
                       fill="none"
                       transform="matrix(1,0,0,1,10.150000,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-431"
                           fill="rgba(0,0,0,1)"
@@ -2928,7 +2477,7 @@
                       transform="matrix(1,0,0,1,52.338890,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-432"
                           fill="rgba(0,0,0,1)"
@@ -2956,7 +2505,7 @@
                       transform="matrix(1,0,0,1,94.527779,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-433"
                           fill="rgba(0,0,0,1)"
@@ -2984,7 +2533,7 @@
                       transform="matrix(1,0,0,1,136.716660,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-434"
                           fill="rgba(0,0,0,1)"
@@ -3012,7 +2561,7 @@
                       transform="matrix(1,0,0,1,178.905548,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-435"
                           fill="rgba(0,0,0,1)"
@@ -3040,7 +2589,7 @@
                       transform="matrix(1,0,0,1,221.094452,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-436"
                           fill="rgba(0,0,0,1)"
@@ -3068,7 +2617,7 @@
                       transform="matrix(1,0,0,1,263.283325,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-437"
                           fill="rgba(0,0,0,1)"
@@ -3096,7 +2645,7 @@
                       transform="matrix(1,0,0,1,305.472229,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-438"
                           fill="rgba(0,0,0,1)"
@@ -3124,7 +2673,7 @@
                       transform="matrix(1,0,0,1,347.661102,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-439"
                           fill="rgba(0,0,0,1)"
@@ -3152,7 +2701,7 @@
                       transform="matrix(1,0,0,1,389.850006,61)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-440"
                           fill="rgba(0,0,0,1)"
@@ -3176,32 +2725,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-408"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-408" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-420"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-427"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-428"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-420" fill="none" class="legend-handles-group" />
+            <g id="g-svg-427" fill="none" class="legend-indicator">
+              <g id="g-svg-428" fill="none">
+                <g>
                   <path
                     id="g-svg-430"
                     fill="rgba(38,38,38,1)"
@@ -3209,25 +2739,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-429"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-429" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,425)">
+        <g>
           <path
             id="g-svg-122"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 0,425 l 400,0 l 0,80 l-400 0 z"
+            x="0"
+            y="425"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -3245,34 +2772,18 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-442"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-481"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-442" fill="none" class="legend-content-group">
+            <g id="g-svg-481" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-483"
                 fill="none"
                 transform="matrix(1,0,0,1,10.150000,29)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-484"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-484" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-485"
                       fill="rgba(229,229,229,1)"
@@ -3281,23 +2792,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-486"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-488-487)"
-                  >
+                <g id="g-svg-486" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-488-487)">
                     <path
                       id="g-svg-487"
                       fill="url(#g-pattern-2)"
                       class="ribbon-ribbon"
                       d="M 0,51 L 0,0 L 379.7,0 L 379.7,51 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-488"
                         fill="none"
@@ -3309,55 +2812,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-443"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-444"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-445"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-446"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-447"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-448"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  />
-                  <g
-                    id="g-svg-449"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+            <g id="g-svg-443" fill="none" class="legend-label-group">
+              <g id="g-svg-444" fill="none" class="legend-label">
+                <g id="g-svg-445" fill="none" class="axis-grid-group" />
+                <g id="g-svg-446" fill="none" class="axis-main-group">
+                  <g id="g-svg-447" fill="none" class="axis-line-group" />
+                  <g id="g-svg-448" fill="none" class="axis-tick-group" />
+                  <g id="g-svg-449" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-450"
                       fill="none"
                       transform="matrix(1,0,0,1,10.150000,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-493"
                           fill="rgba(0,0,0,1)"
@@ -3385,7 +2853,7 @@
                       transform="matrix(1,0,0,1,52.338890,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-494"
                           fill="rgba(0,0,0,1)"
@@ -3413,7 +2881,7 @@
                       transform="matrix(1,0,0,1,94.527779,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-495"
                           fill="rgba(0,0,0,1)"
@@ -3441,7 +2909,7 @@
                       transform="matrix(1,0,0,1,136.716660,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-496"
                           fill="rgba(0,0,0,1)"
@@ -3469,7 +2937,7 @@
                       transform="matrix(1,0,0,1,178.905548,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-497"
                           fill="rgba(0,0,0,1)"
@@ -3497,7 +2965,7 @@
                       transform="matrix(1,0,0,1,221.094452,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-498"
                           fill="rgba(0,0,0,1)"
@@ -3525,7 +2993,7 @@
                       transform="matrix(1,0,0,1,263.283325,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-499"
                           fill="rgba(0,0,0,1)"
@@ -3553,7 +3021,7 @@
                       transform="matrix(1,0,0,1,305.472229,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-500"
                           fill="rgba(0,0,0,1)"
@@ -3581,7 +3049,7 @@
                       transform="matrix(1,0,0,1,347.661102,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-501"
                           fill="rgba(0,0,0,1)"
@@ -3609,7 +3077,7 @@
                       transform="matrix(1,0,0,1,389.850006,19)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-502"
                           fill="rgba(0,0,0,1)"
@@ -3633,32 +3101,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-470"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-470" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-482"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-489"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-490"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-482" fill="none" class="legend-handles-group" />
+            <g id="g-svg-489" fill="none" class="legend-indicator">
+              <g id="g-svg-490" fill="none">
+                <g>
                   <path
                     id="g-svg-492"
                     fill="rgba(38,38,38,1)"
@@ -3666,25 +3115,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-491"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-491" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,405,0)">
+        <g>
           <path
             id="g-svg-124"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 405,0 l 400,0 l 0,80 l-400 0 z"
+            x="405"
+            y="0"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -3702,34 +3148,18 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-504"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-573"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-504" fill="none" class="legend-content-group">
+            <g id="g-svg-573" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-599"
                 fill="none"
                 transform="matrix(1,0,0,1,12.080000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-600"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-600" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-601"
                       fill="rgba(229,229,229,1)"
@@ -3738,23 +3168,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-602"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-604-603)"
-                  >
+                <g id="g-svg-602" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-604-603)">
                     <path
                       id="g-svg-603"
                       fill="url(#g-pattern-3)"
                       class="ribbon-ribbon"
                       d="M 0,46 L 0,0 L 375.84000000000003,0 L 375.84000000000003,46 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-604"
                         fill="none"
@@ -3766,56 +3188,26 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-505"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-506"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-507"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-508"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-509"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-510"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-505" fill="none" class="legend-label-group">
+              <g id="g-svg-506" fill="none" class="legend-label">
+                <g id="g-svg-507" fill="none" class="axis-grid-group" />
+                <g id="g-svg-508" fill="none" class="axis-main-group">
+                  <g id="g-svg-509" fill="none" class="axis-line-group" />
+                  <g id="g-svg-510" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-511"
                       fill="none"
                       transform="matrix(1,0,0,1,12.080000,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-609"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -3828,14 +3220,14 @@
                       transform="matrix(1,0,0,1,53.840000,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-610"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -3848,14 +3240,14 @@
                       transform="matrix(1,0,0,1,95.599998,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-611"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -3868,14 +3260,14 @@
                       transform="matrix(1,0,0,1,137.360001,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-612"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -3888,14 +3280,14 @@
                       transform="matrix(1,0,0,1,179.119995,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-613"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -3908,14 +3300,14 @@
                       transform="matrix(1,0,0,1,220.880005,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-614"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -3928,14 +3320,14 @@
                       transform="matrix(1,0,0,1,262.640015,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-615"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -3948,14 +3340,14 @@
                       transform="matrix(1,0,0,1,304.399994,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-616"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -3968,14 +3360,14 @@
                       transform="matrix(1,0,0,1,346.160004,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-617"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -3988,14 +3380,14 @@
                       transform="matrix(1,0,0,1,387.920013,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-618"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -4003,19 +3395,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-531"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-531" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-532"
                       fill="none"
                       transform="matrix(1,0,0,1,12.080000,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-619"
                           fill="rgba(0,0,0,1)"
@@ -4043,7 +3430,7 @@
                       transform="matrix(1,0,0,1,53.840000,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-620"
                           fill="rgba(0,0,0,1)"
@@ -4071,7 +3458,7 @@
                       transform="matrix(1,0,0,1,95.599998,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-621"
                           fill="rgba(0,0,0,1)"
@@ -4099,7 +3486,7 @@
                       transform="matrix(1,0,0,1,137.360001,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-622"
                           fill="rgba(0,0,0,1)"
@@ -4127,7 +3514,7 @@
                       transform="matrix(1,0,0,1,179.119995,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-623"
                           fill="rgba(0,0,0,1)"
@@ -4155,7 +3542,7 @@
                       transform="matrix(1,0,0,1,220.880005,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-624"
                           fill="rgba(0,0,0,1)"
@@ -4183,7 +3570,7 @@
                       transform="matrix(1,0,0,1,262.640015,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-625"
                           fill="rgba(0,0,0,1)"
@@ -4211,7 +3598,7 @@
                       transform="matrix(1,0,0,1,304.399994,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-626"
                           fill="rgba(0,0,0,1)"
@@ -4239,7 +3626,7 @@
                       transform="matrix(1,0,0,1,346.160004,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-627"
                           fill="rgba(0,0,0,1)"
@@ -4267,7 +3654,7 @@
                       transform="matrix(1,0,0,1,387.920013,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-628"
                           fill="rgba(0,0,0,1)"
@@ -4291,70 +3678,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-552"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-552" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-574"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-574" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-575"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,12.080000,23)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-576"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-629"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-576" fill="none" class="handle-icon-group">
+                  <g id="g-svg-629" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-630"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-631"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-632"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -4363,13 +3734,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-581"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-581" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-582"
                       fill="rgba(197,197,197,1)"
@@ -4380,6 +3746,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -4389,53 +3757,47 @@
               <g
                 id="g-svg-583"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,387.920013,23)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-584"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-633"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-584" fill="none" class="handle-icon-group">
+                  <g id="g-svg-633" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-634"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-635"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-636"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -4444,13 +3806,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-589"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-589" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-590"
                       fill="rgba(197,197,197,1)"
@@ -4461,6 +3818,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -4468,18 +3827,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-605"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-606"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-605" fill="none" class="legend-indicator">
+              <g id="g-svg-606" fill="none">
+                <g>
                   <path
                     id="g-svg-608"
                     fill="rgba(38,38,38,1)"
@@ -4487,25 +3837,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-607"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-607" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,405,85)">
+        <g>
           <path
             id="g-svg-126"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 405,85 l 400,0 l 0,80 l-400 0 z"
+            x="405"
+            y="85"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -4523,34 +3870,18 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-638"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-707"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-638" fill="none" class="legend-content-group">
+            <g id="g-svg-707" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-733"
                 fill="none"
                 transform="matrix(1,0,0,1,12.080000,34)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-734"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-734" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-735"
                       fill="rgba(229,229,229,1)"
@@ -4559,23 +3890,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-736"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-738-737)"
-                  >
+                <g id="g-svg-736" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-738-737)">
                     <path
                       id="g-svg-737"
                       fill="url(#g-pattern-3)"
                       class="ribbon-ribbon"
                       d="M 0,46 L 0,0 L 375.84000000000003,0 L 375.84000000000003,46 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-738"
                         fill="none"
@@ -4587,56 +3910,26 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-639"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-640"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-641"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-642"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-643"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-644"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-639" fill="none" class="legend-label-group">
+              <g id="g-svg-640" fill="none" class="legend-label">
+                <g id="g-svg-641" fill="none" class="axis-grid-group" />
+                <g id="g-svg-642" fill="none" class="axis-main-group">
+                  <g id="g-svg-643" fill="none" class="axis-line-group" />
+                  <g id="g-svg-644" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-645"
                       fill="none"
                       transform="matrix(1,0,0,1,12.080000,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-743"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -4649,14 +3942,14 @@
                       transform="matrix(1,0,0,1,53.840000,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-744"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -4669,14 +3962,14 @@
                       transform="matrix(1,0,0,1,95.599998,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-745"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -4689,14 +3982,14 @@
                       transform="matrix(1,0,0,1,137.360001,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-746"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -4709,14 +4002,14 @@
                       transform="matrix(1,0,0,1,179.119995,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-747"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -4729,14 +4022,14 @@
                       transform="matrix(1,0,0,1,220.880005,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-748"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -4749,14 +4042,14 @@
                       transform="matrix(1,0,0,1,262.640015,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-749"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -4769,14 +4062,14 @@
                       transform="matrix(1,0,0,1,304.399994,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-750"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -4789,14 +4082,14 @@
                       transform="matrix(1,0,0,1,346.160004,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-751"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -4809,14 +4102,14 @@
                       transform="matrix(1,0,0,1,387.920013,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-752"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -4824,19 +4117,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-665"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-665" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-666"
                       fill="none"
                       transform="matrix(1,0,0,1,12.080000,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-753"
                           fill="rgba(0,0,0,1)"
@@ -4864,7 +4152,7 @@
                       transform="matrix(1,0,0,1,53.840000,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-754"
                           fill="rgba(0,0,0,1)"
@@ -4892,7 +4180,7 @@
                       transform="matrix(1,0,0,1,95.599998,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-755"
                           fill="rgba(0,0,0,1)"
@@ -4920,7 +4208,7 @@
                       transform="matrix(1,0,0,1,137.360001,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-756"
                           fill="rgba(0,0,0,1)"
@@ -4948,7 +4236,7 @@
                       transform="matrix(1,0,0,1,179.119995,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-757"
                           fill="rgba(0,0,0,1)"
@@ -4976,7 +4264,7 @@
                       transform="matrix(1,0,0,1,220.880005,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-758"
                           fill="rgba(0,0,0,1)"
@@ -5004,7 +4292,7 @@
                       transform="matrix(1,0,0,1,262.640015,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-759"
                           fill="rgba(0,0,0,1)"
@@ -5032,7 +4320,7 @@
                       transform="matrix(1,0,0,1,304.399994,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-760"
                           fill="rgba(0,0,0,1)"
@@ -5060,7 +4348,7 @@
                       transform="matrix(1,0,0,1,346.160004,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-761"
                           fill="rgba(0,0,0,1)"
@@ -5088,7 +4376,7 @@
                       transform="matrix(1,0,0,1,387.920013,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-762"
                           fill="rgba(0,0,0,1)"
@@ -5112,70 +4400,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-686"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-686" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-708"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-708" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-709"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,12.080000,57)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-710"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-763"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-710" fill="none" class="handle-icon-group">
+                  <g id="g-svg-763" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-764"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-765"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-766"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -5184,13 +4456,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-715"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-715" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-716"
                       fill="rgba(197,197,197,1)"
@@ -5201,6 +4468,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -5210,53 +4479,47 @@
               <g
                 id="g-svg-717"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,387.920013,57)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-718"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-767"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-718" fill="none" class="handle-icon-group">
+                  <g id="g-svg-767" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-768"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-769"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-770"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -5265,13 +4528,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-723"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-723" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-724"
                       fill="rgba(197,197,197,1)"
@@ -5282,6 +4540,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -5289,18 +4549,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-739"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-740"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-739" fill="none" class="legend-indicator">
+              <g id="g-svg-740" fill="none">
+                <g>
                   <path
                     id="g-svg-742"
                     fill="rgba(38,38,38,1)"
@@ -5308,25 +4559,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-741"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-741" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,405,170)">
+        <g>
           <path
             id="g-svg-128"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 405,170 l 400,0 l 0,80 l-400 0 z"
+            x="405"
+            y="170"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -5344,10 +4592,9 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-772"
                 fill="rgba(44,53,66,1)"
@@ -5359,6 +4606,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 title
@@ -5371,25 +4620,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-842"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-842" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-868"
                 fill="none"
                 transform="matrix(1,0,0,1,12.080000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-869"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-869" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-870"
                       fill="rgba(229,229,229,1)"
@@ -5398,23 +4637,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-871"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-873-872)"
-                  >
+                <g id="g-svg-871" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-873-872)">
                     <path
                       id="g-svg-872"
                       fill="url(#g-pattern-4)"
                       class="ribbon-ribbon"
                       d="M 0,19 L 0,0 L 375.84000000000003,0 L 375.84000000000003,19 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-873"
                         fill="none"
@@ -5426,56 +4657,26 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-774"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-775"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-776"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-777"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-778"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-779"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-774" fill="none" class="legend-label-group">
+              <g id="g-svg-775" fill="none" class="legend-label">
+                <g id="g-svg-776" fill="none" class="axis-grid-group" />
+                <g id="g-svg-777" fill="none" class="axis-main-group">
+                  <g id="g-svg-778" fill="none" class="axis-line-group" />
+                  <g id="g-svg-779" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-780"
                       fill="none"
                       transform="matrix(1,0,0,1,12.080000,19)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-878"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -5488,14 +4689,14 @@
                       transform="matrix(1,0,0,1,53.840000,19)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-879"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -5508,14 +4709,14 @@
                       transform="matrix(1,0,0,1,95.599998,19)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-880"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -5528,14 +4729,14 @@
                       transform="matrix(1,0,0,1,137.360001,19)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-881"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -5548,14 +4749,14 @@
                       transform="matrix(1,0,0,1,179.119995,19)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-882"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -5568,14 +4769,14 @@
                       transform="matrix(1,0,0,1,220.880005,19)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-883"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -5588,14 +4789,14 @@
                       transform="matrix(1,0,0,1,262.640015,19)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-884"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -5608,14 +4809,14 @@
                       transform="matrix(1,0,0,1,304.399994,19)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-885"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -5628,14 +4829,14 @@
                       transform="matrix(1,0,0,1,346.160004,19)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-886"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -5648,14 +4849,14 @@
                       transform="matrix(1,0,0,1,387.920013,19)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-887"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -5663,19 +4864,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-800"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-800" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-801"
                       fill="none"
                       transform="matrix(1,0,0,1,12.080000,29)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-888"
                           fill="rgba(0,0,0,1)"
@@ -5703,7 +4899,7 @@
                       transform="matrix(1,0,0,1,53.840000,29)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-889"
                           fill="rgba(0,0,0,1)"
@@ -5731,7 +4927,7 @@
                       transform="matrix(1,0,0,1,95.599998,29)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-890"
                           fill="rgba(0,0,0,1)"
@@ -5759,7 +4955,7 @@
                       transform="matrix(1,0,0,1,137.360001,29)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-891"
                           fill="rgba(0,0,0,1)"
@@ -5787,7 +4983,7 @@
                       transform="matrix(1,0,0,1,179.119995,29)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-892"
                           fill="rgba(0,0,0,1)"
@@ -5815,7 +5011,7 @@
                       transform="matrix(1,0,0,1,220.880005,29)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-893"
                           fill="rgba(0,0,0,1)"
@@ -5843,7 +5039,7 @@
                       transform="matrix(1,0,0,1,262.640015,29)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-894"
                           fill="rgba(0,0,0,1)"
@@ -5871,7 +5067,7 @@
                       transform="matrix(1,0,0,1,304.399994,29)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-895"
                           fill="rgba(0,0,0,1)"
@@ -5899,7 +5095,7 @@
                       transform="matrix(1,0,0,1,346.160004,29)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-896"
                           fill="rgba(0,0,0,1)"
@@ -5927,7 +5123,7 @@
                       transform="matrix(1,0,0,1,387.920013,29)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-897"
                           fill="rgba(0,0,0,1)"
@@ -5951,70 +5147,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-821"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-821" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-843"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-843" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-844"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,12.080000,9.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-845"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-898"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-845" fill="none" class="handle-icon-group">
+                  <g id="g-svg-898" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-899"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-900"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-901"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -6023,13 +5203,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-850"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-850" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-851"
                       fill="rgba(197,197,197,1)"
@@ -6040,6 +5215,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -6049,53 +5226,47 @@
               <g
                 id="g-svg-852"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,387.920013,9.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-853"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-902"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-853" fill="none" class="handle-icon-group">
+                  <g id="g-svg-902" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-903"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-904"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-905"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -6104,13 +5275,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-858"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-858" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-859"
                       fill="rgba(197,197,197,1)"
@@ -6121,6 +5287,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -6128,18 +5296,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-874"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-875"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-874" fill="none" class="legend-indicator">
+              <g id="g-svg-875" fill="none">
+                <g>
                   <path
                     id="g-svg-877"
                     fill="rgba(38,38,38,1)"
@@ -6147,25 +5306,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-876"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-876" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,405,255)">
+        <g>
           <path
             id="g-svg-130"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 405,255 l 400,0 l 0,80 l-400 0 z"
+            x="405"
+            y="255"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -6183,10 +5339,9 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-907"
                 fill="rgba(44,53,66,1)"
@@ -6198,6 +5353,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 title
@@ -6210,25 +5367,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-977"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-977" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-1003"
                 fill="none"
                 transform="matrix(1,0,0,1,12.080000,34)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-1004"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-1004" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-1005"
                       fill="rgba(229,229,229,1)"
@@ -6237,23 +5384,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-1006"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-1008-1007)"
-                  >
+                <g id="g-svg-1006" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-1008-1007)">
                     <path
                       id="g-svg-1007"
                       fill="url(#g-pattern-4)"
                       class="ribbon-ribbon"
                       d="M 0,19 L 0,0 L 375.84000000000003,0 L 375.84000000000003,19 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-1008"
                         fill="none"
@@ -6265,56 +5404,26 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-909"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-910"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-911"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-912"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-913"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-914"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-909" fill="none" class="legend-label-group">
+              <g id="g-svg-910" fill="none" class="legend-label">
+                <g id="g-svg-911" fill="none" class="axis-grid-group" />
+                <g id="g-svg-912" fill="none" class="axis-main-group">
+                  <g id="g-svg-913" fill="none" class="axis-line-group" />
+                  <g id="g-svg-914" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-915"
                       fill="none"
                       transform="matrix(1,0,0,1,12.080000,53)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-1013"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -6327,14 +5436,14 @@
                       transform="matrix(1,0,0,1,53.840000,53)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-1014"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -6347,14 +5456,14 @@
                       transform="matrix(1,0,0,1,95.599998,53)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-1015"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -6367,14 +5476,14 @@
                       transform="matrix(1,0,0,1,137.360001,53)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-1016"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -6387,14 +5496,14 @@
                       transform="matrix(1,0,0,1,179.119995,53)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-1017"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -6407,14 +5516,14 @@
                       transform="matrix(1,0,0,1,220.880005,53)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-1018"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -6427,14 +5536,14 @@
                       transform="matrix(1,0,0,1,262.640015,53)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-1019"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -6447,14 +5556,14 @@
                       transform="matrix(1,0,0,1,304.399994,53)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-1020"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -6467,14 +5576,14 @@
                       transform="matrix(1,0,0,1,346.160004,53)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-1021"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -6487,14 +5596,14 @@
                       transform="matrix(1,0,0,1,387.920013,53)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-19)">
+                      <g>
                         <line
                           id="g-svg-1022"
                           fill="none"
                           x1="0"
-                          y1="19"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-19"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -6502,19 +5611,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-935"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-935" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-936"
                       fill="none"
                       transform="matrix(1,0,0,1,12.080000,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1023"
                           fill="rgba(0,0,0,1)"
@@ -6542,7 +5646,7 @@
                       transform="matrix(1,0,0,1,53.840000,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1024"
                           fill="rgba(0,0,0,1)"
@@ -6570,7 +5674,7 @@
                       transform="matrix(1,0,0,1,95.599998,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1025"
                           fill="rgba(0,0,0,1)"
@@ -6598,7 +5702,7 @@
                       transform="matrix(1,0,0,1,137.360001,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1026"
                           fill="rgba(0,0,0,1)"
@@ -6626,7 +5730,7 @@
                       transform="matrix(1,0,0,1,179.119995,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1027"
                           fill="rgba(0,0,0,1)"
@@ -6654,7 +5758,7 @@
                       transform="matrix(1,0,0,1,220.880005,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1028"
                           fill="rgba(0,0,0,1)"
@@ -6682,7 +5786,7 @@
                       transform="matrix(1,0,0,1,262.640015,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1029"
                           fill="rgba(0,0,0,1)"
@@ -6710,7 +5814,7 @@
                       transform="matrix(1,0,0,1,304.399994,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1030"
                           fill="rgba(0,0,0,1)"
@@ -6738,7 +5842,7 @@
                       transform="matrix(1,0,0,1,346.160004,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1031"
                           fill="rgba(0,0,0,1)"
@@ -6766,7 +5870,7 @@
                       transform="matrix(1,0,0,1,387.920013,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1032"
                           fill="rgba(0,0,0,1)"
@@ -6790,70 +5894,60 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-956"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-956" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-978"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-978" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-979"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,12.080000,43.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-980"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
+                <g id="g-svg-980" fill="none" class="handle-icon-group">
                   <g
                     id="g-svg-1033"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
+                    x="0"
+                    y="0"
                     class="handle-icon"
                   >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                    <g>
                       <path
                         id="g-svg-1034"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-1035"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-1036"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -6862,13 +5956,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-985"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-985" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-986"
                       fill="rgba(197,197,197,1)"
@@ -6879,6 +5968,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -6888,53 +5979,53 @@
               <g
                 id="g-svg-987"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,387.920013,43.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-988"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
+                <g id="g-svg-988" fill="none" class="handle-icon-group">
                   <g
                     id="g-svg-1037"
                     fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
+                    x="0"
+                    y="0"
                     class="handle-icon"
                   >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                    <g>
                       <path
                         id="g-svg-1038"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-1039"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-1040"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -6943,13 +6034,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-993"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-993" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-994"
                       fill="rgba(197,197,197,1)"
@@ -6960,6 +6046,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -6967,18 +6055,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1009"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-1010"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-1009" fill="none" class="legend-indicator">
+              <g id="g-svg-1010" fill="none">
+                <g>
                   <path
                     id="g-svg-1012"
                     fill="rgba(38,38,38,1)"
@@ -6986,25 +6065,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-1011"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-1011" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,405,340)">
+        <g>
           <path
             id="g-svg-132"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 405,340 l 400,0 l 0,80 l-400 0 z"
+            x="405"
+            y="340"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -7022,34 +6098,18 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-1042"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-1111"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-1042" fill="none" class="legend-content-group">
+            <g id="g-svg-1111" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-1113"
                 fill="none"
                 transform="matrix(1,0,0,1,10.150000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-1114"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-1114" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-1115"
                       fill="rgba(229,229,229,1)"
@@ -7058,23 +6118,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-1116"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-1118-1117)"
-                  >
+                <g id="g-svg-1116" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-1118-1117)">
                     <path
                       id="g-svg-1117"
                       fill="url(#g-pattern-5)"
                       class="ribbon-ribbon"
                       d="M 0,46 L 0,0 L 379.70000000000005,0 L 379.70000000000005,46 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-1118"
                         fill="none"
@@ -7086,56 +6138,26 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1043"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-1044"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-1045"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-1046"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-1047"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-1048"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-1043" fill="none" class="legend-label-group">
+              <g id="g-svg-1044" fill="none" class="legend-label">
+                <g id="g-svg-1045" fill="none" class="axis-grid-group" />
+                <g id="g-svg-1046" fill="none" class="axis-main-group">
+                  <g id="g-svg-1047" fill="none" class="axis-line-group" />
+                  <g id="g-svg-1048" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-1049"
                       fill="none"
                       transform="matrix(1,0,0,1,10.150000,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1123"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7148,14 +6170,14 @@
                       transform="matrix(1,0,0,1,52.338890,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1124"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7168,14 +6190,14 @@
                       transform="matrix(1,0,0,1,94.527779,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1125"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7188,14 +6210,14 @@
                       transform="matrix(1,0,0,1,136.716660,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1126"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7208,14 +6230,14 @@
                       transform="matrix(1,0,0,1,178.905548,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1127"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7228,14 +6250,14 @@
                       transform="matrix(1,0,0,1,221.094452,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1128"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7248,14 +6270,14 @@
                       transform="matrix(1,0,0,1,263.283325,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1129"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7268,14 +6290,14 @@
                       transform="matrix(1,0,0,1,305.472229,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1130"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7288,14 +6310,14 @@
                       transform="matrix(1,0,0,1,347.661102,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1131"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7308,14 +6330,14 @@
                       transform="matrix(1,0,0,1,389.850006,46)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1132"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7323,19 +6345,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-1069"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-1069" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-1070"
                       fill="none"
                       transform="matrix(1,0,0,1,10.150000,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1133"
                           fill="rgba(0,0,0,1)"
@@ -7363,7 +6380,7 @@
                       transform="matrix(1,0,0,1,52.338890,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1134"
                           fill="rgba(0,0,0,1)"
@@ -7391,7 +6408,7 @@
                       transform="matrix(1,0,0,1,94.527779,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1135"
                           fill="rgba(0,0,0,1)"
@@ -7419,7 +6436,7 @@
                       transform="matrix(1,0,0,1,136.716660,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1136"
                           fill="rgba(0,0,0,1)"
@@ -7447,7 +6464,7 @@
                       transform="matrix(1,0,0,1,178.905548,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1137"
                           fill="rgba(0,0,0,1)"
@@ -7475,7 +6492,7 @@
                       transform="matrix(1,0,0,1,221.094452,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1138"
                           fill="rgba(0,0,0,1)"
@@ -7503,7 +6520,7 @@
                       transform="matrix(1,0,0,1,263.283325,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1139"
                           fill="rgba(0,0,0,1)"
@@ -7531,7 +6548,7 @@
                       transform="matrix(1,0,0,1,305.472229,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1140"
                           fill="rgba(0,0,0,1)"
@@ -7559,7 +6576,7 @@
                       transform="matrix(1,0,0,1,347.661102,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1141"
                           fill="rgba(0,0,0,1)"
@@ -7587,7 +6604,7 @@
                       transform="matrix(1,0,0,1,389.850006,56)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1142"
                           fill="rgba(0,0,0,1)"
@@ -7611,32 +6628,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-1090"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-1090" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-1112"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-1119"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-1120"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-1112" fill="none" class="legend-handles-group" />
+            <g id="g-svg-1119" fill="none" class="legend-indicator">
+              <g id="g-svg-1120" fill="none">
+                <g>
                   <path
                     id="g-svg-1122"
                     fill="rgba(38,38,38,1)"
@@ -7644,25 +6642,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-1121"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-1121" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,405,425)">
+        <g>
           <path
             id="g-svg-134"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 405,425 l 400,0 l 0,80 l-400 0 z"
+            x="405"
+            y="425"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -7680,34 +6675,18 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-1144"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-1213"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-1144" fill="none" class="legend-content-group">
+            <g id="g-svg-1213" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-1215"
                 fill="none"
                 transform="matrix(1,0,0,1,10.150000,34)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-1216"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-1216" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-1217"
                       fill="rgba(229,229,229,1)"
@@ -7716,23 +6695,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-1218"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-1220-1219)"
-                  >
+                <g id="g-svg-1218" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-1220-1219)">
                     <path
                       id="g-svg-1219"
                       fill="url(#g-pattern-5)"
                       class="ribbon-ribbon"
                       d="M 0,46 L 0,0 L 379.70000000000005,0 L 379.70000000000005,46 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-1220"
                         fill="none"
@@ -7744,56 +6715,26 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1145"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-1146"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-1147"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-1148"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-1149"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-1150"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-1145" fill="none" class="legend-label-group">
+              <g id="g-svg-1146" fill="none" class="legend-label">
+                <g id="g-svg-1147" fill="none" class="axis-grid-group" />
+                <g id="g-svg-1148" fill="none" class="axis-main-group">
+                  <g id="g-svg-1149" fill="none" class="axis-line-group" />
+                  <g id="g-svg-1150" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-1151"
                       fill="none"
                       transform="matrix(1,0,0,1,10.150000,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1225"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7806,14 +6747,14 @@
                       transform="matrix(1,0,0,1,52.338890,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1226"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7826,14 +6767,14 @@
                       transform="matrix(1,0,0,1,94.527779,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1227"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7846,14 +6787,14 @@
                       transform="matrix(1,0,0,1,136.716660,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1228"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7866,14 +6807,14 @@
                       transform="matrix(1,0,0,1,178.905548,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1229"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7886,14 +6827,14 @@
                       transform="matrix(1,0,0,1,221.094452,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1230"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7906,14 +6847,14 @@
                       transform="matrix(1,0,0,1,263.283325,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1231"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7926,14 +6867,14 @@
                       transform="matrix(1,0,0,1,305.472229,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1232"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7946,14 +6887,14 @@
                       transform="matrix(1,0,0,1,347.661102,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1233"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7966,14 +6907,14 @@
                       transform="matrix(1,0,0,1,389.850006,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-46)">
+                      <g>
                         <line
                           id="g-svg-1234"
                           fill="none"
                           x1="0"
-                          y1="46"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-46"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -7981,19 +6922,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-1171"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-1171" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-1172"
                       fill="none"
                       transform="matrix(1,0,0,1,10.150000,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1235"
                           fill="rgba(0,0,0,1)"
@@ -8021,7 +6957,7 @@
                       transform="matrix(1,0,0,1,52.338890,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1236"
                           fill="rgba(0,0,0,1)"
@@ -8049,7 +6985,7 @@
                       transform="matrix(1,0,0,1,94.527779,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1237"
                           fill="rgba(0,0,0,1)"
@@ -8077,7 +7013,7 @@
                       transform="matrix(1,0,0,1,136.716660,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1238"
                           fill="rgba(0,0,0,1)"
@@ -8105,7 +7041,7 @@
                       transform="matrix(1,0,0,1,178.905548,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1239"
                           fill="rgba(0,0,0,1)"
@@ -8133,7 +7069,7 @@
                       transform="matrix(1,0,0,1,221.094452,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1240"
                           fill="rgba(0,0,0,1)"
@@ -8161,7 +7097,7 @@
                       transform="matrix(1,0,0,1,263.283325,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1241"
                           fill="rgba(0,0,0,1)"
@@ -8189,7 +7125,7 @@
                       transform="matrix(1,0,0,1,305.472229,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1242"
                           fill="rgba(0,0,0,1)"
@@ -8217,7 +7153,7 @@
                       transform="matrix(1,0,0,1,347.661102,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1243"
                           fill="rgba(0,0,0,1)"
@@ -8245,7 +7181,7 @@
                       transform="matrix(1,0,0,1,389.850006,24)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1244"
                           fill="rgba(0,0,0,1)"
@@ -8269,32 +7205,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-1192"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-1192" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-1214"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-1221"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-1222"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-1214" fill="none" class="legend-handles-group" />
+            <g id="g-svg-1221" fill="none" class="legend-indicator">
+              <g id="g-svg-1222" fill="none">
+                <g>
                   <path
                     id="g-svg-1224"
                     fill="rgba(38,38,38,1)"
@@ -8302,16 +7219,11 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-1223"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-1223" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
diff --git a/__tests__/integration/snapshots/Continuous5.svg b/__tests__/integration/snapshots/Continuous5.svg
index fc487d6fe..57e07b7d4 100644
--- a/__tests__/integration/snapshots/Continuous5.svg
+++ b/__tests__/integration/snapshots/Continuous5.svg
@@ -362,65 +362,39 @@
       />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-1245"
-        fill="none"
-        width="685"
-        height="805"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1245" fill="none" width="685" height="805">
+        <g>
           <path
             id="g-svg-1246"
             fill="none"
             d="M 0,0 l 110,0 l 0,400 l-110 0 z"
+            x="0"
+            y="0"
             width="110"
             height="400"
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-1247"
-          fill="none"
-          width="110"
-          height="400"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-1247" fill="none" width="110" height="400">
           <g
             id="g-svg-1"
             fill="none"
             width="110"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-41"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-2" fill="none" class="legend-content-group">
+            <g id="g-svg-41" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-67"
                 fill="none"
                 transform="matrix(1,0,0,1,0,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-68"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-68" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-69"
                       fill="rgba(229,229,229,1)"
@@ -429,23 +403,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-70"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-72-71)"
-                  >
+                <g id="g-svg-70" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-72-71)">
                     <path
                       id="g-svg-71"
                       fill="url(#g-pattern-0)"
                       class="ribbon-ribbon"
                       d="M 0,377 L 0,0 L 75.84,0 L 75.84,377 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-72"
                         fill="none"
@@ -457,55 +423,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-5"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  />
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+            <g id="g-svg-3" fill="none" class="legend-label-group">
+              <g id="g-svg-4" fill="none" class="legend-label">
+                <g id="g-svg-5" fill="none" class="axis-grid-group" />
+                <g id="g-svg-6" fill="none" class="axis-main-group">
+                  <g id="g-svg-7" fill="none" class="axis-line-group" />
+                  <g id="g-svg-8" fill="none" class="axis-tick-group" />
+                  <g id="g-svg-9" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-10"
                       fill="none"
                       transform="matrix(1,0,0,1,10,388.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-77"
                           fill="rgba(0,0,0,1)"
@@ -532,7 +463,7 @@
                       transform="matrix(1,0,0,1,10,346.611115)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-78"
                           fill="rgba(0,0,0,1)"
@@ -559,7 +490,7 @@
                       transform="matrix(1,0,0,1,10,304.722229)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-79"
                           fill="rgba(0,0,0,1)"
@@ -586,7 +517,7 @@
                       transform="matrix(1,0,0,1,10,262.833344)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-80"
                           fill="rgba(0,0,0,1)"
@@ -613,7 +544,7 @@
                       transform="matrix(1,0,0,1,10,220.944443)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-81"
                           fill="rgba(0,0,0,1)"
@@ -640,7 +571,7 @@
                       transform="matrix(1,0,0,1,10,179.055557)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-82"
                           fill="rgba(0,0,0,1)"
@@ -667,7 +598,7 @@
                       transform="matrix(1,0,0,1,10,137.166672)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-83"
                           fill="rgba(0,0,0,1)"
@@ -694,7 +625,7 @@
                       transform="matrix(1,0,0,1,10,95.277779)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-84"
                           fill="rgba(0,0,0,1)"
@@ -721,7 +652,7 @@
                       transform="matrix(1,0,0,1,10,53.388889)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-85"
                           fill="rgba(0,0,0,1)"
@@ -748,7 +679,7 @@
                       transform="matrix(1,0,0,1,10,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-86"
                           fill="rgba(0,0,0,1)"
@@ -771,70 +702,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-30"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-30" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-42"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-42" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-43"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,37.919998,11.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-44"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-87"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-44" fill="none" class="handle-icon-group">
+                  <g id="g-svg-87" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-88"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-89"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-90"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -843,13 +758,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-49"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-49" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-50"
                       fill="rgba(197,197,197,1)"
@@ -860,6 +770,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -869,53 +781,47 @@
               <g
                 id="g-svg-51"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,37.919998,388.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-52"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-91"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-52" fill="none" class="handle-icon-group">
+                  <g id="g-svg-91" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-92"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-93"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-94"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -924,13 +830,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-57"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-57" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-58"
                       fill="rgba(197,197,197,1)"
@@ -941,6 +842,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -948,18 +851,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-73"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-74"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-73" fill="none" class="legend-indicator">
+              <g id="g-svg-74" fill="none">
+                <g>
                   <path
                     id="g-svg-76"
                     fill="rgba(38,38,38,1)"
@@ -967,25 +861,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-75"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-75" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,115,0)">
+        <g>
           <path
             id="g-svg-1248"
             fill="none"
-            d="M 0,0 l 110,0 l 0,400 l-110 0 z"
+            d="M 115,0 l 110,0 l 0,400 l-110 0 z"
+            x="115"
+            y="0"
             width="110"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -1003,34 +894,18 @@
             fill="none"
             width="110"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-96"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-135"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-96" fill="none" class="legend-content-group">
+            <g id="g-svg-135" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-161"
                 fill="none"
                 transform="matrix(1,0,0,1,34.160000,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-162"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-162" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-163"
                       fill="rgba(229,229,229,1)"
@@ -1039,23 +914,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-164"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-166-165)"
-                  >
+                <g id="g-svg-164" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-166-165)">
                     <path
                       id="g-svg-165"
                       fill="url(#g-pattern-0)"
                       class="ribbon-ribbon"
                       d="M 0,377 L 0,0 L 75.84,0 L 75.84,377 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-166"
                         fill="none"
@@ -1067,55 +934,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-97"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-98"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-99"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-100"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-101"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-102"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  />
-                  <g
-                    id="g-svg-103"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+            <g id="g-svg-97" fill="none" class="legend-label-group">
+              <g id="g-svg-98" fill="none" class="legend-label">
+                <g id="g-svg-99" fill="none" class="axis-grid-group" />
+                <g id="g-svg-100" fill="none" class="axis-main-group">
+                  <g id="g-svg-101" fill="none" class="axis-line-group" />
+                  <g id="g-svg-102" fill="none" class="axis-tick-group" />
+                  <g id="g-svg-103" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-104"
                       fill="none"
                       transform="matrix(1,0,0,1,24.160000,388.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-171"
                           fill="rgba(0,0,0,1)"
@@ -1142,7 +974,7 @@
                       transform="matrix(1,0,0,1,24.160000,346.611115)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-172"
                           fill="rgba(0,0,0,1)"
@@ -1169,7 +1001,7 @@
                       transform="matrix(1,0,0,1,24.160000,304.722229)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-173"
                           fill="rgba(0,0,0,1)"
@@ -1196,7 +1028,7 @@
                       transform="matrix(1,0,0,1,24.160000,262.833344)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-174"
                           fill="rgba(0,0,0,1)"
@@ -1223,7 +1055,7 @@
                       transform="matrix(1,0,0,1,24.160000,220.944443)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-175"
                           fill="rgba(0,0,0,1)"
@@ -1250,7 +1082,7 @@
                       transform="matrix(1,0,0,1,24.160000,179.055557)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-176"
                           fill="rgba(0,0,0,1)"
@@ -1277,7 +1109,7 @@
                       transform="matrix(1,0,0,1,24.160000,137.166672)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-177"
                           fill="rgba(0,0,0,1)"
@@ -1304,7 +1136,7 @@
                       transform="matrix(1,0,0,1,24.160000,95.277779)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-178"
                           fill="rgba(0,0,0,1)"
@@ -1331,7 +1163,7 @@
                       transform="matrix(1,0,0,1,24.160000,53.388889)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-179"
                           fill="rgba(0,0,0,1)"
@@ -1358,7 +1190,7 @@
                       transform="matrix(1,0,0,1,24.160000,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-180"
                           fill="rgba(0,0,0,1)"
@@ -1381,70 +1213,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-124"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-124" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-136"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-136" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-137"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,72.080002,11.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-138"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-181"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-138" fill="none" class="handle-icon-group">
+                  <g id="g-svg-181" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-182"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-183"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-184"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -1453,13 +1269,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-143"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-143" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-144"
                       fill="rgba(197,197,197,1)"
@@ -1470,6 +1281,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -1479,53 +1292,47 @@
               <g
                 id="g-svg-145"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,72.080002,388.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-146"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-185"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-146" fill="none" class="handle-icon-group">
+                  <g id="g-svg-185" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-186"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-187"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-188"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -1534,13 +1341,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-151"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-151" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-152"
                       fill="rgba(197,197,197,1)"
@@ -1551,6 +1353,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -1558,18 +1362,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-167"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-168"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-167" fill="none" class="legend-indicator">
+              <g id="g-svg-168" fill="none">
+                <g>
                   <path
                     id="g-svg-170"
                     fill="rgba(38,38,38,1)"
@@ -1577,25 +1372,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-169"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-169" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,230,0)">
+        <g>
           <path
             id="g-svg-1250"
             fill="none"
-            d="M 0,0 l 110,0 l 0,400 l-110 0 z"
+            d="M 230,0 l 110,0 l 0,400 l-110 0 z"
+            x="230"
+            y="0"
             width="110"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -1613,10 +1405,9 @@
             fill="none"
             width="110"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-190"
                 fill="rgba(44,53,66,1)"
@@ -1628,6 +1419,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 title
@@ -1640,25 +1433,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-230"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-230" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-256"
                 fill="none"
                 transform="matrix(1,0,0,1,0,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-257"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-257" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-258"
                       fill="rgba(229,229,229,1)"
@@ -1667,23 +1450,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-259"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-261-260)"
-                  >
+                <g id="g-svg-259" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-261-260)">
                     <path
                       id="g-svg-260"
                       fill="url(#g-pattern-1)"
                       class="ribbon-ribbon"
                       d="M 0,350 L 0,0 L 75.83999999999997,0 L 75.83999999999997,350 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-261"
                         fill="none"
@@ -1695,55 +1470,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-192"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-193"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-194"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-195"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-196"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-197"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  />
-                  <g
-                    id="g-svg-198"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+            <g id="g-svg-192" fill="none" class="legend-label-group">
+              <g id="g-svg-193" fill="none" class="legend-label">
+                <g id="g-svg-194" fill="none" class="axis-grid-group" />
+                <g id="g-svg-195" fill="none" class="axis-main-group">
+                  <g id="g-svg-196" fill="none" class="axis-line-group" />
+                  <g id="g-svg-197" fill="none" class="axis-tick-group" />
+                  <g id="g-svg-198" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-199"
                       fill="none"
                       transform="matrix(1,0,0,1,10,361.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-266"
                           fill="rgba(0,0,0,1)"
@@ -1770,7 +1510,7 @@
                       transform="matrix(1,0,0,1,10,322.611115)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-267"
                           fill="rgba(0,0,0,1)"
@@ -1797,7 +1537,7 @@
                       transform="matrix(1,0,0,1,10,283.722229)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-268"
                           fill="rgba(0,0,0,1)"
@@ -1824,7 +1564,7 @@
                       transform="matrix(1,0,0,1,10,244.833328)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-269"
                           fill="rgba(0,0,0,1)"
@@ -1851,7 +1591,7 @@
                       transform="matrix(1,0,0,1,10,205.944443)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-270"
                           fill="rgba(0,0,0,1)"
@@ -1878,7 +1618,7 @@
                       transform="matrix(1,0,0,1,10,167.055557)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-271"
                           fill="rgba(0,0,0,1)"
@@ -1905,7 +1645,7 @@
                       transform="matrix(1,0,0,1,10,128.166672)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-272"
                           fill="rgba(0,0,0,1)"
@@ -1932,7 +1672,7 @@
                       transform="matrix(1,0,0,1,10,89.277779)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-273"
                           fill="rgba(0,0,0,1)"
@@ -1959,7 +1699,7 @@
                       transform="matrix(1,0,0,1,10,50.388889)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-274"
                           fill="rgba(0,0,0,1)"
@@ -1986,7 +1726,7 @@
                       transform="matrix(1,0,0,1,10,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-275"
                           fill="rgba(0,0,0,1)"
@@ -2009,70 +1749,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-219"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-219" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-231"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-231" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-232"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,37.919998,11.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-233"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-276"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-233" fill="none" class="handle-icon-group">
+                  <g id="g-svg-276" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-277"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-278"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-279"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -2081,13 +1805,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-238"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-238" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-239"
                       fill="rgba(197,197,197,1)"
@@ -2098,6 +1817,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -2107,53 +1828,47 @@
               <g
                 id="g-svg-240"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,37.919998,361.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-241"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-280"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-241" fill="none" class="handle-icon-group">
+                  <g id="g-svg-280" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-281"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-282"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-283"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -2162,13 +1877,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-246"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-246" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-247"
                       fill="rgba(197,197,197,1)"
@@ -2179,6 +1889,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -2186,18 +1898,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-262"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-263"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-262" fill="none" class="legend-indicator">
+              <g id="g-svg-263" fill="none">
+                <g>
                   <path
                     id="g-svg-265"
                     fill="rgba(38,38,38,1)"
@@ -2205,25 +1908,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-264"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-264" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,345,0)">
+        <g>
           <path
             id="g-svg-1252"
             fill="none"
-            d="M 0,0 l 110,0 l 0,400 l-110 0 z"
+            d="M 345,0 l 110,0 l 0,400 l-110 0 z"
+            x="345"
+            y="0"
             width="110"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -2241,10 +1941,9 @@
             fill="none"
             width="110"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-285"
                 fill="rgba(44,53,66,1)"
@@ -2256,6 +1955,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 title
@@ -2268,25 +1969,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-325"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-325" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-351"
                 fill="none"
                 transform="matrix(1,0,0,1,34.160000,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-352"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-352" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-353"
                       fill="rgba(229,229,229,1)"
@@ -2295,23 +1986,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-354"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-356-355)"
-                  >
+                <g id="g-svg-354" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-356-355)">
                     <path
                       id="g-svg-355"
                       fill="url(#g-pattern-2)"
                       class="ribbon-ribbon"
                       d="M 0,350 L 0,0 L 75.84000000000003,0 L 75.84000000000003,350 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-356"
                         fill="none"
@@ -2323,55 +2006,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-287"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-288"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-289"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-290"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-291"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-292"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  />
-                  <g
-                    id="g-svg-293"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+            <g id="g-svg-287" fill="none" class="legend-label-group">
+              <g id="g-svg-288" fill="none" class="legend-label">
+                <g id="g-svg-289" fill="none" class="axis-grid-group" />
+                <g id="g-svg-290" fill="none" class="axis-main-group">
+                  <g id="g-svg-291" fill="none" class="axis-line-group" />
+                  <g id="g-svg-292" fill="none" class="axis-tick-group" />
+                  <g id="g-svg-293" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-294"
                       fill="none"
                       transform="matrix(1,0,0,1,24.160000,361.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-361"
                           fill="rgba(0,0,0,1)"
@@ -2398,7 +2046,7 @@
                       transform="matrix(1,0,0,1,24.160000,322.611115)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-362"
                           fill="rgba(0,0,0,1)"
@@ -2425,7 +2073,7 @@
                       transform="matrix(1,0,0,1,24.160000,283.722229)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-363"
                           fill="rgba(0,0,0,1)"
@@ -2452,7 +2100,7 @@
                       transform="matrix(1,0,0,1,24.160000,244.833328)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-364"
                           fill="rgba(0,0,0,1)"
@@ -2479,7 +2127,7 @@
                       transform="matrix(1,0,0,1,24.160000,205.944443)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-365"
                           fill="rgba(0,0,0,1)"
@@ -2506,7 +2154,7 @@
                       transform="matrix(1,0,0,1,24.160000,167.055557)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-366"
                           fill="rgba(0,0,0,1)"
@@ -2533,7 +2181,7 @@
                       transform="matrix(1,0,0,1,24.160000,128.166672)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-367"
                           fill="rgba(0,0,0,1)"
@@ -2560,7 +2208,7 @@
                       transform="matrix(1,0,0,1,24.160000,89.277779)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-368"
                           fill="rgba(0,0,0,1)"
@@ -2587,7 +2235,7 @@
                       transform="matrix(1,0,0,1,24.160000,50.388889)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-369"
                           fill="rgba(0,0,0,1)"
@@ -2614,7 +2262,7 @@
                       transform="matrix(1,0,0,1,24.160000,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-370"
                           fill="rgba(0,0,0,1)"
@@ -2637,70 +2285,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-314"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-314" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-326"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-326" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-327"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,72.080002,11.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-328"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-371"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-328" fill="none" class="handle-icon-group">
+                  <g id="g-svg-371" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-372"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-373"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-374"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -2709,13 +2341,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-333"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-333" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-334"
                       fill="rgba(197,197,197,1)"
@@ -2726,6 +2353,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -2735,53 +2364,47 @@
               <g
                 id="g-svg-335"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,72.080002,361.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-336"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-375"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-336" fill="none" class="handle-icon-group">
+                  <g id="g-svg-375" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-376"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-377"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-378"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -2790,13 +2413,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-341"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-341" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-342"
                       fill="rgba(197,197,197,1)"
@@ -2807,6 +2425,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -2814,18 +2434,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-357"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-358"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-357" fill="none" class="legend-indicator">
+              <g id="g-svg-358" fill="none">
+                <g>
                   <path
                     id="g-svg-360"
                     fill="rgba(38,38,38,1)"
@@ -2833,25 +2444,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-359"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-359" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,460,0)">
+        <g>
           <path
             id="g-svg-1254"
             fill="none"
-            d="M 0,0 l 110,0 l 0,400 l-110 0 z"
+            d="M 460,0 l 110,0 l 0,400 l-110 0 z"
+            x="460"
+            y="0"
             width="110"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -2869,34 +2477,18 @@
             fill="none"
             width="110"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-380"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-419"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-380" fill="none" class="legend-content-group">
+            <g id="g-svg-419" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-421"
                 fill="none"
                 transform="matrix(1,0,0,1,0,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-422"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-422" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-423"
                       fill="rgba(229,229,229,1)"
@@ -2905,23 +2497,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-424"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-426-425)"
-                  >
+                <g id="g-svg-424" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-426-425)">
                     <path
                       id="g-svg-425"
                       fill="url(#g-pattern-3)"
                       class="ribbon-ribbon"
                       d="M 0,377 L 0,0 L 75.84000000000003,0 L 75.84000000000003,377 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-426"
                         fill="none"
@@ -2933,55 +2517,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-381"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-382"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-383"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-384"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-385"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-386"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  />
-                  <g
-                    id="g-svg-387"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+            <g id="g-svg-381" fill="none" class="legend-label-group">
+              <g id="g-svg-382" fill="none" class="legend-label">
+                <g id="g-svg-383" fill="none" class="axis-grid-group" />
+                <g id="g-svg-384" fill="none" class="axis-main-group">
+                  <g id="g-svg-385" fill="none" class="axis-line-group" />
+                  <g id="g-svg-386" fill="none" class="axis-tick-group" />
+                  <g id="g-svg-387" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-388"
                       fill="none"
                       transform="matrix(1,0,0,1,10,388.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-431"
                           fill="rgba(0,0,0,1)"
@@ -3008,7 +2557,7 @@
                       transform="matrix(1,0,0,1,10,346.611115)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-432"
                           fill="rgba(0,0,0,1)"
@@ -3035,7 +2584,7 @@
                       transform="matrix(1,0,0,1,10,304.722229)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-433"
                           fill="rgba(0,0,0,1)"
@@ -3062,7 +2611,7 @@
                       transform="matrix(1,0,0,1,10,262.833344)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-434"
                           fill="rgba(0,0,0,1)"
@@ -3089,7 +2638,7 @@
                       transform="matrix(1,0,0,1,10,220.944443)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-435"
                           fill="rgba(0,0,0,1)"
@@ -3116,7 +2665,7 @@
                       transform="matrix(1,0,0,1,10,179.055557)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-436"
                           fill="rgba(0,0,0,1)"
@@ -3143,7 +2692,7 @@
                       transform="matrix(1,0,0,1,10,137.166672)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-437"
                           fill="rgba(0,0,0,1)"
@@ -3170,7 +2719,7 @@
                       transform="matrix(1,0,0,1,10,95.277779)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-438"
                           fill="rgba(0,0,0,1)"
@@ -3197,7 +2746,7 @@
                       transform="matrix(1,0,0,1,10,53.388889)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-439"
                           fill="rgba(0,0,0,1)"
@@ -3224,7 +2773,7 @@
                       transform="matrix(1,0,0,1,10,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-440"
                           fill="rgba(0,0,0,1)"
@@ -3247,32 +2796,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-408"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-408" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-420"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-427"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-428"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-420" fill="none" class="legend-handles-group" />
+            <g id="g-svg-427" fill="none" class="legend-indicator">
+              <g id="g-svg-428" fill="none">
+                <g>
                   <path
                     id="g-svg-430"
                     fill="rgba(38,38,38,1)"
@@ -3280,25 +2810,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-429"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-429" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,575,0)">
+        <g>
           <path
             id="g-svg-1256"
             fill="none"
-            d="M 0,0 l 110,0 l 0,400 l-110 0 z"
+            d="M 575,0 l 110,0 l 0,400 l-110 0 z"
+            x="575"
+            y="0"
             width="110"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -3316,34 +2843,18 @@
             fill="none"
             width="110"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-442"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-481"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-442" fill="none" class="legend-content-group">
+            <g id="g-svg-481" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-483"
                 fill="none"
                 transform="matrix(1,0,0,1,34.160000,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-484"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-484" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-485"
                       fill="rgba(229,229,229,1)"
@@ -3352,23 +2863,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-486"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-488-487)"
-                  >
+                <g id="g-svg-486" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-488-487)">
                     <path
                       id="g-svg-487"
                       fill="url(#g-pattern-4)"
                       class="ribbon-ribbon"
                       d="M 0,377 L 0,0 L 75.83999999999992,0 L 75.83999999999992,377 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-488"
                         fill="none"
@@ -3380,55 +2883,20 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-443"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-444"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-445"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-446"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-447"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-448"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  />
-                  <g
-                    id="g-svg-449"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+            <g id="g-svg-443" fill="none" class="legend-label-group">
+              <g id="g-svg-444" fill="none" class="legend-label">
+                <g id="g-svg-445" fill="none" class="axis-grid-group" />
+                <g id="g-svg-446" fill="none" class="axis-main-group">
+                  <g id="g-svg-447" fill="none" class="axis-line-group" />
+                  <g id="g-svg-448" fill="none" class="axis-tick-group" />
+                  <g id="g-svg-449" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-450"
                       fill="none"
                       transform="matrix(1,0,0,1,24.160000,388.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-493"
                           fill="rgba(0,0,0,1)"
@@ -3455,7 +2923,7 @@
                       transform="matrix(1,0,0,1,24.160000,346.611115)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-494"
                           fill="rgba(0,0,0,1)"
@@ -3482,7 +2950,7 @@
                       transform="matrix(1,0,0,1,24.160000,304.722229)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-495"
                           fill="rgba(0,0,0,1)"
@@ -3509,7 +2977,7 @@
                       transform="matrix(1,0,0,1,24.160000,262.833344)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-496"
                           fill="rgba(0,0,0,1)"
@@ -3536,7 +3004,7 @@
                       transform="matrix(1,0,0,1,24.160000,220.944443)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-497"
                           fill="rgba(0,0,0,1)"
@@ -3563,7 +3031,7 @@
                       transform="matrix(1,0,0,1,24.160000,179.055557)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-498"
                           fill="rgba(0,0,0,1)"
@@ -3590,7 +3058,7 @@
                       transform="matrix(1,0,0,1,24.160000,137.166672)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-499"
                           fill="rgba(0,0,0,1)"
@@ -3617,7 +3085,7 @@
                       transform="matrix(1,0,0,1,24.160000,95.277779)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-500"
                           fill="rgba(0,0,0,1)"
@@ -3644,7 +3112,7 @@
                       transform="matrix(1,0,0,1,24.160000,53.388889)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-501"
                           fill="rgba(0,0,0,1)"
@@ -3671,7 +3139,7 @@
                       transform="matrix(1,0,0,1,24.160000,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-502"
                           fill="rgba(0,0,0,1)"
@@ -3694,32 +3162,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-470"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-470" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-482"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-489"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-490"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-482" fill="none" class="legend-handles-group" />
+            <g id="g-svg-489" fill="none" class="legend-indicator">
+              <g id="g-svg-490" fill="none">
+                <g>
                   <path
                     id="g-svg-492"
                     fill="rgba(38,38,38,1)"
@@ -3727,25 +3176,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-491"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-491" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,405)">
+        <g>
           <path
             id="g-svg-1258"
             fill="none"
-            d="M 0,0 l 110,0 l 0,400 l-110 0 z"
+            d="M 0,405 l 110,0 l 0,400 l-110 0 z"
+            x="0"
+            y="405"
             width="110"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -3763,34 +3209,18 @@
             fill="none"
             width="110"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-504"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-573"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-504" fill="none" class="legend-content-group">
+            <g id="g-svg-573" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-599"
                 fill="none"
                 transform="matrix(1,0,0,1,0,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-600"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-600" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-601"
                       fill="rgba(229,229,229,1)"
@@ -3799,23 +3229,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-602"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-604-603)"
-                  >
+                <g id="g-svg-602" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-604-603)">
                     <path
                       id="g-svg-603"
                       fill="url(#g-pattern-5)"
                       class="ribbon-ribbon"
                       d="M 0,377 L 0,0 L 70.84,0 L 70.84,377 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-604"
                         fill="none"
@@ -3827,55 +3249,25 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-505"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-506"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-507"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-508"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-509"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-510"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-505" fill="none" class="legend-label-group">
+              <g id="g-svg-506" fill="none" class="legend-label">
+                <g id="g-svg-507" fill="none" class="axis-grid-group" />
+                <g id="g-svg-508" fill="none" class="axis-main-group">
+                  <g id="g-svg-509" fill="none" class="axis-line-group" />
+                  <g id="g-svg-510" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-511"
                       fill="none"
                       transform="matrix(1,0,0,1,70.839996,388.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-609"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3889,13 +3281,13 @@
                       transform="matrix(1,0,0,1,70.839996,346.611115)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-610"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3909,13 +3301,13 @@
                       transform="matrix(1,0,0,1,70.839996,304.722229)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-611"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3929,13 +3321,13 @@
                       transform="matrix(1,0,0,1,70.839996,262.833344)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-612"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3949,13 +3341,13 @@
                       transform="matrix(1,0,0,1,70.839996,220.944443)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-613"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3969,13 +3361,13 @@
                       transform="matrix(1,0,0,1,70.839996,179.055557)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-614"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3989,13 +3381,13 @@
                       transform="matrix(1,0,0,1,70.839996,137.166672)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-615"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4009,13 +3401,13 @@
                       transform="matrix(1,0,0,1,70.839996,95.277779)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-616"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4029,13 +3421,13 @@
                       transform="matrix(1,0,0,1,70.839996,53.388889)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-617"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4049,13 +3441,13 @@
                       transform="matrix(1,0,0,1,70.839996,11.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-618"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4064,19 +3456,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-531"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-531" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-532"
                       fill="none"
                       transform="matrix(1,0,0,1,80.839996,388.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-619"
                           fill="rgba(0,0,0,1)"
@@ -4103,7 +3490,7 @@
                       transform="matrix(1,0,0,1,80.839996,346.611115)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-620"
                           fill="rgba(0,0,0,1)"
@@ -4130,7 +3517,7 @@
                       transform="matrix(1,0,0,1,80.839996,304.722229)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-621"
                           fill="rgba(0,0,0,1)"
@@ -4157,7 +3544,7 @@
                       transform="matrix(1,0,0,1,80.839996,262.833344)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-622"
                           fill="rgba(0,0,0,1)"
@@ -4184,7 +3571,7 @@
                       transform="matrix(1,0,0,1,80.839996,220.944443)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-623"
                           fill="rgba(0,0,0,1)"
@@ -4211,7 +3598,7 @@
                       transform="matrix(1,0,0,1,80.839996,179.055557)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-624"
                           fill="rgba(0,0,0,1)"
@@ -4238,7 +3625,7 @@
                       transform="matrix(1,0,0,1,80.839996,137.166672)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-625"
                           fill="rgba(0,0,0,1)"
@@ -4265,7 +3652,7 @@
                       transform="matrix(1,0,0,1,80.839996,95.277779)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-626"
                           fill="rgba(0,0,0,1)"
@@ -4292,7 +3679,7 @@
                       transform="matrix(1,0,0,1,80.839996,53.388889)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-627"
                           fill="rgba(0,0,0,1)"
@@ -4319,7 +3706,7 @@
                       transform="matrix(1,0,0,1,80.839996,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-628"
                           fill="rgba(0,0,0,1)"
@@ -4342,70 +3729,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-552"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-552" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-574"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-574" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-575"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,35.419998,11.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-576"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-629"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-576" fill="none" class="handle-icon-group">
+                  <g id="g-svg-629" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-630"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-631"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-632"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -4414,13 +3785,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-581"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-581" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-582"
                       fill="rgba(197,197,197,1)"
@@ -4431,6 +3797,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -4440,53 +3808,47 @@
               <g
                 id="g-svg-583"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,35.419998,388.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-584"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-633"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-584" fill="none" class="handle-icon-group">
+                  <g id="g-svg-633" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-634"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-635"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-636"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -4495,13 +3857,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-589"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-589" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-590"
                       fill="rgba(197,197,197,1)"
@@ -4512,6 +3869,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -4519,18 +3878,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-605"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-606"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-605" fill="none" class="legend-indicator">
+              <g id="g-svg-606" fill="none">
+                <g>
                   <path
                     id="g-svg-608"
                     fill="rgba(38,38,38,1)"
@@ -4538,25 +3888,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-607"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-607" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,115,405)">
+        <g>
           <path
             id="g-svg-1260"
             fill="none"
-            d="M 0,0 l 110,0 l 0,400 l-110 0 z"
+            d="M 115,405 l 110,0 l 0,400 l-110 0 z"
+            x="115"
+            y="405"
             width="110"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -4574,34 +3921,18 @@
             fill="none"
             width="110"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-638"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-707"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-638" fill="none" class="legend-content-group">
+            <g id="g-svg-707" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-733"
                 fill="none"
                 transform="matrix(1,0,0,1,39.160000,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-734"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-734" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-735"
                       fill="rgba(229,229,229,1)"
@@ -4610,23 +3941,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-736"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-738-737)"
-                  >
+                <g id="g-svg-736" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-738-737)">
                     <path
                       id="g-svg-737"
                       fill="url(#g-pattern-5)"
                       class="ribbon-ribbon"
                       d="M 0,377 L 0,0 L 70.84,0 L 70.84,377 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-738"
                         fill="none"
@@ -4638,55 +3961,25 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-639"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-640"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-641"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-642"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-643"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-644"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-639" fill="none" class="legend-label-group">
+              <g id="g-svg-640" fill="none" class="legend-label">
+                <g id="g-svg-641" fill="none" class="axis-grid-group" />
+                <g id="g-svg-642" fill="none" class="axis-main-group">
+                  <g id="g-svg-643" fill="none" class="axis-line-group" />
+                  <g id="g-svg-644" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-645"
                       fill="none"
                       transform="matrix(1,0,0,1,110,388.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-743"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4700,13 +3993,13 @@
                       transform="matrix(1,0,0,1,110,346.611115)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-744"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4720,13 +4013,13 @@
                       transform="matrix(1,0,0,1,110,304.722229)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-745"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4740,13 +4033,13 @@
                       transform="matrix(1,0,0,1,110,262.833344)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-746"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4760,13 +4053,13 @@
                       transform="matrix(1,0,0,1,110,220.944443)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-747"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4780,13 +4073,13 @@
                       transform="matrix(1,0,0,1,110,179.055557)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-748"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4800,13 +4093,13 @@
                       transform="matrix(1,0,0,1,110,137.166672)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-749"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4820,13 +4113,13 @@
                       transform="matrix(1,0,0,1,110,95.277779)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-750"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4840,13 +4133,13 @@
                       transform="matrix(1,0,0,1,110,53.388889)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-751"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4860,13 +4153,13 @@
                       transform="matrix(1,0,0,1,110,11.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-752"
                           fill="none"
-                          x1="70.84"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -4875,19 +4168,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-665"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-665" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-666"
                       fill="none"
                       transform="matrix(1,0,0,1,29.160000,388.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-753"
                           fill="rgba(0,0,0,1)"
@@ -4914,7 +4202,7 @@
                       transform="matrix(1,0,0,1,29.160000,346.611115)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-754"
                           fill="rgba(0,0,0,1)"
@@ -4941,7 +4229,7 @@
                       transform="matrix(1,0,0,1,29.160000,304.722229)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-755"
                           fill="rgba(0,0,0,1)"
@@ -4968,7 +4256,7 @@
                       transform="matrix(1,0,0,1,29.160000,262.833344)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-756"
                           fill="rgba(0,0,0,1)"
@@ -4995,7 +4283,7 @@
                       transform="matrix(1,0,0,1,29.160000,220.944443)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-757"
                           fill="rgba(0,0,0,1)"
@@ -5022,7 +4310,7 @@
                       transform="matrix(1,0,0,1,29.160000,179.055557)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-758"
                           fill="rgba(0,0,0,1)"
@@ -5049,7 +4337,7 @@
                       transform="matrix(1,0,0,1,29.160000,137.166672)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-759"
                           fill="rgba(0,0,0,1)"
@@ -5076,7 +4364,7 @@
                       transform="matrix(1,0,0,1,29.160000,95.277779)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-760"
                           fill="rgba(0,0,0,1)"
@@ -5103,7 +4391,7 @@
                       transform="matrix(1,0,0,1,29.160000,53.388889)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-761"
                           fill="rgba(0,0,0,1)"
@@ -5130,7 +4418,7 @@
                       transform="matrix(1,0,0,1,29.160000,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-762"
                           fill="rgba(0,0,0,1)"
@@ -5153,70 +4441,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-686"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-686" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-708"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-708" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-709"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,74.580002,11.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-710"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-763"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-710" fill="none" class="handle-icon-group">
+                  <g id="g-svg-763" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-764"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-765"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-766"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -5225,13 +4497,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-715"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-715" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-716"
                       fill="rgba(197,197,197,1)"
@@ -5242,6 +4509,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -5251,53 +4520,47 @@
               <g
                 id="g-svg-717"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,74.580002,388.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-718"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-767"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-718" fill="none" class="handle-icon-group">
+                  <g id="g-svg-767" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-768"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-769"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-770"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -5306,13 +4569,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-723"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-723" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-724"
                       fill="rgba(197,197,197,1)"
@@ -5323,6 +4581,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -5330,18 +4590,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-739"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-740"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-739" fill="none" class="legend-indicator">
+              <g id="g-svg-740" fill="none">
+                <g>
                   <path
                     id="g-svg-742"
                     fill="rgba(38,38,38,1)"
@@ -5349,25 +4600,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-741"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-741" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,230,405)">
+        <g>
           <path
             id="g-svg-1262"
             fill="none"
-            d="M 0,0 l 110,0 l 0,400 l-110 0 z"
+            d="M 230,405 l 110,0 l 0,400 l-110 0 z"
+            x="230"
+            y="405"
             width="110"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -5385,10 +4633,9 @@
             fill="none"
             width="110"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-772"
                 fill="rgba(44,53,66,1)"
@@ -5400,6 +4647,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 title
@@ -5412,25 +4661,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-842"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-842" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-868"
                 fill="none"
                 transform="matrix(1,0,0,1,0,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-869"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-869" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-870"
                       fill="rgba(229,229,229,1)"
@@ -5439,23 +4678,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-871"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-873-872)"
-                  >
+                <g id="g-svg-871" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-873-872)">
                     <path
                       id="g-svg-872"
                       fill="url(#g-pattern-6)"
                       class="ribbon-ribbon"
                       d="M 0,350 L 0,0 L 70.83999999999997,0 L 70.83999999999997,350 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-873"
                         fill="none"
@@ -5467,55 +4698,25 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-774"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-775"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-776"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-777"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-778"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-779"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-774" fill="none" class="legend-label-group">
+              <g id="g-svg-775" fill="none" class="legend-label">
+                <g id="g-svg-776" fill="none" class="axis-grid-group" />
+                <g id="g-svg-777" fill="none" class="axis-main-group">
+                  <g id="g-svg-778" fill="none" class="axis-line-group" />
+                  <g id="g-svg-779" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-780"
                       fill="none"
                       transform="matrix(1,0,0,1,70.839996,361.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-878"
                           fill="none"
-                          x1="70.83999999999997"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999997"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -5529,13 +4730,13 @@
                       transform="matrix(1,0,0,1,70.839996,322.611115)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-879"
                           fill="none"
-                          x1="70.83999999999997"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999997"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -5549,13 +4750,13 @@
                       transform="matrix(1,0,0,1,70.839996,283.722229)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-880"
                           fill="none"
-                          x1="70.83999999999997"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999997"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -5569,13 +4770,13 @@
                       transform="matrix(1,0,0,1,70.839996,244.833328)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-881"
                           fill="none"
-                          x1="70.83999999999997"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999997"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -5589,13 +4790,13 @@
                       transform="matrix(1,0,0,1,70.839996,205.944443)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-882"
                           fill="none"
-                          x1="70.83999999999997"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999997"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -5609,13 +4810,13 @@
                       transform="matrix(1,0,0,1,70.839996,167.055557)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-883"
                           fill="none"
-                          x1="70.83999999999997"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999997"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -5629,13 +4830,13 @@
                       transform="matrix(1,0,0,1,70.839996,128.166672)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-884"
                           fill="none"
-                          x1="70.83999999999997"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999997"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -5649,13 +4850,13 @@
                       transform="matrix(1,0,0,1,70.839996,89.277779)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-885"
                           fill="none"
-                          x1="70.83999999999997"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999997"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -5669,13 +4870,13 @@
                       transform="matrix(1,0,0,1,70.839996,50.388889)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-886"
                           fill="none"
-                          x1="70.83999999999997"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999997"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -5689,13 +4890,13 @@
                       transform="matrix(1,0,0,1,70.839996,11.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-887"
                           fill="none"
-                          x1="70.83999999999997"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999997"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -5704,19 +4905,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-800"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-800" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-801"
                       fill="none"
                       transform="matrix(1,0,0,1,80.839996,361.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-888"
                           fill="rgba(0,0,0,1)"
@@ -5743,7 +4939,7 @@
                       transform="matrix(1,0,0,1,80.839996,322.611115)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-889"
                           fill="rgba(0,0,0,1)"
@@ -5770,7 +4966,7 @@
                       transform="matrix(1,0,0,1,80.839996,283.722229)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-890"
                           fill="rgba(0,0,0,1)"
@@ -5797,7 +4993,7 @@
                       transform="matrix(1,0,0,1,80.839996,244.833328)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-891"
                           fill="rgba(0,0,0,1)"
@@ -5824,7 +5020,7 @@
                       transform="matrix(1,0,0,1,80.839996,205.944443)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-892"
                           fill="rgba(0,0,0,1)"
@@ -5851,7 +5047,7 @@
                       transform="matrix(1,0,0,1,80.839996,167.055557)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-893"
                           fill="rgba(0,0,0,1)"
@@ -5878,7 +5074,7 @@
                       transform="matrix(1,0,0,1,80.839996,128.166672)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-894"
                           fill="rgba(0,0,0,1)"
@@ -5905,7 +5101,7 @@
                       transform="matrix(1,0,0,1,80.839996,89.277779)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-895"
                           fill="rgba(0,0,0,1)"
@@ -5932,7 +5128,7 @@
                       transform="matrix(1,0,0,1,80.839996,50.388889)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-896"
                           fill="rgba(0,0,0,1)"
@@ -5959,7 +5155,7 @@
                       transform="matrix(1,0,0,1,80.839996,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-897"
                           fill="rgba(0,0,0,1)"
@@ -5982,70 +5178,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-821"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-821" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-843"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-843" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-844"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,35.419998,11.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-845"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-898"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-845" fill="none" class="handle-icon-group">
+                  <g id="g-svg-898" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-899"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-900"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-901"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -6054,13 +5234,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-850"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-850" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-851"
                       fill="rgba(197,197,197,1)"
@@ -6071,6 +5246,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -6080,53 +5257,47 @@
               <g
                 id="g-svg-852"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,35.419998,361.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-853"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-902"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-853" fill="none" class="handle-icon-group">
+                  <g id="g-svg-902" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-903"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-904"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-905"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -6135,13 +5306,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-858"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-858" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-859"
                       fill="rgba(197,197,197,1)"
@@ -6152,6 +5318,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -6159,18 +5327,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-874"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-875"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-874" fill="none" class="legend-indicator">
+              <g id="g-svg-875" fill="none">
+                <g>
                   <path
                     id="g-svg-877"
                     fill="rgba(38,38,38,1)"
@@ -6178,25 +5337,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-876"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-876" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,345,405)">
+        <g>
           <path
             id="g-svg-1264"
             fill="none"
-            d="M 0,0 l 110,0 l 0,400 l-110 0 z"
+            d="M 345,405 l 110,0 l 0,400 l-110 0 z"
+            x="345"
+            y="405"
             width="110"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -6214,10 +5370,9 @@
             fill="none"
             width="110"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-907"
                 fill="rgba(44,53,66,1)"
@@ -6229,6 +5384,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 title
@@ -6241,25 +5398,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-977"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-977" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-1003"
                 fill="none"
                 transform="matrix(1,0,0,1,39.160000,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-1004"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-1004" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-1005"
                       fill="rgba(229,229,229,1)"
@@ -6268,23 +5415,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-1006"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-1008-1007)"
-                  >
+                <g id="g-svg-1006" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-1008-1007)">
                     <path
                       id="g-svg-1007"
                       fill="url(#g-pattern-7)"
                       class="ribbon-ribbon"
                       d="M 0,350 L 0,0 L 70.84000000000003,0 L 70.84000000000003,350 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-1008"
                         fill="none"
@@ -6296,55 +5435,25 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-909"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-910"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-911"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-912"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-913"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-914"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-909" fill="none" class="legend-label-group">
+              <g id="g-svg-910" fill="none" class="legend-label">
+                <g id="g-svg-911" fill="none" class="axis-grid-group" />
+                <g id="g-svg-912" fill="none" class="axis-main-group">
+                  <g id="g-svg-913" fill="none" class="axis-line-group" />
+                  <g id="g-svg-914" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-915"
                       fill="none"
                       transform="matrix(1,0,0,1,110,361.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1013"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -6358,13 +5467,13 @@
                       transform="matrix(1,0,0,1,110,322.611115)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1014"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -6378,13 +5487,13 @@
                       transform="matrix(1,0,0,1,110,283.722229)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1015"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -6398,13 +5507,13 @@
                       transform="matrix(1,0,0,1,110,244.833328)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1016"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -6418,13 +5527,13 @@
                       transform="matrix(1,0,0,1,110,205.944443)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1017"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -6438,13 +5547,13 @@
                       transform="matrix(1,0,0,1,110,167.055557)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1018"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -6458,13 +5567,13 @@
                       transform="matrix(1,0,0,1,110,128.166672)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1019"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -6478,13 +5587,13 @@
                       transform="matrix(1,0,0,1,110,89.277779)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1020"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -6498,13 +5607,13 @@
                       transform="matrix(1,0,0,1,110,50.388889)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1021"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -6518,13 +5627,13 @@
                       transform="matrix(1,0,0,1,110,11.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1022"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -6533,19 +5642,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-935"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-935" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-936"
                       fill="none"
                       transform="matrix(1,0,0,1,29.160000,361.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1023"
                           fill="rgba(0,0,0,1)"
@@ -6572,7 +5676,7 @@
                       transform="matrix(1,0,0,1,29.160000,322.611115)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1024"
                           fill="rgba(0,0,0,1)"
@@ -6599,7 +5703,7 @@
                       transform="matrix(1,0,0,1,29.160000,283.722229)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1025"
                           fill="rgba(0,0,0,1)"
@@ -6626,7 +5730,7 @@
                       transform="matrix(1,0,0,1,29.160000,244.833328)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1026"
                           fill="rgba(0,0,0,1)"
@@ -6653,7 +5757,7 @@
                       transform="matrix(1,0,0,1,29.160000,205.944443)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1027"
                           fill="rgba(0,0,0,1)"
@@ -6680,7 +5784,7 @@
                       transform="matrix(1,0,0,1,29.160000,167.055557)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1028"
                           fill="rgba(0,0,0,1)"
@@ -6707,7 +5811,7 @@
                       transform="matrix(1,0,0,1,29.160000,128.166672)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1029"
                           fill="rgba(0,0,0,1)"
@@ -6734,7 +5838,7 @@
                       transform="matrix(1,0,0,1,29.160000,89.277779)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1030"
                           fill="rgba(0,0,0,1)"
@@ -6761,7 +5865,7 @@
                       transform="matrix(1,0,0,1,29.160000,50.388889)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1031"
                           fill="rgba(0,0,0,1)"
@@ -6788,7 +5892,7 @@
                       transform="matrix(1,0,0,1,29.160000,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1032"
                           fill="rgba(0,0,0,1)"
@@ -6811,70 +5915,60 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-956"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-956" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-978"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-978" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-979"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,74.580002,11.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-980"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
+                <g id="g-svg-980" fill="none" class="handle-icon-group">
                   <g
                     id="g-svg-1033"
                     fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
+                    x="0"
+                    y="0"
                     class="handle-icon"
                   >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-1034"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-1035"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-1036"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -6883,13 +5977,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-985"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-985" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-986"
                       fill="rgba(197,197,197,1)"
@@ -6900,6 +5989,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -6909,53 +6000,53 @@
               <g
                 id="g-svg-987"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,74.580002,361.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-988"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
+                <g id="g-svg-988" fill="none" class="handle-icon-group">
                   <g
                     id="g-svg-1037"
                     fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
+                    x="0"
+                    y="0"
                     class="handle-icon"
                   >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-1038"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-1039"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-1040"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -6964,13 +6055,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-993"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-993" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-994"
                       fill="rgba(197,197,197,1)"
@@ -6981,6 +6067,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       900
                     </text>
@@ -6988,18 +6076,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1009"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-1010"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-1009" fill="none" class="legend-indicator">
+              <g id="g-svg-1010" fill="none">
+                <g>
                   <path
                     id="g-svg-1012"
                     fill="rgba(38,38,38,1)"
@@ -7007,25 +6086,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-1011"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-1011" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,460,405)">
+        <g>
           <path
             id="g-svg-1266"
             fill="none"
-            d="M 0,0 l 110,0 l 0,400 l-110 0 z"
+            d="M 460,405 l 110,0 l 0,400 l-110 0 z"
+            x="460"
+            y="405"
             width="110"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -7043,34 +6119,18 @@
             fill="none"
             width="110"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-1042"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-1111"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-1042" fill="none" class="legend-content-group">
+            <g id="g-svg-1111" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-1113"
                 fill="none"
                 transform="matrix(1,0,0,1,0,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-1114"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-1114" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-1115"
                       fill="rgba(229,229,229,1)"
@@ -7079,23 +6139,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-1116"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-1118-1117)"
-                  >
+                <g id="g-svg-1116" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-1118-1117)">
                     <path
                       id="g-svg-1117"
                       fill="url(#g-pattern-8)"
                       class="ribbon-ribbon"
                       d="M 0,377 L 0,0 L 70.84000000000003,0 L 70.84000000000003,377 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-1118"
                         fill="none"
@@ -7107,55 +6159,25 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1043"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-1044"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-1045"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-1046"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-1047"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-1048"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-1043" fill="none" class="legend-label-group">
+              <g id="g-svg-1044" fill="none" class="legend-label">
+                <g id="g-svg-1045" fill="none" class="axis-grid-group" />
+                <g id="g-svg-1046" fill="none" class="axis-main-group">
+                  <g id="g-svg-1047" fill="none" class="axis-line-group" />
+                  <g id="g-svg-1048" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-1049"
                       fill="none"
                       transform="matrix(1,0,0,1,70.839996,388.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1123"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7169,13 +6191,13 @@
                       transform="matrix(1,0,0,1,70.839996,346.611115)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1124"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7189,13 +6211,13 @@
                       transform="matrix(1,0,0,1,70.839996,304.722229)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1125"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7209,13 +6231,13 @@
                       transform="matrix(1,0,0,1,70.839996,262.833344)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1126"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7229,13 +6251,13 @@
                       transform="matrix(1,0,0,1,70.839996,220.944443)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1127"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7249,13 +6271,13 @@
                       transform="matrix(1,0,0,1,70.839996,179.055557)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1128"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7269,13 +6291,13 @@
                       transform="matrix(1,0,0,1,70.839996,137.166672)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1129"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7289,13 +6311,13 @@
                       transform="matrix(1,0,0,1,70.839996,95.277779)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1130"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7309,13 +6331,13 @@
                       transform="matrix(1,0,0,1,70.839996,53.388889)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1131"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7329,13 +6351,13 @@
                       transform="matrix(1,0,0,1,70.839996,11.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1132"
                           fill="none"
-                          x1="70.84000000000003"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.84000000000003"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7344,19 +6366,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-1069"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-1069" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-1070"
                       fill="none"
                       transform="matrix(1,0,0,1,80.839996,388.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1133"
                           fill="rgba(0,0,0,1)"
@@ -7383,7 +6400,7 @@
                       transform="matrix(1,0,0,1,80.839996,346.611115)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1134"
                           fill="rgba(0,0,0,1)"
@@ -7410,7 +6427,7 @@
                       transform="matrix(1,0,0,1,80.839996,304.722229)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1135"
                           fill="rgba(0,0,0,1)"
@@ -7437,7 +6454,7 @@
                       transform="matrix(1,0,0,1,80.839996,262.833344)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1136"
                           fill="rgba(0,0,0,1)"
@@ -7464,7 +6481,7 @@
                       transform="matrix(1,0,0,1,80.839996,220.944443)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1137"
                           fill="rgba(0,0,0,1)"
@@ -7491,7 +6508,7 @@
                       transform="matrix(1,0,0,1,80.839996,179.055557)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1138"
                           fill="rgba(0,0,0,1)"
@@ -7518,7 +6535,7 @@
                       transform="matrix(1,0,0,1,80.839996,137.166672)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1139"
                           fill="rgba(0,0,0,1)"
@@ -7545,7 +6562,7 @@
                       transform="matrix(1,0,0,1,80.839996,95.277779)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1140"
                           fill="rgba(0,0,0,1)"
@@ -7572,7 +6589,7 @@
                       transform="matrix(1,0,0,1,80.839996,53.388889)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1141"
                           fill="rgba(0,0,0,1)"
@@ -7599,7 +6616,7 @@
                       transform="matrix(1,0,0,1,80.839996,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1142"
                           fill="rgba(0,0,0,1)"
@@ -7622,32 +6639,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-1090"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-1090" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-1112"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-1119"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-1120"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-1112" fill="none" class="legend-handles-group" />
+            <g id="g-svg-1119" fill="none" class="legend-indicator">
+              <g id="g-svg-1120" fill="none">
+                <g>
                   <path
                     id="g-svg-1122"
                     fill="rgba(38,38,38,1)"
@@ -7655,25 +6653,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-1121"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-1121" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,575,405)">
+        <g>
           <path
             id="g-svg-1268"
             fill="none"
-            d="M 0,0 l 110,0 l 0,400 l-110 0 z"
+            d="M 575,405 l 110,0 l 0,400 l-110 0 z"
+            x="575"
+            y="405"
             width="110"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -7691,34 +6686,18 @@
             fill="none"
             width="110"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-1144"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-1213"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-1144" fill="none" class="legend-content-group">
+            <g id="g-svg-1213" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-1215"
                 fill="none"
                 transform="matrix(1,0,0,1,39.160000,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-1216"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-1216" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-1217"
                       fill="rgba(229,229,229,1)"
@@ -7727,23 +6706,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-1218"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-1220-1219)"
-                  >
+                <g id="g-svg-1218" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-1220-1219)">
                     <path
                       id="g-svg-1219"
                       fill="url(#g-pattern-9)"
                       class="ribbon-ribbon"
                       d="M 0,377 L 0,0 L 70.83999999999992,0 L 70.83999999999992,377 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-1220"
                         fill="none"
@@ -7755,55 +6726,25 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1145"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-1146"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-1147"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-1148"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-1149"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-1150"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-1145" fill="none" class="legend-label-group">
+              <g id="g-svg-1146" fill="none" class="legend-label">
+                <g id="g-svg-1147" fill="none" class="axis-grid-group" />
+                <g id="g-svg-1148" fill="none" class="axis-main-group">
+                  <g id="g-svg-1149" fill="none" class="axis-line-group" />
+                  <g id="g-svg-1150" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-1151"
                       fill="none"
                       transform="matrix(1,0,0,1,110,388.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1225"
                           fill="none"
-                          x1="70.83999999999992"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999992"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7817,13 +6758,13 @@
                       transform="matrix(1,0,0,1,110,346.611115)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1226"
                           fill="none"
-                          x1="70.83999999999992"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999992"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7837,13 +6778,13 @@
                       transform="matrix(1,0,0,1,110,304.722229)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1227"
                           fill="none"
-                          x1="70.83999999999992"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999992"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7857,13 +6798,13 @@
                       transform="matrix(1,0,0,1,110,262.833344)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1228"
                           fill="none"
-                          x1="70.83999999999992"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999992"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7877,13 +6818,13 @@
                       transform="matrix(1,0,0,1,110,220.944443)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1229"
                           fill="none"
-                          x1="70.83999999999992"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999992"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7897,13 +6838,13 @@
                       transform="matrix(1,0,0,1,110,179.055557)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1230"
                           fill="none"
-                          x1="70.83999999999992"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999992"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7917,13 +6858,13 @@
                       transform="matrix(1,0,0,1,110,137.166672)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1231"
                           fill="none"
-                          x1="70.83999999999992"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999992"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7937,13 +6878,13 @@
                       transform="matrix(1,0,0,1,110,95.277779)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1232"
                           fill="none"
-                          x1="70.83999999999992"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999992"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7957,13 +6898,13 @@
                       transform="matrix(1,0,0,1,110,53.388889)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1233"
                           fill="none"
-                          x1="70.83999999999992"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999992"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7977,13 +6918,13 @@
                       transform="matrix(1,0,0,1,110,11.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-70.839996,0)">
+                      <g>
                         <line
                           id="g-svg-1234"
                           fill="none"
-                          x1="70.83999999999992"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-70.83999999999992"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -7992,19 +6933,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-1171"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-1171" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-1172"
                       fill="none"
                       transform="matrix(1,0,0,1,29.160000,388.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1235"
                           fill="rgba(0,0,0,1)"
@@ -8031,7 +6967,7 @@
                       transform="matrix(1,0,0,1,29.160000,346.611115)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1236"
                           fill="rgba(0,0,0,1)"
@@ -8058,7 +6994,7 @@
                       transform="matrix(1,0,0,1,29.160000,304.722229)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1237"
                           fill="rgba(0,0,0,1)"
@@ -8085,7 +7021,7 @@
                       transform="matrix(1,0,0,1,29.160000,262.833344)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1238"
                           fill="rgba(0,0,0,1)"
@@ -8112,7 +7048,7 @@
                       transform="matrix(1,0,0,1,29.160000,220.944443)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1239"
                           fill="rgba(0,0,0,1)"
@@ -8139,7 +7075,7 @@
                       transform="matrix(1,0,0,1,29.160000,179.055557)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1240"
                           fill="rgba(0,0,0,1)"
@@ -8166,7 +7102,7 @@
                       transform="matrix(1,0,0,1,29.160000,137.166672)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1241"
                           fill="rgba(0,0,0,1)"
@@ -8193,7 +7129,7 @@
                       transform="matrix(1,0,0,1,29.160000,95.277779)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1242"
                           fill="rgba(0,0,0,1)"
@@ -8220,7 +7156,7 @@
                       transform="matrix(1,0,0,1,29.160000,53.388889)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1243"
                           fill="rgba(0,0,0,1)"
@@ -8247,7 +7183,7 @@
                       transform="matrix(1,0,0,1,29.160000,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-1244"
                           fill="rgba(0,0,0,1)"
@@ -8270,32 +7206,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-1192"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-1192" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-1214"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-1221"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-1222"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-1214" fill="none" class="legend-handles-group" />
+            <g id="g-svg-1221" fill="none" class="legend-indicator">
+              <g id="g-svg-1222" fill="none">
+                <g>
                   <path
                     id="g-svg-1224"
                     fill="rgba(38,38,38,1)"
@@ -8303,16 +7220,11 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-1223"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-1223" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
diff --git a/__tests__/integration/snapshots/ContinuousD3ColorLegend.svg b/__tests__/integration/snapshots/ContinuousD3ColorLegend.svg
index 7b45bc966..4f2751de2 100644
--- a/__tests__/integration/snapshots/ContinuousD3ColorLegend.svg
+++ b/__tests__/integration/snapshots/ContinuousD3ColorLegend.svg
@@ -10,9 +10,9 @@
       gradientUnits="userSpaceOnUse"
       id="g-pattern-0"
       x1="0"
-      y1="1.5"
+      y1="-1.5"
       x2="391.2"
-      y2="1.5"
+      y2="-1.5"
     >
       <stop offset="0" stop-color="rgba(252,251,253,1)" />
       <stop offset="0.1111111111111111" stop-color="rgba(252,251,253,1)" />
@@ -34,16 +34,16 @@
       <stop offset="1" stop-color="rgba(96,54,147,1)" />
       <stop offset="1" stop-color="rgba(76,29,134,1)" />
     </linearGradient>
-    <clipPath transform="matrix(1,0,0,1,-4.400000,-24)" id="clip-path-67-66">
-      <use href="#g-svg-67" transform="matrix(1,0,0,1,4.400000,21)" />
+    <clipPath transform="matrix(1,0,0,1,-4.400000,-27)" id="clip-path-67-66">
+      <use href="#g-svg-67" transform="matrix(1,0,0,1,4.400000,27)" />
     </clipPath>
     <linearGradient
       gradientUnits="userSpaceOnUse"
       id="g-pattern-1"
       x1="0"
-      y1="1.5"
+      y1="-1.5"
       x2="391.2"
-      y2="1.5"
+      y2="-1.5"
     >
       <stop offset="0" stop-color="rgba(197,74,83,1)" />
       <stop offset="0.1111111111111111" stop-color="rgba(197,74,83,1)" />
@@ -65,16 +65,16 @@
       <stop offset="1" stop-color="rgba(75,134,184,1)" />
       <stop offset="1" stop-color="rgba(197,74,83,1)" />
     </linearGradient>
-    <clipPath transform="matrix(1,0,0,1,-4.400000,-84)" id="clip-path-154-153">
-      <use href="#g-svg-154" transform="matrix(1,0,0,1,4.400000,81)" />
+    <clipPath transform="matrix(1,0,0,1,-4.400000,-87)" id="clip-path-154-153">
+      <use href="#g-svg-154" transform="matrix(1,0,0,1,4.400000,87)" />
     </clipPath>
     <linearGradient
       gradientUnits="userSpaceOnUse"
       id="g-pattern-2"
       x1="0"
-      y1="1.5"
+      y1="-1.5"
       x2="379.92"
-      y2="1.5"
+      y2="-1.5"
     >
       <stop offset="0" stop-color="rgba(150,52,53,1)" />
       <stop offset="0.1111111111111111" stop-color="rgba(150,52,53,1)" />
@@ -97,18 +97,18 @@
       <stop offset="1" stop-color="rgba(150,52,53,1)" />
     </linearGradient>
     <clipPath
-      transform="matrix(1,0,0,1,-10.040000,-144)"
+      transform="matrix(1,0,0,1,-10.040000,-147)"
       id="clip-path-241-240"
     >
-      <use href="#g-svg-241" transform="matrix(1,0,0,1,10.040000,141)" />
+      <use href="#g-svg-241" transform="matrix(1,0,0,1,10.040000,147)" />
     </clipPath>
     <linearGradient
       gradientUnits="userSpaceOnUse"
       id="g-pattern-3"
       x1="0"
-      y1="1.5"
+      y1="-1.5"
       x2="379.92"
-      y2="1.5"
+      y2="-1.5"
     >
       <stop offset="0" stop-color="rgba(150,52,53,1)" />
       <stop offset="0.0625" stop-color="rgba(150,52,53,1)" />
@@ -131,37 +131,24 @@
       <stop offset="1" stop-color="rgba(150,52,53,1)" />
     </linearGradient>
     <clipPath
-      transform="matrix(1,0,0,1,-10.040000,-204)"
+      transform="matrix(1,0,0,1,-10.040000,-207)"
       id="clip-path-328-327"
     >
-      <use href="#g-svg-328" transform="matrix(1,0,0,1,10.040000,201)" />
+      <use href="#g-svg-328" transform="matrix(1,0,0,1,10.040000,207)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-1245"
-        fill="none"
-        width="400"
-        height="240"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-1246"
-          fill="none"
-          width="400"
-          height="60"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1245" fill="none" width="400" height="240">
+        <g id="g-svg-1246" fill="none" width="400" height="60">
           <g
             id="g-svg-1"
             fill="none"
             width="400"
             height="60"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-2"
                 fill="rgba(44,53,66,1)"
@@ -173,6 +160,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 Unemployment rate(%)
@@ -185,54 +174,36 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-60"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-60" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-62"
                 fill="none"
                 transform="matrix(1,0,0,1,4.400000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-63"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,-3)">
+                <g id="g-svg-63" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-64"
                       fill="rgba(229,229,229,1)"
                       class="ribbon-background"
-                      d="M 0,0 L 0,3 L 391.2,3 L 391.2,0 Z"
+                      d="M 0,-3 L 0,0 L 391.2,0 L 391.2,-3 Z"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-65"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,-3)"
-                    clip-path="url(#clip-path-67-66)"
-                  >
+                <g id="g-svg-65" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-67-66)">
                     <path
                       id="g-svg-66"
                       fill="url(#g-pattern-0)"
                       class="ribbon-ribbon"
-                      d="M 0,0 L 0,3 L 391.2,3 L 391.2,0 Z"
+                      d="M 0,-3 L 0,0 L 391.2,0 L 391.2,-3 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,-3)">
+                    <g>
                       <path
                         id="g-svg-67"
                         fill="none"
-                        d="M 0,3 L 0,0 L 391.2,0 L 391.2,3 Z"
+                        d="M 0,0 L 0,-3 L 391.2,-3 L 391.2,0 Z"
                         class="ribbon-clip-path"
                       />
                     </g>
@@ -240,49 +211,19 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-4"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-7"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-4" fill="none" class="legend-label-group">
+              <g id="g-svg-5" fill="none" class="legend-label">
+                <g id="g-svg-6" fill="none" class="axis-grid-group" />
+                <g id="g-svg-7" fill="none" class="axis-main-group">
+                  <g id="g-svg-8" fill="none" class="axis-line-group" />
+                  <g id="g-svg-9" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-10"
                       fill="none"
                       transform="matrix(1,0,0,1,47.866665,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-72"
                           fill="none"
@@ -302,7 +243,7 @@
                       transform="matrix(1,0,0,1,91.333336,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-73"
                           fill="none"
@@ -322,7 +263,7 @@
                       transform="matrix(1,0,0,1,134.800003,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-74"
                           fill="none"
@@ -342,7 +283,7 @@
                       transform="matrix(1,0,0,1,178.266663,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-75"
                           fill="none"
@@ -362,7 +303,7 @@
                       transform="matrix(1,0,0,1,221.733337,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-76"
                           fill="none"
@@ -382,7 +323,7 @@
                       transform="matrix(1,0,0,1,265.200012,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-77"
                           fill="none"
@@ -402,7 +343,7 @@
                       transform="matrix(1,0,0,1,308.666656,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-78"
                           fill="none"
@@ -422,7 +363,7 @@
                       transform="matrix(1,0,0,1,352.133331,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-79"
                           fill="none"
@@ -437,19 +378,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-26"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-26" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-27"
                       fill="none"
                       transform="matrix(1,0,0,1,47.866665,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-80"
                           fill="rgba(0,0,0,1)"
@@ -477,7 +413,7 @@
                       transform="matrix(1,0,0,1,91.333336,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-81"
                           fill="rgba(0,0,0,1)"
@@ -505,7 +441,7 @@
                       transform="matrix(1,0,0,1,134.800003,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-82"
                           fill="rgba(0,0,0,1)"
@@ -533,7 +469,7 @@
                       transform="matrix(1,0,0,1,178.266663,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-83"
                           fill="rgba(0,0,0,1)"
@@ -561,7 +497,7 @@
                       transform="matrix(1,0,0,1,221.733337,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-84"
                           fill="rgba(0,0,0,1)"
@@ -589,7 +525,7 @@
                       transform="matrix(1,0,0,1,265.200012,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-85"
                           fill="rgba(0,0,0,1)"
@@ -617,7 +553,7 @@
                       transform="matrix(1,0,0,1,308.666656,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-86"
                           fill="rgba(0,0,0,1)"
@@ -645,7 +581,7 @@
                       transform="matrix(1,0,0,1,352.133331,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-87"
                           fill="rgba(0,0,0,1)"
@@ -669,32 +605,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-43"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-43" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-61"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-68"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-69"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-61" fill="none" class="legend-handles-group" />
+            <g id="g-svg-68" fill="none" class="legend-indicator">
+              <g id="g-svg-69" fill="none">
+                <g>
                   <path
                     id="g-svg-71"
                     fill="rgba(38,38,38,1)"
@@ -702,16 +619,11 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-70"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-70" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
@@ -728,10 +640,9 @@
             fill="none"
             width="400"
             height="60"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-89"
                 fill="rgba(44,53,66,1)"
@@ -743,6 +654,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 Height (cm)
@@ -755,54 +668,36 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-147"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-147" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-149"
                 fill="none"
                 transform="matrix(1,0,0,1,4.400000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-150"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,-3)">
+                <g id="g-svg-150" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-151"
                       fill="rgba(229,229,229,1)"
                       class="ribbon-background"
-                      d="M 0,0 L 0,3 L 391.2,3 L 391.2,0 Z"
+                      d="M 0,-3 L 0,0 L 391.2,0 L 391.2,-3 Z"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-152"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,-3)"
-                    clip-path="url(#clip-path-154-153)"
-                  >
+                <g id="g-svg-152" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-154-153)">
                     <path
                       id="g-svg-153"
                       fill="url(#g-pattern-1)"
                       class="ribbon-ribbon"
-                      d="M 0,0 L 0,3 L 391.2,3 L 391.2,0 Z"
+                      d="M 0,-3 L 0,0 L 391.2,0 L 391.2,-3 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,-3)">
+                    <g>
                       <path
                         id="g-svg-154"
                         fill="none"
-                        d="M 0,3 L 0,0 L 391.2,0 L 391.2,3 Z"
+                        d="M 0,0 L 0,-3 L 391.2,-3 L 391.2,0 Z"
                         class="ribbon-clip-path"
                       />
                     </g>
@@ -810,49 +705,19 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-91"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-92"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-93"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-94"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-95"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-96"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-91" fill="none" class="legend-label-group">
+              <g id="g-svg-92" fill="none" class="legend-label">
+                <g id="g-svg-93" fill="none" class="axis-grid-group" />
+                <g id="g-svg-94" fill="none" class="axis-main-group">
+                  <g id="g-svg-95" fill="none" class="axis-line-group" />
+                  <g id="g-svg-96" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-97"
                       fill="none"
                       transform="matrix(1,0,0,1,47.866665,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-159"
                           fill="none"
@@ -872,7 +737,7 @@
                       transform="matrix(1,0,0,1,91.333336,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-160"
                           fill="none"
@@ -892,7 +757,7 @@
                       transform="matrix(1,0,0,1,134.800003,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-161"
                           fill="none"
@@ -912,7 +777,7 @@
                       transform="matrix(1,0,0,1,178.266663,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-162"
                           fill="none"
@@ -932,7 +797,7 @@
                       transform="matrix(1,0,0,1,221.733337,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-163"
                           fill="none"
@@ -952,7 +817,7 @@
                       transform="matrix(1,0,0,1,265.200012,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-164"
                           fill="none"
@@ -972,7 +837,7 @@
                       transform="matrix(1,0,0,1,308.666656,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-165"
                           fill="none"
@@ -992,7 +857,7 @@
                       transform="matrix(1,0,0,1,352.133331,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-166"
                           fill="none"
@@ -1007,19 +872,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-113"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-113" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-114"
                       fill="none"
                       transform="matrix(1,0,0,1,47.866665,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-167"
                           fill="rgba(0,0,0,1)"
@@ -1047,7 +907,7 @@
                       transform="matrix(1,0,0,1,91.333336,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-168"
                           fill="rgba(0,0,0,1)"
@@ -1075,7 +935,7 @@
                       transform="matrix(1,0,0,1,134.800003,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-169"
                           fill="rgba(0,0,0,1)"
@@ -1103,7 +963,7 @@
                       transform="matrix(1,0,0,1,178.266663,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-170"
                           fill="rgba(0,0,0,1)"
@@ -1131,7 +991,7 @@
                       transform="matrix(1,0,0,1,221.733337,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-171"
                           fill="rgba(0,0,0,1)"
@@ -1159,7 +1019,7 @@
                       transform="matrix(1,0,0,1,265.200012,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-172"
                           fill="rgba(0,0,0,1)"
@@ -1187,7 +1047,7 @@
                       transform="matrix(1,0,0,1,308.666656,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-173"
                           fill="rgba(0,0,0,1)"
@@ -1215,7 +1075,7 @@
                       transform="matrix(1,0,0,1,352.133331,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-174"
                           fill="rgba(0,0,0,1)"
@@ -1239,32 +1099,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-130"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-130" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-148"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-155"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-156"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-148" fill="none" class="legend-handles-group" />
+            <g id="g-svg-155" fill="none" class="legend-indicator">
+              <g id="g-svg-156" fill="none">
+                <g>
                   <path
                     id="g-svg-158"
                     fill="rgba(38,38,38,1)"
@@ -1272,16 +1113,11 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-157"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-157" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
@@ -1298,10 +1134,9 @@
             fill="none"
             width="400"
             height="60"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-176"
                 fill="rgba(44,53,66,1)"
@@ -1313,6 +1148,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 Unemployment rate(%)
@@ -1325,54 +1162,36 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-234"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-234" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-236"
                 fill="none"
                 transform="matrix(1,0,0,1,10.040000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-237"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,-3)">
+                <g id="g-svg-237" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-238"
                       fill="rgba(229,229,229,1)"
                       class="ribbon-background"
-                      d="M 0,0 L 0,3 L 379.92,3 L 379.92,0 Z"
+                      d="M 0,-3 L 0,0 L 379.92,0 L 379.92,-3 Z"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-239"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,-3)"
-                    clip-path="url(#clip-path-241-240)"
-                  >
+                <g id="g-svg-239" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-241-240)">
                     <path
                       id="g-svg-240"
                       fill="url(#g-pattern-2)"
                       class="ribbon-ribbon"
-                      d="M 0,0 L 0,3 L 379.92,3 L 379.92,0 Z"
+                      d="M 0,-3 L 0,0 L 379.92,0 L 379.92,-3 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,-3)">
+                    <g>
                       <path
                         id="g-svg-241"
                         fill="none"
-                        d="M 0,3 L 0,0 L 379.92,0 L 379.92,3 Z"
+                        d="M 0,0 L 0,-3 L 379.92,-3 L 379.92,0 Z"
                         class="ribbon-clip-path"
                       />
                     </g>
@@ -1380,49 +1199,19 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-178"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-179"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-180"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-181"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-182"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-183"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-178" fill="none" class="legend-label-group">
+              <g id="g-svg-179" fill="none" class="legend-label">
+                <g id="g-svg-180" fill="none" class="axis-grid-group" />
+                <g id="g-svg-181" fill="none" class="axis-main-group">
+                  <g id="g-svg-182" fill="none" class="axis-line-group" />
+                  <g id="g-svg-183" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-184"
                       fill="none"
                       transform="matrix(1,0,0,1,52.253334,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-246"
                           fill="none"
@@ -1442,7 +1231,7 @@
                       transform="matrix(1,0,0,1,94.466667,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-247"
                           fill="none"
@@ -1462,7 +1251,7 @@
                       transform="matrix(1,0,0,1,136.679993,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-248"
                           fill="none"
@@ -1482,7 +1271,7 @@
                       transform="matrix(1,0,0,1,178.893326,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-249"
                           fill="none"
@@ -1502,7 +1291,7 @@
                       transform="matrix(1,0,0,1,221.106674,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-250"
                           fill="none"
@@ -1522,7 +1311,7 @@
                       transform="matrix(1,0,0,1,263.320007,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-251"
                           fill="none"
@@ -1542,7 +1331,7 @@
                       transform="matrix(1,0,0,1,305.533325,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-252"
                           fill="none"
@@ -1562,7 +1351,7 @@
                       transform="matrix(1,0,0,1,347.746674,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-253"
                           fill="none"
@@ -1577,19 +1366,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-200"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-200" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-201"
                       fill="none"
                       transform="matrix(1,0,0,1,52.253334,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-254"
                           fill="rgba(0,0,0,1)"
@@ -1617,7 +1401,7 @@
                       transform="matrix(1,0,0,1,94.466667,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-255"
                           fill="rgba(0,0,0,1)"
@@ -1645,7 +1429,7 @@
                       transform="matrix(1,0,0,1,136.679993,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-256"
                           fill="rgba(0,0,0,1)"
@@ -1673,7 +1457,7 @@
                       transform="matrix(1,0,0,1,178.893326,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-257"
                           fill="rgba(0,0,0,1)"
@@ -1701,7 +1485,7 @@
                       transform="matrix(1,0,0,1,221.106674,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-258"
                           fill="rgba(0,0,0,1)"
@@ -1729,7 +1513,7 @@
                       transform="matrix(1,0,0,1,263.320007,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-259"
                           fill="rgba(0,0,0,1)"
@@ -1757,7 +1541,7 @@
                       transform="matrix(1,0,0,1,305.533325,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-260"
                           fill="rgba(0,0,0,1)"
@@ -1785,7 +1569,7 @@
                       transform="matrix(1,0,0,1,347.746674,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-261"
                           fill="rgba(0,0,0,1)"
@@ -1809,32 +1593,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-217"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-217" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-235"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-242"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-243"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-235" fill="none" class="legend-handles-group" />
+            <g id="g-svg-242" fill="none" class="legend-indicator">
+              <g id="g-svg-243" fill="none">
+                <g>
                   <path
                     id="g-svg-245"
                     fill="rgba(38,38,38,1)"
@@ -1842,16 +1607,11 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-244"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-244" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
@@ -1868,10 +1628,9 @@
             fill="none"
             width="400"
             height="60"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-263"
                 fill="rgba(44,53,66,1)"
@@ -1883,6 +1642,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 Unemployment rate(%)
@@ -1895,54 +1656,36 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-321"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-321" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-323"
                 fill="none"
                 transform="matrix(1,0,0,1,10.040000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-324"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,-3)">
+                <g id="g-svg-324" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-325"
                       fill="rgba(229,229,229,1)"
                       class="ribbon-background"
-                      d="M 0,0 L 0,3 L 379.92,3 L 379.92,0 Z"
+                      d="M 0,-3 L 0,0 L 379.92,0 L 379.92,-3 Z"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-326"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,-3)"
-                    clip-path="url(#clip-path-328-327)"
-                  >
+                <g id="g-svg-326" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-328-327)">
                     <path
                       id="g-svg-327"
                       fill="url(#g-pattern-3)"
                       class="ribbon-ribbon"
-                      d="M 0,0 L 0,3 L 379.92,3 L 379.92,0 Z"
+                      d="M 0,-3 L 0,0 L 379.92,0 L 379.92,-3 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,-3)">
+                    <g>
                       <path
                         id="g-svg-328"
                         fill="none"
-                        d="M 0,3 L 0,0 L 379.92,0 L 379.92,3 Z"
+                        d="M 0,0 L 0,-3 L 379.92,-3 L 379.92,0 Z"
                         class="ribbon-clip-path"
                       />
                     </g>
@@ -1950,49 +1693,19 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-265"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-266"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-267"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-268"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-269"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-270"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-265" fill="none" class="legend-label-group">
+              <g id="g-svg-266" fill="none" class="legend-label">
+                <g id="g-svg-267" fill="none" class="axis-grid-group" />
+                <g id="g-svg-268" fill="none" class="axis-main-group">
+                  <g id="g-svg-269" fill="none" class="axis-line-group" />
+                  <g id="g-svg-270" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-271"
                       fill="none"
                       transform="matrix(1,0,0,1,33.785000,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-333"
                           fill="none"
@@ -2012,7 +1725,7 @@
                       transform="matrix(1,0,0,1,62.278999,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-334"
                           fill="none"
@@ -2032,7 +1745,7 @@
                       transform="matrix(1,0,0,1,81.275002,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-335"
                           fill="none"
@@ -2052,7 +1765,7 @@
                       transform="matrix(1,0,0,1,100.271004,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-336"
                           fill="none"
@@ -2072,7 +1785,7 @@
                       transform="matrix(1,0,0,1,200,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-337"
                           fill="none"
@@ -2092,7 +1805,7 @@
                       transform="matrix(1,0,0,1,247.490005,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-338"
                           fill="none"
@@ -2112,7 +1825,7 @@
                       transform="matrix(1,0,0,1,294.980011,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-339"
                           fill="none"
@@ -2132,7 +1845,7 @@
                       transform="matrix(1,0,0,1,366.214996,-3)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-340"
                           fill="none"
@@ -2147,19 +1860,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-287"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-287" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-288"
                       fill="none"
                       transform="matrix(1,0,0,1,33.785000,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-341"
                           fill="rgba(0,0,0,1)"
@@ -2187,7 +1895,7 @@
                       transform="matrix(1,0,0,1,62.278999,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-342"
                           fill="rgba(0,0,0,1)"
@@ -2215,7 +1923,7 @@
                       transform="matrix(1,0,0,1,81.275002,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-343"
                           fill="rgba(0,0,0,1)"
@@ -2243,7 +1951,7 @@
                       transform="matrix(1,0,0,1,100.271004,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-344"
                           fill="rgba(0,0,0,1)"
@@ -2271,7 +1979,7 @@
                       transform="matrix(1,0,0,1,200,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-345"
                           fill="rgba(0,0,0,1)"
@@ -2299,7 +2007,7 @@
                       transform="matrix(1,0,0,1,247.490005,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-346"
                           fill="rgba(0,0,0,1)"
@@ -2327,7 +2035,7 @@
                       transform="matrix(1,0,0,1,294.980011,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-347"
                           fill="rgba(0,0,0,1)"
@@ -2355,7 +2063,7 @@
                       transform="matrix(1,0,0,1,366.214996,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-348"
                           fill="rgba(0,0,0,1)"
@@ -2379,32 +2087,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-304"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-304" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-322"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-329"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-330"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-322" fill="none" class="legend-handles-group" />
+            <g id="g-svg-329" fill="none" class="legend-indicator">
+              <g id="g-svg-330" fill="none">
+                <g>
                   <path
                     id="g-svg-332"
                     fill="rgba(38,38,38,1)"
@@ -2412,16 +2101,11 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-331"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-331" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
diff --git a/__tests__/integration/snapshots/ContinuousDemo.svg b/__tests__/integration/snapshots/ContinuousDemo.svg
index 80fc50540..65277603e 100644
--- a/__tests__/integration/snapshots/ContinuousDemo.svg
+++ b/__tests__/integration/snapshots/ContinuousDemo.svg
@@ -45,7 +45,7 @@
       <stop offset="1" stop-color="rgba(231,101,91,1)" />
     </linearGradient>
     <clipPath transform="matrix(1,0,0,1,-14.900000,-27)" id="clip-path-73-72">
-      <use href="#g-svg-73" transform="matrix(1,0,0,1,88.940001,27)" />
+      <use href="#g-svg-73" transform="matrix(1,0,0,1,14.900000,27)" />
     </clipPath>
     <linearGradient
       gradientUnits="userSpaceOnUse"
@@ -70,7 +70,7 @@
       transform="matrix(1,0,0,1,-14.900000,-113)"
       id="clip-path-167-166"
     >
-      <use href="#g-svg-167" transform="matrix(1,0,0,1,107.450003,113)" />
+      <use href="#g-svg-167" transform="matrix(1,0,0,1,14.900000,113)" />
     </clipPath>
     <linearGradient
       gradientUnits="userSpaceOnUse"
@@ -170,28 +170,19 @@
       transform="matrix(1,0,0,1,-410,-38.500000)"
       id="clip-path-518-517"
     >
-      <use href="#g-svg-518" transform="matrix(1,0,0,1,410,108.500000)" />
+      <use href="#g-svg-518" transform="matrix(1,0,0,1,410,38.500000)" />
     </clipPath>
     <clipPath
       transform="matrix(1,0,0,1,-539.799988,-38.500000)"
       id="clip-path-611-610"
     >
-      <use
-        href="#g-svg-611"
-        transform="matrix(1,0,0,1,539.799999,108.500000)"
-      />
+      <use href="#g-svg-611" transform="matrix(1,0,0,1,539.799999,38.500000)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-202"
-        fill="none"
-        width="580"
-        height="400"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-202" fill="none" width="580" height="400">
+        <g>
           <path
             id="g-svg-203"
             fill="none"
@@ -201,22 +192,15 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-204"
-          fill="none"
-          width="400"
-          height="80"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-204" fill="none" width="400" height="80">
           <g
             id="g-svg-1"
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-2"
                 fill="rgba(44,53,66,1)"
@@ -228,6 +212,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 Title
@@ -240,25 +226,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-42"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-42" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-68"
                 fill="none"
                 transform="matrix(1,0,0,1,14.900000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-69"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-69" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-70"
                       fill="rgba(229,229,229,1)"
@@ -267,27 +243,19 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-71"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-73-72)"
-                  >
+                <g id="g-svg-71" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-73-72)">
                     <path
                       id="g-svg-72"
                       fill="url(#g-pattern-0)"
                       class="ribbon-ribbon"
                       d="M 0,20 L 0,0 L 370.2,0 L 370.2,20 Z"
                     />
-                    <g transform="matrix(1,0,0,1,74.040001,0)">
+                    <g>
                       <path
                         id="g-svg-73"
                         fill="none"
-                        d="M 0,0 L 0,20 L 111.05999999999999,20 L 111.05999999999999,0 Z"
+                        d="M 74.04,0 L 74.04,20 L 185.1,20 L 185.1,0 Z"
                         class="ribbon-clip-path"
                       />
                     </g>
@@ -295,56 +263,26 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-4"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-7"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-8"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-4" fill="none" class="legend-label-group">
+              <g id="g-svg-5" fill="none" class="legend-label">
+                <g id="g-svg-6" fill="none" class="axis-grid-group" />
+                <g id="g-svg-7" fill="none" class="axis-main-group">
+                  <g id="g-svg-8" fill="none" class="axis-line-group" />
+                  <g id="g-svg-9" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-10"
                       fill="none"
                       transform="matrix(1,0,0,1,14.900000,20)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-20)">
+                      <g>
                         <line
                           id="g-svg-78"
                           fill="none"
                           x1="0"
-                          y1="20"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-20"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -357,14 +295,14 @@
                       transform="matrix(1,0,0,1,107.449997,20)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-20)">
+                      <g>
                         <line
                           id="g-svg-79"
                           fill="none"
                           x1="0"
-                          y1="20"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-20"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -377,14 +315,14 @@
                       transform="matrix(1,0,0,1,200,20)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-20)">
+                      <g>
                         <line
                           id="g-svg-80"
                           fill="none"
                           x1="0"
-                          y1="20"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-20"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -397,14 +335,14 @@
                       transform="matrix(1,0,0,1,292.549988,20)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-20)">
+                      <g>
                         <line
                           id="g-svg-81"
                           fill="none"
                           x1="0"
-                          y1="20"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-20"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -417,14 +355,14 @@
                       transform="matrix(1,0,0,1,385.100006,20)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-20)">
+                      <g>
                         <line
                           id="g-svg-82"
                           fill="none"
                           x1="0"
-                          y1="20"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-20"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -432,19 +370,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-20"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-20" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-21"
                       fill="none"
                       transform="matrix(1,0,0,1,14.900000,25)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-83"
                           fill="rgba(0,0,0,1)"
@@ -472,7 +405,7 @@
                       transform="matrix(1,0,0,1,107.449997,25)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-84"
                           fill="rgba(0,0,0,1)"
@@ -500,7 +433,7 @@
                       transform="matrix(1,0,0,1,200,25)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-85"
                           fill="rgba(0,0,0,1)"
@@ -528,7 +461,7 @@
                       transform="matrix(1,0,0,1,292.549988,25)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-86"
                           fill="rgba(0,0,0,1)"
@@ -556,7 +489,7 @@
                       transform="matrix(1,0,0,1,385.100006,25)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-87"
                           fill="rgba(0,0,0,1)"
@@ -580,70 +513,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-31"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-31" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-43"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-43" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-44"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,88.940002,10)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-45"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-88"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-45" fill="none" class="handle-icon-group">
+                  <g id="g-svg-88" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-89"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-90"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-91"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -652,13 +569,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-50"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-50" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-51"
                       fill="rgba(197,197,197,1)"
@@ -669,6 +581,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       200
                     </text>
@@ -678,53 +592,47 @@
               <g
                 id="g-svg-52"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,200,10)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-53"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-92"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-53" fill="none" class="handle-icon-group">
+                  <g id="g-svg-92" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-93"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-94"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-95"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -733,13 +641,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-58"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-58" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-59"
                       fill="rgba(197,197,197,1)"
@@ -750,6 +653,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       500
                     </text>
@@ -757,18 +662,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-74"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-75"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-74" fill="none" class="legend-indicator">
+              <g id="g-svg-75" fill="none">
+                <g>
                   <path
                     id="g-svg-77"
                     fill="rgba(38,38,38,1)"
@@ -776,25 +672,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-76"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-76" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,80)">
+        <g>
           <path
             id="g-svg-205"
             fill="none"
-            d="M 0,0 l 400,0 l 0,80 l-400 0 z"
+            d="M 0,80 l 400,0 l 0,80 l-400 0 z"
+            x="0"
+            y="80"
             width="400"
             height="80"
             stroke="rgba(255,0,0,1)"
@@ -803,6 +696,8 @@
         <g
           id="g-svg-206"
           fill="none"
+          x="0"
+          y="80"
           width="400"
           height="80"
           transform="matrix(1,0,0,1,0,80)"
@@ -812,34 +707,18 @@
             fill="none"
             width="400"
             height="80"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           />
-          <g
-            id="g-svg-97"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="legend-content-group"
-          >
-            <g
-              id="g-svg-136"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+          <g id="g-svg-97" fill="none" class="legend-content-group">
+            <g id="g-svg-136" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-162"
                 fill="none"
                 transform="matrix(1,0,0,1,14.900000,33)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-163"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-163" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-164"
                       fill="rgba(229,229,229,1)"
@@ -848,27 +727,19 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-165"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-167-166)"
-                  >
+                <g id="g-svg-165" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-167-166)">
                     <path
                       id="g-svg-166"
                       fill="url(#g-pattern-1)"
                       class="ribbon-ribbon"
                       d="M 0,47 L 0,0 L 370.2,0 L 370.2,47 Z"
                     />
-                    <g transform="matrix(1,0,0,1,92.550003,0)">
+                    <g>
                       <path
                         id="g-svg-167"
                         fill="none"
-                        d="M 0,0 L 0,47 L 92.55,47 L 92.55,0 Z"
+                        d="M 92.55,0 L 92.55,47 L 185.1,47 L 185.1,0 Z"
                         class="ribbon-clip-path"
                       />
                     </g>
@@ -876,56 +747,26 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-98"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-99"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-100"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-101"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-102"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-103"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-98" fill="none" class="legend-label-group">
+              <g id="g-svg-99" fill="none" class="legend-label">
+                <g id="g-svg-100" fill="none" class="axis-grid-group" />
+                <g id="g-svg-101" fill="none" class="axis-main-group">
+                  <g id="g-svg-102" fill="none" class="axis-line-group" />
+                  <g id="g-svg-103" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-104"
                       fill="none"
                       transform="matrix(1,0,0,1,14.900000,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-47)">
+                      <g>
                         <line
                           id="g-svg-172"
                           fill="none"
                           x1="0"
-                          y1="47"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-47"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -938,14 +779,14 @@
                       transform="matrix(1,0,0,1,107.449997,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-47)">
+                      <g>
                         <line
                           id="g-svg-173"
                           fill="none"
                           x1="0"
-                          y1="47"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-47"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -958,14 +799,14 @@
                       transform="matrix(1,0,0,1,200,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-47)">
+                      <g>
                         <line
                           id="g-svg-174"
                           fill="none"
                           x1="0"
-                          y1="47"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-47"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -978,14 +819,14 @@
                       transform="matrix(1,0,0,1,292.549988,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-47)">
+                      <g>
                         <line
                           id="g-svg-175"
                           fill="none"
                           x1="0"
-                          y1="47"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-47"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -998,14 +839,14 @@
                       transform="matrix(1,0,0,1,385.100006,80)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-47)">
+                      <g>
                         <line
                           id="g-svg-176"
                           fill="none"
                           x1="0"
-                          y1="47"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-47"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -1013,19 +854,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-114"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-114" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-115"
                       fill="none"
                       transform="matrix(1,0,0,1,14.900000,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-177"
                           fill="rgba(0,0,0,1)"
@@ -1053,7 +889,7 @@
                       transform="matrix(1,0,0,1,107.449997,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-178"
                           fill="rgba(0,0,0,1)"
@@ -1081,7 +917,7 @@
                       transform="matrix(1,0,0,1,200,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-179"
                           fill="rgba(0,0,0,1)"
@@ -1109,7 +945,7 @@
                       transform="matrix(1,0,0,1,292.549988,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-180"
                           fill="rgba(0,0,0,1)"
@@ -1137,7 +973,7 @@
                       transform="matrix(1,0,0,1,385.100006,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-181"
                           fill="rgba(0,0,0,1)"
@@ -1161,70 +997,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-125"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-125" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-137"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-137" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-138"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,107.449997,56.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-139"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-182"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-139" fill="none" class="handle-icon-group">
+                  <g id="g-svg-182" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-183"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-184"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-185"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -1233,13 +1053,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-144"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-144" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-145"
                       fill="rgba(197,197,197,1)"
@@ -1250,6 +1065,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       250
                     </text>
@@ -1259,53 +1076,47 @@
               <g
                 id="g-svg-146"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,200,56.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-147"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-186"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-147" fill="none" class="handle-icon-group">
+                  <g id="g-svg-186" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-187"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-188"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-189"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -1314,13 +1125,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-152"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-152" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-153"
                       fill="rgba(197,197,197,1)"
@@ -1331,6 +1137,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       500
                     </text>
@@ -1338,18 +1146,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-168"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-169"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-168" fill="none" class="legend-indicator">
+              <g id="g-svg-169" fill="none">
+                <g>
                   <path
                     id="g-svg-171"
                     fill="rgba(38,38,38,1)"
@@ -1357,25 +1156,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-170"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-170" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,160)">
+        <g>
           <path
             id="g-svg-207"
             fill="none"
-            d="M 0,0 l 400,0 l 0,100 l-400 0 z"
+            d="M 0,160 l 400,0 l 0,100 l-400 0 z"
+            x="0"
+            y="160"
             width="400"
             height="100"
             stroke="rgba(255,0,0,1)"
@@ -1384,6 +1180,8 @@
         <g
           id="g-svg-208"
           fill="none"
+          x="0"
+          y="160"
           width="400"
           height="100"
           transform="matrix(1,0,0,1,0,160)"
@@ -1393,10 +1191,9 @@
             fill="none"
             width="400"
             height="100"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-191"
                 fill="rgba(44,53,66,1)"
@@ -1408,6 +1205,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 Title
@@ -1420,25 +1219,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-258"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-258" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-284"
                 fill="none"
                 transform="matrix(1,0,0,1,11.120000,33)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-285"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-285" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-286"
                       fill="rgba(229,229,229,1)"
@@ -1447,23 +1236,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-287"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-289-288)"
-                  >
+                <g id="g-svg-287" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-289-288)">
                     <path
                       id="g-svg-288"
                       fill="url(#g-pattern-2)"
                       class="ribbon-ribbon"
                       d="M 0,40 L 377.76,0 L 377.76,40 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-289"
                         fill="none"
@@ -1475,56 +1256,26 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-193"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-194"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-195"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-196"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-197"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-198"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-193" fill="none" class="legend-label-group">
+              <g id="g-svg-194" fill="none" class="legend-label">
+                <g id="g-svg-195" fill="none" class="axis-grid-group" />
+                <g id="g-svg-196" fill="none" class="axis-main-group">
+                  <g id="g-svg-197" fill="none" class="axis-line-group" />
+                  <g id="g-svg-198" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-199"
                       fill="none"
                       transform="matrix(1,0,0,1,11.120000,73)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-40)">
+                      <g>
                         <line
                           id="g-svg-294"
                           fill="none"
                           x1="0"
-                          y1="40"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-40"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -1537,14 +1288,14 @@
                       transform="matrix(1,0,0,1,48.896000,73)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-40)">
+                      <g>
                         <line
                           id="g-svg-295"
                           fill="none"
                           x1="0"
-                          y1="40"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-40"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -1557,14 +1308,14 @@
                       transform="matrix(1,0,0,1,124.447998,73)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-40)">
+                      <g>
                         <line
                           id="g-svg-296"
                           fill="none"
                           x1="0"
-                          y1="40"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-40"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -1577,14 +1328,14 @@
                       transform="matrix(1,0,0,1,162.223999,73)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-40)">
+                      <g>
                         <line
                           id="g-svg-297"
                           fill="none"
                           x1="0"
-                          y1="40"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-40"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -1597,14 +1348,14 @@
                       transform="matrix(1,0,0,1,200,73)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-40)">
+                      <g>
                         <line
                           id="g-svg-298"
                           fill="none"
                           x1="0"
-                          y1="40"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-40"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -1617,14 +1368,14 @@
                       transform="matrix(1,0,0,1,237.776001,73)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-40)">
+                      <g>
                         <line
                           id="g-svg-299"
                           fill="none"
                           x1="0"
-                          y1="40"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-40"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -1637,14 +1388,14 @@
                       transform="matrix(1,0,0,1,275.552002,73)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-40)">
+                      <g>
                         <line
                           id="g-svg-300"
                           fill="none"
                           x1="0"
-                          y1="40"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-40"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -1657,14 +1408,14 @@
                       transform="matrix(1,0,0,1,313.328003,73)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-40)">
+                      <g>
                         <line
                           id="g-svg-301"
                           fill="none"
                           x1="0"
-                          y1="40"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-40"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -1677,14 +1428,14 @@
                       transform="matrix(1,0,0,1,351.104004,73)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-40)">
+                      <g>
                         <line
                           id="g-svg-302"
                           fill="none"
                           x1="0"
-                          y1="40"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-40"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -1697,14 +1448,14 @@
                       transform="matrix(1,0,0,1,388.880005,73)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,-40)">
+                      <g>
                         <line
                           id="g-svg-303"
                           fill="none"
                           x1="0"
-                          y1="40"
+                          y1="0"
                           x2="0"
-                          y2="0"
+                          y2="-40"
                           class="axis-tick-item"
                           stroke-width="1"
                           stroke="rgba(0,0,0,1)"
@@ -1712,19 +1463,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-219"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-219" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-220"
                       fill="none"
                       transform="matrix(1,0,0,1,30.007999,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-304"
                           fill="rgba(0,0,0,1)"
@@ -1752,7 +1498,7 @@
                       transform="matrix(1,0,0,1,67.783997,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-305"
                           fill="rgba(0,0,0,1)"
@@ -1780,7 +1526,7 @@
                       transform="matrix(1,0,0,1,143.335999,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-306"
                           fill="rgba(0,0,0,1)"
@@ -1808,7 +1554,7 @@
                       transform="matrix(1,0,0,1,181.112000,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-307"
                           fill="rgba(0,0,0,1)"
@@ -1836,7 +1582,7 @@
                       transform="matrix(1,0,0,1,218.888000,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-308"
                           fill="rgba(0,0,0,1)"
@@ -1864,7 +1610,7 @@
                       transform="matrix(1,0,0,1,256.664001,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-309"
                           fill="rgba(0,0,0,1)"
@@ -1892,7 +1638,7 @@
                       transform="matrix(1,0,0,1,294.440002,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-310"
                           fill="rgba(0,0,0,1)"
@@ -1920,7 +1666,7 @@
                       transform="matrix(1,0,0,1,332.216003,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-311"
                           fill="rgba(0,0,0,1)"
@@ -1948,7 +1694,7 @@
                       transform="matrix(1,0,0,1,369.992004,28)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-312"
                           fill="rgba(0,0,0,1)"
@@ -1972,70 +1718,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-238"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-238" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-259"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-259" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-260"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,11.120000,53)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-261"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-313"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-261" fill="none" class="handle-icon-group">
+                  <g id="g-svg-313" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-314"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-315"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-316"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -2044,13 +1774,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-266"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-266" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-267"
                       fill="rgba(197,197,197,1)"
@@ -2061,6 +1786,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       0
                     </text>
@@ -2070,53 +1797,47 @@
               <g
                 id="g-svg-268"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,388.880005,53)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-269"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-317"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-269" fill="none" class="handle-icon-group">
+                  <g id="g-svg-317" fill="none" x="0" y="0" class="handle-icon">
+                    <g>
                       <path
                         id="g-svg-318"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-319"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-320"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -2125,13 +1846,8 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-274"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-274" fill="none" class="handle-label-group">
+                  <g>
                     <text
                       id="g-svg-275"
                       fill="rgba(197,197,197,1)"
@@ -2142,6 +1858,8 @@
                       dx="0.5"
                       font-size="12"
                       text-anchor="middle"
+                      x="0"
+                      y="0"
                     >
                       1
                     </text>
@@ -2149,18 +1867,9 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-290"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-291"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-290" fill="none" class="legend-indicator">
+              <g id="g-svg-291" fill="none">
+                <g>
                   <path
                     id="g-svg-293"
                     fill="rgba(38,38,38,1)"
@@ -2168,25 +1877,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-292"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-292" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,260)">
+        <g>
           <path
             id="g-svg-209"
             fill="none"
-            d="M 0,0 l 400,0 l 0,50 l-400 0 z"
+            d="M 0,260 l 400,0 l 0,50 l-400 0 z"
+            x="0"
+            y="260"
             width="400"
             height="50"
             stroke="rgba(255,0,0,1)"
@@ -2195,6 +1901,8 @@
         <g
           id="g-svg-210"
           fill="none"
+          x="0"
+          y="260"
           width="400"
           height="50"
           transform="matrix(1,0,0,1,0,260)"
@@ -2204,10 +1912,9 @@
             fill="none"
             width="400"
             height="50"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-322"
                 fill="rgba(44,53,66,1)"
@@ -2219,6 +1926,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 Title
@@ -2231,25 +1940,10 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-325"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
-              <g
-                id="g-svg-327"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon"
-              >
-                <g
-                  id="g-svg-328"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-325" fill="none" class="legend-ribbon-group">
+              <g id="g-svg-327" fill="none" class="legend-ribbon">
+                <g id="g-svg-328" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-329"
                       fill="rgba(229,229,229,1)"
@@ -2258,23 +1952,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-330"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-332-331)"
-                  >
+                <g id="g-svg-330" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-332-331)">
                     <path
                       id="g-svg-331"
                       fill="url(#g-pattern-3)"
                       class="ribbon-ribbon"
                       d="M 0,23 L 0,0 L 400,0 L 400,23 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-332"
                         fill="none"
@@ -2286,30 +1972,11 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-324"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            />
-            <g
-              id="g-svg-326"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-333"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-334"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-324" fill="none" class="legend-label-group" />
+            <g id="g-svg-326" fill="none" class="legend-handles-group" />
+            <g id="g-svg-333" fill="none" class="legend-indicator">
+              <g id="g-svg-334" fill="none">
+                <g>
                   <path
                     id="g-svg-336"
                     fill="rgba(38,38,38,1)"
@@ -2317,25 +1984,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-335"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-335" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,340)">
+        <g>
           <path
             id="g-svg-211"
             fill="none"
-            d="M 0,0 l 400,0 l 0,60 l-400 0 z"
+            d="M 0,340 l 400,0 l 0,60 l-400 0 z"
+            x="0"
+            y="340"
             width="400"
             height="60"
             stroke="rgba(255,0,0,1)"
@@ -2344,6 +2008,8 @@
         <g
           id="g-svg-212"
           fill="none"
+          x="0"
+          y="340"
           width="400"
           height="60"
           transform="matrix(1,0,0,1,0,340)"
@@ -2353,10 +2019,9 @@
             fill="none"
             width="400"
             height="60"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-338"
                 fill="rgba(44,53,66,1)"
@@ -2368,6 +2033,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 Title
@@ -2380,25 +2047,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-414"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-414" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-416"
                 fill="none"
                 transform="matrix(1,0,0,1,14.240000,0)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-417"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-417" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-418"
                       fill="rgba(229,229,229,1)"
@@ -2407,23 +2064,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-419"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-421-420)"
-                  >
+                <g id="g-svg-419" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-421-420)">
                     <path
                       id="g-svg-420"
                       fill="url(#g-pattern-4)"
                       class="ribbon-ribbon"
                       d="M 0,0 L 0,0 L 371.52,0 L 371.52,0 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-421"
                         fill="none"
@@ -2435,49 +2084,19 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-340"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-341"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-342"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-343"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-344"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-345"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-340" fill="none" class="legend-label-group">
+              <g id="g-svg-341" fill="none" class="legend-label">
+                <g id="g-svg-342" fill="none" class="axis-grid-group" />
+                <g id="g-svg-343" fill="none" class="axis-main-group">
+                  <g id="g-svg-344" fill="none" class="axis-line-group" />
+                  <g id="g-svg-345" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-346"
                       fill="none"
                       transform="matrix(1,0,0,1,14.240000,0)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-426"
                           fill="none"
@@ -2497,7 +2116,7 @@
                       transform="matrix(1,0,0,1,51.391998,0)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-427"
                           fill="none"
@@ -2517,7 +2136,7 @@
                       transform="matrix(1,0,0,1,88.543999,0)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-428"
                           fill="none"
@@ -2537,7 +2156,7 @@
                       transform="matrix(1,0,0,1,125.695999,0)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-429"
                           fill="none"
@@ -2557,7 +2176,7 @@
                       transform="matrix(1,0,0,1,162.848007,0)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-430"
                           fill="none"
@@ -2577,7 +2196,7 @@
                       transform="matrix(1,0,0,1,200,0)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-431"
                           fill="none"
@@ -2597,7 +2216,7 @@
                       transform="matrix(1,0,0,1,237.151993,0)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-432"
                           fill="none"
@@ -2617,7 +2236,7 @@
                       transform="matrix(1,0,0,1,274.303986,0)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-433"
                           fill="none"
@@ -2637,7 +2256,7 @@
                       transform="matrix(1,0,0,1,311.455994,0)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-434"
                           fill="none"
@@ -2657,7 +2276,7 @@
                       transform="matrix(1,0,0,1,348.608002,0)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-435"
                           fill="none"
@@ -2677,7 +2296,7 @@
                       transform="matrix(1,0,0,1,385.760010,0)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-436"
                           fill="none"
@@ -2692,19 +2311,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-368"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-368" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-369"
                       fill="none"
                       transform="matrix(1,0,0,1,14.240000,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-437"
                           fill="rgba(0,0,0,1)"
@@ -2732,7 +2346,7 @@
                       transform="matrix(1,0,0,1,51.391998,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-438"
                           fill="rgba(0,0,0,1)"
@@ -2760,7 +2374,7 @@
                       transform="matrix(1,0,0,1,88.543999,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-439"
                           fill="rgba(0,0,0,1)"
@@ -2788,7 +2402,7 @@
                       transform="matrix(1,0,0,1,125.695999,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-440"
                           fill="rgba(0,0,0,1)"
@@ -2816,7 +2430,7 @@
                       transform="matrix(1,0,0,1,162.848007,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-441"
                           fill="rgba(0,0,0,1)"
@@ -2844,7 +2458,7 @@
                       transform="matrix(1,0,0,1,200,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-442"
                           fill="rgba(0,0,0,1)"
@@ -2872,7 +2486,7 @@
                       transform="matrix(1,0,0,1,237.151993,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-443"
                           fill="rgba(0,0,0,1)"
@@ -2900,7 +2514,7 @@
                       transform="matrix(1,0,0,1,274.303986,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-444"
                           fill="rgba(0,0,0,1)"
@@ -2928,7 +2542,7 @@
                       transform="matrix(1,0,0,1,311.455994,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-445"
                           fill="rgba(0,0,0,1)"
@@ -2956,7 +2570,7 @@
                       transform="matrix(1,0,0,1,348.608002,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-446"
                           fill="rgba(0,0,0,1)"
@@ -2984,7 +2598,7 @@
                       transform="matrix(1,0,0,1,385.760010,5)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-447"
                           fill="rgba(0,0,0,1)"
@@ -3008,32 +2622,13 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-391"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-391" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-415"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            />
-            <g
-              id="g-svg-422"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-423"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-6)">
+            <g id="g-svg-415" fill="none" class="legend-handles-group" />
+            <g id="g-svg-422" fill="none" class="legend-indicator">
+              <g id="g-svg-423" fill="none">
+                <g>
                   <path
                     id="g-svg-425"
                     fill="rgba(38,38,38,1)"
@@ -3041,25 +2636,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,0 L 14.928203230275509,0 A 0 0 0 0 1 14.928203230275509 0 L 14.928203230275509,12 A 0 0 0 0 1 14.928203230275509 12 L 6.928203230275509,12 A 0 0 0 0 1 6.928203230275509 12 L 6.928203230275509,12 L 6.928203230275509,11 L 0,6 L 6.928203230275509,1 L 6.928203230275509,0 A 0 0 0 0 1 6.928203230275509 0 Z"
+                    d="M -4,-6 L 4,-6 A 0 0 0 0 1 4 -6 L 4,6 A 0 0 0 0 1 4 6 L -4,6 A 0 0 0 0 1 -4 6 L -4,6 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-6 A 0 0 0 0 1 -4 -6 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-424"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-424" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,410,0)">
+        <g>
           <path
             id="g-svg-213"
             fill="none"
-            d="M 0,0 l 80,0 l 0,400 l-80 0 z"
+            d="M 410,0 l 80,0 l 0,400 l-80 0 z"
+            x="410"
+            y="0"
             width="80"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -3068,6 +2660,8 @@
         <g
           id="g-svg-214"
           fill="none"
+          x="410"
+          y="0"
           width="80"
           height="400"
           transform="matrix(1,0,0,1,410,0)"
@@ -3077,10 +2671,9 @@
             fill="none"
             width="80"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-449"
                 fill="rgba(44,53,66,1)"
@@ -3092,6 +2685,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 Title
@@ -3104,25 +2699,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-489"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-489" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-513"
                 fill="none"
                 transform="matrix(1,0,0,1,0,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-514"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-514" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-515"
                       fill="rgba(229,229,229,1)"
@@ -3131,27 +2716,19 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-516"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-518-517)"
-                  >
+                <g id="g-svg-516" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-518-517)">
                     <path
                       id="g-svg-517"
                       fill="url(#g-pattern-5)"
                       class="ribbon-ribbon"
                       d="M 0,350 L 0,0 L 40.200000000000045,0 L 40.200000000000045,350 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,70)">
+                    <g>
                       <path
                         id="g-svg-518"
                         fill="none"
-                        d="M 0,0 L 0,105 L 40.200000000000045,105 L 40.200000000000045,0 Z"
+                        d="M 0,70 L 0,175 L 40.200000000000045,175 L 40.200000000000045,70 Z"
                         class="ribbon-clip-path"
                       />
                     </g>
@@ -3159,55 +2736,25 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-451"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-452"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-453"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-454"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-455"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-456"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-451" fill="none" class="legend-label-group">
+              <g id="g-svg-452" fill="none" class="legend-label">
+                <g id="g-svg-453" fill="none" class="axis-grid-group" />
+                <g id="g-svg-454" fill="none" class="axis-main-group">
+                  <g id="g-svg-455" fill="none" class="axis-line-group" />
+                  <g id="g-svg-456" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-457"
                       fill="none"
                       transform="matrix(1,0,0,1,40.200001,361.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-40.200001,0)">
+                      <g>
                         <line
                           id="g-svg-523"
                           fill="none"
-                          x1="40.200000000000045"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-40.200000000000045"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3221,13 +2768,13 @@
                       transform="matrix(1,0,0,1,40.200001,274)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-40.200001,0)">
+                      <g>
                         <line
                           id="g-svg-524"
                           fill="none"
-                          x1="40.200000000000045"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-40.200000000000045"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3241,13 +2788,13 @@
                       transform="matrix(1,0,0,1,40.200001,186.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-40.200001,0)">
+                      <g>
                         <line
                           id="g-svg-525"
                           fill="none"
-                          x1="40.200000000000045"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-40.200000000000045"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3261,13 +2808,13 @@
                       transform="matrix(1,0,0,1,40.200001,99)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-40.200001,0)">
+                      <g>
                         <line
                           id="g-svg-526"
                           fill="none"
-                          x1="40.200000000000045"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-40.200000000000045"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3281,13 +2828,13 @@
                       transform="matrix(1,0,0,1,40.200001,11.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-40.200001,0)">
+                      <g>
                         <line
                           id="g-svg-527"
                           fill="none"
-                          x1="40.200000000000045"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-40.200000000000045"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3296,19 +2843,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-467"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-467" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-468"
                       fill="none"
                       transform="matrix(1,0,0,1,45.200001,361.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-528"
                           fill="rgba(0,0,0,1)"
@@ -3335,7 +2877,7 @@
                       transform="matrix(1,0,0,1,45.200001,274)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-529"
                           fill="rgba(0,0,0,1)"
@@ -3362,7 +2904,7 @@
                       transform="matrix(1,0,0,1,45.200001,186.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-530"
                           fill="rgba(0,0,0,1)"
@@ -3389,7 +2931,7 @@
                       transform="matrix(1,0,0,1,45.200001,99)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-531"
                           fill="rgba(0,0,0,1)"
@@ -3416,7 +2958,7 @@
                       transform="matrix(1,0,0,1,45.200001,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-532"
                           fill="rgba(0,0,0,1)"
@@ -3439,70 +2981,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-478"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-478" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-490"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-490" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-491"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,20.100000,81.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-492"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-533"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-492" fill="none" class="handle-icon-group">
+                  <g id="g-svg-533" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-534"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-535"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-536"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -3511,63 +3037,52 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-497"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-497" fill="none" class="handle-label-group" />
               </g>
               <g
                 id="g-svg-498"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,20.100000,186.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-499"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-537"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-499" fill="none" class="handle-icon-group">
+                  <g id="g-svg-537" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-538"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-539"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-540"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -3576,26 +3091,12 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-504"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-504" fill="none" class="handle-label-group" />
               </g>
             </g>
-            <g
-              id="g-svg-519"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-520"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-519" fill="none" class="legend-indicator">
+              <g id="g-svg-520" fill="none">
+                <g>
                   <path
                     id="g-svg-522"
                     fill="rgba(38,38,38,1)"
@@ -3603,25 +3104,22 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-521"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-521" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,500,0)">
+        <g>
           <path
             id="g-svg-215"
             fill="none"
-            d="M 0,0 l 80,0 l 0,400 l-80 0 z"
+            d="M 500,0 l 80,0 l 0,400 l-80 0 z"
+            x="500"
+            y="0"
             width="80"
             height="400"
             stroke="rgba(255,0,0,1)"
@@ -3630,6 +3128,8 @@
         <g
           id="g-svg-216"
           fill="none"
+          x="500"
+          y="0"
           width="80"
           height="400"
           transform="matrix(1,0,0,1,500,0)"
@@ -3639,10 +3139,9 @@
             fill="none"
             width="80"
             height="400"
-            transform="matrix(1,0,0,1,0,0)"
             class="legend-title"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-542"
                 fill="rgba(44,53,66,1)"
@@ -3654,6 +3153,8 @@
                 font-weight="bold"
                 font-size="12"
                 font-family="sans-serif"
+                x="0"
+                y="0"
                 text-anchor="left"
               >
                 Title
@@ -3666,25 +3167,15 @@
             transform="matrix(1,0,0,1,0,27)"
             class="legend-content-group"
           >
-            <g
-              id="g-svg-582"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-ribbon-group"
-            >
+            <g id="g-svg-582" fill="none" class="legend-ribbon-group">
               <g
                 id="g-svg-606"
                 fill="none"
                 transform="matrix(1,0,0,1,39.799999,11.500000)"
                 class="legend-ribbon"
               >
-                <g
-                  id="g-svg-607"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-background-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-607" fill="none" class="ribbon-background-group">
+                  <g>
                     <path
                       id="g-svg-608"
                       fill="rgba(229,229,229,1)"
@@ -3693,27 +3184,19 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-609"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="ribbon-ribbon-group"
-                >
-                  <g
-                    transform="matrix(1,0,0,1,0,0)"
-                    clip-path="url(#clip-path-611-610)"
-                  >
+                <g id="g-svg-609" fill="none" class="ribbon-ribbon-group">
+                  <g clip-path="url(#clip-path-611-610)">
                     <path
                       id="g-svg-610"
                       fill="url(#g-pattern-5)"
                       class="ribbon-ribbon"
                       d="M 0,350 L 0,0 L 40.200000000000045,0 L 40.200000000000045,350 Z"
                     />
-                    <g transform="matrix(1,0,0,1,0,70)">
+                    <g>
                       <path
                         id="g-svg-611"
                         fill="none"
-                        d="M 0,0 L 0,105 L 40.200000000000045,105 L 40.200000000000045,0 Z"
+                        d="M 0,70 L 0,175 L 40.200000000000045,175 L 40.200000000000045,70 Z"
                         class="ribbon-clip-path"
                       />
                     </g>
@@ -3721,55 +3204,25 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-544"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-label-group"
-            >
-              <g
-                id="g-svg-545"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label"
-              >
-                <g
-                  id="g-svg-546"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-grid-group"
-                />
-                <g
-                  id="g-svg-547"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-main-group"
-                >
-                  <g
-                    id="g-svg-548"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-line-group"
-                  />
-                  <g
-                    id="g-svg-549"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-tick-group"
-                  >
+            <g id="g-svg-544" fill="none" class="legend-label-group">
+              <g id="g-svg-545" fill="none" class="legend-label">
+                <g id="g-svg-546" fill="none" class="axis-grid-group" />
+                <g id="g-svg-547" fill="none" class="axis-main-group">
+                  <g id="g-svg-548" fill="none" class="axis-line-group" />
+                  <g id="g-svg-549" fill="none" class="axis-tick-group">
                     <g
                       id="g-svg-550"
                       fill="none"
                       transform="matrix(1,0,0,1,80,361.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-40.200001,0)">
+                      <g>
                         <line
                           id="g-svg-616"
                           fill="none"
-                          x1="40.200000000000045"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-40.200000000000045"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3783,13 +3236,13 @@
                       transform="matrix(1,0,0,1,80,274)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-40.200001,0)">
+                      <g>
                         <line
                           id="g-svg-617"
                           fill="none"
-                          x1="40.200000000000045"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-40.200000000000045"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3803,13 +3256,13 @@
                       transform="matrix(1,0,0,1,80,186.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-40.200001,0)">
+                      <g>
                         <line
                           id="g-svg-618"
                           fill="none"
-                          x1="40.200000000000045"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-40.200000000000045"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3823,13 +3276,13 @@
                       transform="matrix(1,0,0,1,80,99)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-40.200001,0)">
+                      <g>
                         <line
                           id="g-svg-619"
                           fill="none"
-                          x1="40.200000000000045"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-40.200000000000045"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3843,13 +3296,13 @@
                       transform="matrix(1,0,0,1,80,11.500000)"
                       class="axis-tick"
                     >
-                      <g transform="matrix(1,0,0,1,-40.200001,0)">
+                      <g>
                         <line
                           id="g-svg-620"
                           fill="none"
-                          x1="40.200000000000045"
+                          x1="0"
                           y1="0"
-                          x2="0"
+                          x2="-40.200000000000045"
                           y2="0"
                           class="axis-tick-item"
                           stroke-width="1"
@@ -3858,19 +3311,14 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-560"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="axis-label-group"
-                  >
+                  <g id="g-svg-560" fill="none" class="axis-label-group">
                     <g
                       id="g-svg-561"
                       fill="none"
                       transform="matrix(1,0,0,1,34.799999,361.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-621"
                           fill="rgba(0,0,0,1)"
@@ -3897,7 +3345,7 @@
                       transform="matrix(1,0,0,1,34.799999,274)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-622"
                           fill="rgba(0,0,0,1)"
@@ -3924,7 +3372,7 @@
                       transform="matrix(1,0,0,1,34.799999,186.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-623"
                           fill="rgba(0,0,0,1)"
@@ -3951,7 +3399,7 @@
                       transform="matrix(1,0,0,1,34.799999,99)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-624"
                           fill="rgba(0,0,0,1)"
@@ -3978,7 +3426,7 @@
                       transform="matrix(1,0,0,1,34.799999,11.500000)"
                       class="axis-label"
                     >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <text
                           id="g-svg-625"
                           fill="rgba(0,0,0,1)"
@@ -4001,70 +3449,54 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-571"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="axis-title-group"
-                />
+                <g id="g-svg-571" fill="none" class="axis-title-group" />
               </g>
             </g>
-            <g
-              id="g-svg-583"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-handles-group"
-            >
+            <g id="g-svg-583" fill="none" class="legend-handles-group">
               <g
                 id="g-svg-584"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,59.900002,81.500000)"
                 class="legend-handle legend-start-handle"
               >
-                <g
-                  id="g-svg-585"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-626"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-585" fill="none" class="handle-icon-group">
+                  <g id="g-svg-626" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-627"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-628"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-629"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -4073,63 +3505,52 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-590"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-590" fill="none" class="handle-label-group" />
               </g>
               <g
                 id="g-svg-591"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,59.900002,186.500000)"
                 class="legend-handle legend-end-handle"
               >
-                <g
-                  id="g-svg-592"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g
-                    id="g-svg-630"
-                    fill="none"
-                    transform="matrix(0,1,-1,0,0,0)"
-                    class="handle-icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-5,-12)">
+                <g id="g-svg-592" fill="none" class="handle-icon-group">
+                  <g id="g-svg-630" fill="none" x="0" y="0" class="handle-icon">
+                    <g transform="matrix(0,1,-1,0,0,0)">
                       <path
                         id="g-svg-631"
                         fill="rgba(255,255,255,1)"
                         class="handle-icon-rect"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
-                        d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                        d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                         width="10"
                         height="24"
+                        x="-5"
+                        y="-12"
                       />
-                      <g transform="matrix(1,0,0,1,3.333333,6)">
+                      <g>
                         <line
                           id="g-svg-632"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="-1.666666666666667"
+                          y1="-6"
+                          x2="-1.666666666666667"
+                          y2="6"
                           class="handle-icon-line-1"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.666667,6)">
+                      <g>
                         <line
                           id="g-svg-633"
                           fill="rgba(255,255,255,1)"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="1.666666666666666"
+                          y1="-6"
+                          x2="1.666666666666666"
+                          y2="6"
                           class="handle-icon-line-2"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
@@ -4138,26 +3559,12 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-597"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-597" fill="none" class="handle-label-group" />
               </g>
             </g>
-            <g
-              id="g-svg-612"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-indicator"
-            >
-              <g
-                id="g-svg-613"
-                fill="none"
-                transform="matrix(1,0,0,1,10.928204,0)"
-              >
-                <g transform="matrix(1,0,0,1,-10.928204,-5)">
+            <g id="g-svg-612" fill="none" class="legend-indicator">
+              <g id="g-svg-613" fill="none">
+                <g>
                   <path
                     id="g-svg-615"
                     fill="rgba(38,38,38,1)"
@@ -4165,16 +3572,11 @@
                     stroke-linecap="round"
                     stroke-width="1"
                     stroke="rgba(51,51,51,1)"
-                    d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                    d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                     visibility="hidden"
                   />
                 </g>
-                <g
-                  id="g-svg-614"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="indicator-label-group"
-                />
+                <g id="g-svg-614" fill="none" class="indicator-label-group" />
               </g>
             </g>
           </g>
diff --git a/__tests__/integration/snapshots/CrosshairCircle.svg b/__tests__/integration/snapshots/CrosshairCircle.svg
index ddfa48143..09a154fbb 100644
--- a/__tests__/integration/snapshots/CrosshairCircle.svg
+++ b/__tests__/integration/snapshots/CrosshairCircle.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-150" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-150" fill="none">
+        <g>
           <path
             id="g-svg-151"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="400"
           />
         </g>
-        <g id="g-svg-152" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-152" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 400,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,20 L 400,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,40 L 400,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,60.00000000000001 L 400,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,10 +74,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,80 L 400,80"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,100)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -100,10 +85,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,100 L 400,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,120)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -111,10 +96,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,120.00000000000001 L 400,120.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,140)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -122,10 +107,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,140 L 400,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,160)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -133,10 +118,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,160 L 400,160"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,180)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -144,10 +129,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,180 L 400,180"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,200)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -155,10 +140,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,200 L 400,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,220)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -166,10 +151,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,220.00000000000003 L 400,220.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,240)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -177,10 +162,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,240.00000000000003 L 400,240.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,260)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -188,10 +173,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,260 L 400,260"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,280)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -199,10 +184,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,280 L 400,280"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,300)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -210,10 +195,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,300 L 400,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,320)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -221,10 +206,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,320 L 400,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,340)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -232,10 +217,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,340.00000000000006 L 400,340.00000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,360)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -243,10 +228,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,360 L 400,360"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,380)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -254,31 +239,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,380 L 400,380"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
@@ -292,25 +262,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-29"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-tick-group" />
+            <g id="g-svg-29" fill="none" class="axis-label-group">
               <g
                 id="g-svg-30"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -333,10 +293,10 @@
               <g
                 id="g-svg-31"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-51"
                     fill="rgba(0,0,0,1)"
@@ -359,10 +319,10 @@
               <g
                 id="g-svg-32"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-52"
                     fill="rgba(0,0,0,1)"
@@ -385,10 +345,10 @@
               <g
                 id="g-svg-33"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-53"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +371,10 @@
               <g
                 id="g-svg-34"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-54"
                     fill="rgba(0,0,0,1)"
@@ -437,10 +397,10 @@
               <g
                 id="g-svg-35"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,100)"
+                transform="matrix(1,0,0,1,-10,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-55"
                     fill="rgba(0,0,0,1)"
@@ -463,10 +423,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,120)"
+                transform="matrix(1,0,0,1,-10,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-56"
                     fill="rgba(0,0,0,1)"
@@ -489,10 +449,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,140)"
+                transform="matrix(1,0,0,1,-10,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -515,10 +475,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,160)"
+                transform="matrix(1,0,0,1,-10,160)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -541,10 +501,10 @@
               <g
                 id="g-svg-39"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,180)"
+                transform="matrix(1,0,0,1,-10,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -567,10 +527,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,200)"
+                transform="matrix(1,0,0,1,-10,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -593,10 +553,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,220)"
+                transform="matrix(1,0,0,1,-10,220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -619,10 +579,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,240)"
+                transform="matrix(1,0,0,1,-10,240)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -645,10 +605,10 @@
               <g
                 id="g-svg-43"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,260)"
+                transform="matrix(1,0,0,1,-10,260)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -671,10 +631,10 @@
               <g
                 id="g-svg-44"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,280)"
+                transform="matrix(1,0,0,1,-10,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -697,10 +657,10 @@
               <g
                 id="g-svg-45"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,300)"
+                transform="matrix(1,0,0,1,-10,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -723,10 +683,10 @@
               <g
                 id="g-svg-46"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,320)"
+                transform="matrix(1,0,0,1,-10,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -749,10 +709,10 @@
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,340)"
+                transform="matrix(1,0,0,1,-10,340)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -775,10 +735,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,360)"
+                transform="matrix(1,0,0,1,-10,360)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -801,10 +761,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,380)"
+                transform="matrix(1,0,0,1,-10,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -826,33 +786,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-70"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-70" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-153" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-72"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-73"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-153" fill="none">
+          <g id="g-svg-71" fill="none" class="axis-grid-group">
+            <g id="g-svg-72" fill="none" class="axis-grid">
+              <g id="g-svg-73" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-75"
                     fill="none"
@@ -863,7 +803,7 @@
                     d="M 0,0 L 0,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-76"
                     fill="none"
@@ -871,10 +811,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 20,0 L 20,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-77"
                     fill="none"
@@ -882,10 +822,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 40,0 L 40,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-78"
                     fill="none"
@@ -893,10 +833,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 60.00000000000001,0 L 60.00000000000001,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-79"
                     fill="none"
@@ -904,10 +844,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 80,0 L 80,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,0)">
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
@@ -915,10 +855,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 100,0 L 100,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,120,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
@@ -926,10 +866,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 120.00000000000001,0 L 120.00000000000001,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,140,0)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
@@ -937,10 +877,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 140,0 L 140,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,160,0)">
+                <g>
                   <path
                     id="g-svg-83"
                     fill="none"
@@ -948,10 +888,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 160,0 L 160,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180,0)">
+                <g>
                   <path
                     id="g-svg-84"
                     fill="none"
@@ -959,10 +899,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 180,0 L 180,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,0)">
+                <g>
                   <path
                     id="g-svg-85"
                     fill="none"
@@ -970,10 +910,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 200,0 L 200,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,0)">
+                <g>
                   <path
                     id="g-svg-86"
                     fill="none"
@@ -981,10 +921,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 220.00000000000003,0 L 220.00000000000003,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,240,0)">
+                <g>
                   <path
                     id="g-svg-87"
                     fill="none"
@@ -992,10 +932,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 240.00000000000003,0 L 240.00000000000003,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,0)">
+                <g>
                   <path
                     id="g-svg-88"
                     fill="none"
@@ -1003,10 +943,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 260,0 L 260,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,280,0)">
+                <g>
                   <path
                     id="g-svg-89"
                     fill="none"
@@ -1014,10 +954,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 280,0 L 280,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,0)">
+                <g>
                   <path
                     id="g-svg-90"
                     fill="none"
@@ -1025,10 +965,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 300,0 L 300,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,0)">
+                <g>
                   <path
                     id="g-svg-91"
                     fill="none"
@@ -1036,10 +976,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 320,0 L 320,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,340,0)">
+                <g>
                   <path
                     id="g-svg-92"
                     fill="none"
@@ -1047,10 +987,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 340.00000000000006,0 L 340.00000000000006,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,360,0)">
+                <g>
                   <path
                     id="g-svg-93"
                     fill="none"
@@ -1058,10 +998,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 360,0 L 360,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,0)">
+                <g>
                   <path
                     id="g-svg-94"
                     fill="none"
@@ -1069,31 +1009,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 380,0 L 380,400"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-74"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-74" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-95"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-96"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-95" fill="none" class="axis-main-group">
+            <g id="g-svg-96" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-97"
                   fill="none"
@@ -1107,25 +1032,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-98"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-99"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-98" fill="none" class="axis-tick-group" />
+            <g id="g-svg-99" fill="none" class="axis-label-group">
               <g
                 id="g-svg-100"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-120"
                     fill="rgba(0,0,0,1)"
@@ -1152,7 +1067,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-121"
                     fill="rgba(0,0,0,1)"
@@ -1179,7 +1094,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-122"
                     fill="rgba(0,0,0,1)"
@@ -1206,7 +1121,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-123"
                     fill="rgba(0,0,0,1)"
@@ -1233,7 +1148,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-124"
                     fill="rgba(0,0,0,1)"
@@ -1260,7 +1175,7 @@
                 transform="matrix(1,0,0,1,100,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-125"
                     fill="rgba(0,0,0,1)"
@@ -1287,7 +1202,7 @@
                 transform="matrix(1,0,0,1,120,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-126"
                     fill="rgba(0,0,0,1)"
@@ -1314,7 +1229,7 @@
                 transform="matrix(1,0,0,1,140,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-127"
                     fill="rgba(0,0,0,1)"
@@ -1341,7 +1256,7 @@
                 transform="matrix(1,0,0,1,160,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-128"
                     fill="rgba(0,0,0,1)"
@@ -1368,7 +1283,7 @@
                 transform="matrix(1,0,0,1,180,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-129"
                     fill="rgba(0,0,0,1)"
@@ -1395,7 +1310,7 @@
                 transform="matrix(1,0,0,1,200,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-130"
                     fill="rgba(0,0,0,1)"
@@ -1422,7 +1337,7 @@
                 transform="matrix(1,0,0,1,220,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-131"
                     fill="rgba(0,0,0,1)"
@@ -1449,7 +1364,7 @@
                 transform="matrix(1,0,0,1,240,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-132"
                     fill="rgba(0,0,0,1)"
@@ -1476,7 +1391,7 @@
                 transform="matrix(1,0,0,1,260,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-133"
                     fill="rgba(0,0,0,1)"
@@ -1503,7 +1418,7 @@
                 transform="matrix(1,0,0,1,280,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-134"
                     fill="rgba(0,0,0,1)"
@@ -1530,7 +1445,7 @@
                 transform="matrix(1,0,0,1,300,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-135"
                     fill="rgba(0,0,0,1)"
@@ -1557,7 +1472,7 @@
                 transform="matrix(1,0,0,1,320,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-136"
                     fill="rgba(0,0,0,1)"
@@ -1584,7 +1499,7 @@
                 transform="matrix(1,0,0,1,340,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-137"
                     fill="rgba(0,0,0,1)"
@@ -1611,7 +1526,7 @@
                 transform="matrix(1,0,0,1,360,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-138"
                     fill="rgba(0,0,0,1)"
@@ -1638,7 +1553,7 @@
                 transform="matrix(1,0,0,1,380,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-139"
                     fill="rgba(0,0,0,1)"
@@ -1661,32 +1576,19 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-140"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-140" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-154" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-141"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class=".crosshair-group"
-          >
-            <g
-              id="g-svg-142"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="crosshair-tag"
-            >
-              <g transform="matrix(1,0,0,1,-4,-4)">
+        <g id="g-svg-154" fill="none">
+          <g id="g-svg-141" fill="none" class=".crosshair-group">
+            <g id="g-svg-142" fill="none" class="crosshair-tag">
+              <g>
                 <path
                   id="g-svg-148"
                   fill="rgba(250,250,250,1)"
                   class="tag-background"
-                  d="M 2,0 l 4,0 a 2,2,0,0,1,2,2 l 0,4 a 2,2,0,0,1,-2,2 l -4,0 a 2,2,0,0,1,-2,-2 l 0,-4 a 2,2,0,0,1,2,-2 z"
+                  d="M -2,-4 l 4,0 a 2,2,0,0,1,2,2 l 0,4 a 2,2,0,0,1,-2,2 l -4,0 a 2,2,0,0,1,-2,-2 l 0,-4 a 2,2,0,0,1,2,-2 z"
+                  y="-4"
+                  x="-4"
                   width="8"
                   height="8"
                   stroke="rgba(217,217,217,1)"
@@ -1700,13 +1602,8 @@
                 transform="matrix(1,0,0,1,4,4)"
                 class="tag-content"
               >
-                <g
-                  id="g-svg-144"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="tag-marker"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-144" fill="none" class="tag-marker">
+                  <g>
                     <path
                       id="g-svg-146"
                       fill="none"
@@ -1718,7 +1615,7 @@
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,150,150)">
+            <g>
               <path
                 id="g-svg-149"
                 fill="none"
@@ -1727,7 +1624,7 @@
                 stroke-opacity="0.45"
                 stroke-width="1"
                 stroke-dasharray="5,5"
-                d="M 0,50 A 50 50 0 1 0 100 50 A 50 50 0 1 0 0 50 Z"
+                d="M 150,200 A 50 50 0 1 0 250 200 A 50 50 0 1 0 150 200 Z"
               />
             </g>
           </g>
diff --git a/__tests__/integration/snapshots/CrosshairLine.svg b/__tests__/integration/snapshots/CrosshairLine.svg
index e47c9f566..9fae5d008 100644
--- a/__tests__/integration/snapshots/CrosshairLine.svg
+++ b/__tests__/integration/snapshots/CrosshairLine.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-25" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-25" fill="none">
+        <g>
           <path
             id="g-svg-26"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="400"
           />
         </g>
-        <g id="g-svg-27" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-27" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 400,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,20 L 400,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,40 L 400,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,60.00000000000001 L 400,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,10 +74,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,80 L 400,80"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,100)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -100,10 +85,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,100 L 400,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,120)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -111,10 +96,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,120.00000000000001 L 400,120.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,140)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -122,10 +107,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,140 L 400,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,160)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -133,10 +118,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,160 L 400,160"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,180)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -144,10 +129,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,180 L 400,180"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,200)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -155,10 +140,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,200 L 400,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,220)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -166,10 +151,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,220.00000000000003 L 400,220.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,240)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -177,10 +162,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,240.00000000000003 L 400,240.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,260)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -188,10 +173,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,260 L 400,260"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,280)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -199,10 +184,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,280 L 400,280"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,300)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -210,10 +195,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,300 L 400,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,320)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -221,10 +206,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,320 L 400,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,340)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -232,10 +217,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,340.00000000000006 L 400,340.00000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,360)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -243,10 +228,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,360 L 400,360"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,380)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -254,31 +239,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,380 L 400,380"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
@@ -292,25 +262,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-29"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-tick-group" />
+            <g id="g-svg-29" fill="none" class="axis-label-group">
               <g
                 id="g-svg-30"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -333,10 +293,10 @@
               <g
                 id="g-svg-31"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-51"
                     fill="rgba(0,0,0,1)"
@@ -359,10 +319,10 @@
               <g
                 id="g-svg-32"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-52"
                     fill="rgba(0,0,0,1)"
@@ -385,10 +345,10 @@
               <g
                 id="g-svg-33"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-53"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +371,10 @@
               <g
                 id="g-svg-34"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-54"
                     fill="rgba(0,0,0,1)"
@@ -437,10 +397,10 @@
               <g
                 id="g-svg-35"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,100)"
+                transform="matrix(1,0,0,1,-10,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-55"
                     fill="rgba(0,0,0,1)"
@@ -463,10 +423,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,120)"
+                transform="matrix(1,0,0,1,-10,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-56"
                     fill="rgba(0,0,0,1)"
@@ -489,10 +449,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,140)"
+                transform="matrix(1,0,0,1,-10,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -515,10 +475,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,160)"
+                transform="matrix(1,0,0,1,-10,160)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -541,10 +501,10 @@
               <g
                 id="g-svg-39"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,180)"
+                transform="matrix(1,0,0,1,-10,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -567,10 +527,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,200)"
+                transform="matrix(1,0,0,1,-10,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -593,10 +553,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,220)"
+                transform="matrix(1,0,0,1,-10,220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -619,10 +579,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,240)"
+                transform="matrix(1,0,0,1,-10,240)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -645,10 +605,10 @@
               <g
                 id="g-svg-43"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,260)"
+                transform="matrix(1,0,0,1,-10,260)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -671,10 +631,10 @@
               <g
                 id="g-svg-44"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,280)"
+                transform="matrix(1,0,0,1,-10,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -697,10 +657,10 @@
               <g
                 id="g-svg-45"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,300)"
+                transform="matrix(1,0,0,1,-10,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -723,10 +683,10 @@
               <g
                 id="g-svg-46"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,320)"
+                transform="matrix(1,0,0,1,-10,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -749,10 +709,10 @@
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,340)"
+                transform="matrix(1,0,0,1,-10,340)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -775,10 +735,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,360)"
+                transform="matrix(1,0,0,1,-10,360)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -801,10 +761,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,380)"
+                transform="matrix(1,0,0,1,-10,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -826,33 +786,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-70"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-70" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-28" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-72"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-73"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-28" fill="none">
+          <g id="g-svg-71" fill="none" class="axis-grid-group">
+            <g id="g-svg-72" fill="none" class="axis-grid">
+              <g id="g-svg-73" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-75"
                     fill="none"
@@ -863,7 +803,7 @@
                     d="M 0,0 L 0,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-76"
                     fill="none"
@@ -871,10 +811,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 20,0 L 20,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-77"
                     fill="none"
@@ -882,10 +822,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 40,0 L 40,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-78"
                     fill="none"
@@ -893,10 +833,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 60.00000000000001,0 L 60.00000000000001,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-79"
                     fill="none"
@@ -904,10 +844,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 80,0 L 80,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,0)">
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
@@ -915,10 +855,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 100,0 L 100,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,120,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
@@ -926,10 +866,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 120.00000000000001,0 L 120.00000000000001,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,140,0)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
@@ -937,10 +877,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 140,0 L 140,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,160,0)">
+                <g>
                   <path
                     id="g-svg-83"
                     fill="none"
@@ -948,10 +888,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 160,0 L 160,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180,0)">
+                <g>
                   <path
                     id="g-svg-84"
                     fill="none"
@@ -959,10 +899,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 180,0 L 180,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,0)">
+                <g>
                   <path
                     id="g-svg-85"
                     fill="none"
@@ -970,10 +910,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 200,0 L 200,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,0)">
+                <g>
                   <path
                     id="g-svg-86"
                     fill="none"
@@ -981,10 +921,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 220.00000000000003,0 L 220.00000000000003,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,240,0)">
+                <g>
                   <path
                     id="g-svg-87"
                     fill="none"
@@ -992,10 +932,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 240.00000000000003,0 L 240.00000000000003,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,0)">
+                <g>
                   <path
                     id="g-svg-88"
                     fill="none"
@@ -1003,10 +943,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 260,0 L 260,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,280,0)">
+                <g>
                   <path
                     id="g-svg-89"
                     fill="none"
@@ -1014,10 +954,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 280,0 L 280,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,0)">
+                <g>
                   <path
                     id="g-svg-90"
                     fill="none"
@@ -1025,10 +965,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 300,0 L 300,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,0)">
+                <g>
                   <path
                     id="g-svg-91"
                     fill="none"
@@ -1036,10 +976,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 320,0 L 320,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,340,0)">
+                <g>
                   <path
                     id="g-svg-92"
                     fill="none"
@@ -1047,10 +987,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 340.00000000000006,0 L 340.00000000000006,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,360,0)">
+                <g>
                   <path
                     id="g-svg-93"
                     fill="none"
@@ -1058,10 +998,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 360,0 L 360,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,0)">
+                <g>
                   <path
                     id="g-svg-94"
                     fill="none"
@@ -1069,31 +1009,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 380,0 L 380,400"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-74"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-74" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-95"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-96"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-95" fill="none" class="axis-main-group">
+            <g id="g-svg-96" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-97"
                   fill="none"
@@ -1107,25 +1032,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-98"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-99"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-98" fill="none" class="axis-tick-group" />
+            <g id="g-svg-99" fill="none" class="axis-label-group">
               <g
                 id="g-svg-100"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-120"
                     fill="rgba(0,0,0,1)"
@@ -1152,7 +1067,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-121"
                     fill="rgba(0,0,0,1)"
@@ -1179,7 +1094,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-122"
                     fill="rgba(0,0,0,1)"
@@ -1206,7 +1121,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-123"
                     fill="rgba(0,0,0,1)"
@@ -1233,7 +1148,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-124"
                     fill="rgba(0,0,0,1)"
@@ -1260,7 +1175,7 @@
                 transform="matrix(1,0,0,1,100,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-125"
                     fill="rgba(0,0,0,1)"
@@ -1287,7 +1202,7 @@
                 transform="matrix(1,0,0,1,120,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-126"
                     fill="rgba(0,0,0,1)"
@@ -1314,7 +1229,7 @@
                 transform="matrix(1,0,0,1,140,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-127"
                     fill="rgba(0,0,0,1)"
@@ -1341,7 +1256,7 @@
                 transform="matrix(1,0,0,1,160,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-128"
                     fill="rgba(0,0,0,1)"
@@ -1368,7 +1283,7 @@
                 transform="matrix(1,0,0,1,180,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-129"
                     fill="rgba(0,0,0,1)"
@@ -1395,7 +1310,7 @@
                 transform="matrix(1,0,0,1,200,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-130"
                     fill="rgba(0,0,0,1)"
@@ -1422,7 +1337,7 @@
                 transform="matrix(1,0,0,1,220,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-131"
                     fill="rgba(0,0,0,1)"
@@ -1449,7 +1364,7 @@
                 transform="matrix(1,0,0,1,240,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-132"
                     fill="rgba(0,0,0,1)"
@@ -1476,7 +1391,7 @@
                 transform="matrix(1,0,0,1,260,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-133"
                     fill="rgba(0,0,0,1)"
@@ -1503,7 +1418,7 @@
                 transform="matrix(1,0,0,1,280,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-134"
                     fill="rgba(0,0,0,1)"
@@ -1530,7 +1445,7 @@
                 transform="matrix(1,0,0,1,300,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-135"
                     fill="rgba(0,0,0,1)"
@@ -1557,7 +1472,7 @@
                 transform="matrix(1,0,0,1,320,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-136"
                     fill="rgba(0,0,0,1)"
@@ -1584,7 +1499,7 @@
                 transform="matrix(1,0,0,1,340,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-137"
                     fill="rgba(0,0,0,1)"
@@ -1611,7 +1526,7 @@
                 transform="matrix(1,0,0,1,360,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-138"
                     fill="rgba(0,0,0,1)"
@@ -1638,7 +1553,7 @@
                 transform="matrix(1,0,0,1,380,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-139"
                     fill="rgba(0,0,0,1)"
@@ -1661,32 +1576,24 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-140"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-140" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-29" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-29" fill="none">
           <g
             id="g-svg-141"
             fill="none"
             transform="matrix(1,0,0,1,50,50)"
             class=".crosshair-group"
           >
-            <g
-              id="g-svg-142"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="crosshair-tag"
-            >
-              <g transform="matrix(1,0,0,1,-13.860000,-34.500000)">
+            <g id="g-svg-142" fill="none" class="crosshair-tag">
+              <g>
                 <path
                   id="g-svg-148"
                   fill="rgba(250,250,250,1)"
                   class="tag-background"
-                  d="M 2,0 l 23.72,0 a 2,2,0,0,1,2,2 l 0,27 a 2,2,0,0,1,-2,2 l -23.72,0 a 2,2,0,0,1,-2,-2 l 0,-27 a 2,2,0,0,1,2,-2 z"
+                  d="M -11.859999656677246,-34.5 l 23.72,0 a 2,2,0,0,1,2,2 l 0,27 a 2,2,0,0,1,-2,2 l -23.72,0 a 2,2,0,0,1,-2,-2 l 0,-27 a 2,2,0,0,1,2,-2 z"
+                  y="-34.5"
+                  x="-13.859999656677246"
                   width="27.72"
                   height="31"
                   stroke="rgba(217,217,217,1)"
@@ -1700,13 +1607,8 @@
                 transform="matrix(1,0,0,1,-9.860000,-19)"
                 class="tag-content"
               >
-                <g
-                  id="g-svg-144"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="tag-marker"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-144" fill="none" class="tag-marker">
+                  <g>
                     <path
                       id="g-svg-146"
                       fill="none"
@@ -1716,7 +1618,7 @@
                     />
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-147"
                     fill="rgba(0,0,0,1)"
@@ -1738,7 +1640,7 @@
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-149"
                 fill="none"
diff --git a/__tests__/integration/snapshots/CrosshairPolygon.svg b/__tests__/integration/snapshots/CrosshairPolygon.svg
index 2c26d044c..7cd2f6bcc 100644
--- a/__tests__/integration/snapshots/CrosshairPolygon.svg
+++ b/__tests__/integration/snapshots/CrosshairPolygon.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-150" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-150" fill="none">
+        <g>
           <path
             id="g-svg-151"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="400"
           />
         </g>
-        <g id="g-svg-152" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-152" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 400,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,20 L 400,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,40 L 400,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,60.00000000000001 L 400,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,10 +74,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,80 L 400,80"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,100)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -100,10 +85,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,100 L 400,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,120)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -111,10 +96,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,120.00000000000001 L 400,120.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,140)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -122,10 +107,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,140 L 400,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,160)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -133,10 +118,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,160 L 400,160"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,180)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -144,10 +129,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,180 L 400,180"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,200)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -155,10 +140,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,200 L 400,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,220)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -166,10 +151,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,220.00000000000003 L 400,220.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,240)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -177,10 +162,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,240.00000000000003 L 400,240.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,260)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -188,10 +173,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,260 L 400,260"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,280)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -199,10 +184,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,280 L 400,280"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,300)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -210,10 +195,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,300 L 400,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,320)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -221,10 +206,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,320 L 400,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,340)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -232,10 +217,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,340.00000000000006 L 400,340.00000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,360)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -243,10 +228,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,360 L 400,360"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,380)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -254,31 +239,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,380 L 400,380"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
@@ -292,25 +262,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-29"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-tick-group" />
+            <g id="g-svg-29" fill="none" class="axis-label-group">
               <g
                 id="g-svg-30"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -333,10 +293,10 @@
               <g
                 id="g-svg-31"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-51"
                     fill="rgba(0,0,0,1)"
@@ -359,10 +319,10 @@
               <g
                 id="g-svg-32"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-52"
                     fill="rgba(0,0,0,1)"
@@ -385,10 +345,10 @@
               <g
                 id="g-svg-33"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-53"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +371,10 @@
               <g
                 id="g-svg-34"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-54"
                     fill="rgba(0,0,0,1)"
@@ -437,10 +397,10 @@
               <g
                 id="g-svg-35"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,100)"
+                transform="matrix(1,0,0,1,-10,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-55"
                     fill="rgba(0,0,0,1)"
@@ -463,10 +423,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,120)"
+                transform="matrix(1,0,0,1,-10,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-56"
                     fill="rgba(0,0,0,1)"
@@ -489,10 +449,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,140)"
+                transform="matrix(1,0,0,1,-10,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -515,10 +475,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,160)"
+                transform="matrix(1,0,0,1,-10,160)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -541,10 +501,10 @@
               <g
                 id="g-svg-39"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,180)"
+                transform="matrix(1,0,0,1,-10,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -567,10 +527,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,200)"
+                transform="matrix(1,0,0,1,-10,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -593,10 +553,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,220)"
+                transform="matrix(1,0,0,1,-10,220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -619,10 +579,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,240)"
+                transform="matrix(1,0,0,1,-10,240)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -645,10 +605,10 @@
               <g
                 id="g-svg-43"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,260)"
+                transform="matrix(1,0,0,1,-10,260)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -671,10 +631,10 @@
               <g
                 id="g-svg-44"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,280)"
+                transform="matrix(1,0,0,1,-10,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -697,10 +657,10 @@
               <g
                 id="g-svg-45"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,300)"
+                transform="matrix(1,0,0,1,-10,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -723,10 +683,10 @@
               <g
                 id="g-svg-46"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,320)"
+                transform="matrix(1,0,0,1,-10,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -749,10 +709,10 @@
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,340)"
+                transform="matrix(1,0,0,1,-10,340)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -775,10 +735,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,360)"
+                transform="matrix(1,0,0,1,-10,360)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -801,10 +761,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,380)"
+                transform="matrix(1,0,0,1,-10,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -826,33 +786,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-70"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-70" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-153" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-72"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-73"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-153" fill="none">
+          <g id="g-svg-71" fill="none" class="axis-grid-group">
+            <g id="g-svg-72" fill="none" class="axis-grid">
+              <g id="g-svg-73" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-75"
                     fill="none"
@@ -863,7 +803,7 @@
                     d="M 0,0 L 0,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-76"
                     fill="none"
@@ -871,10 +811,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 20,0 L 20,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-77"
                     fill="none"
@@ -882,10 +822,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 40,0 L 40,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-78"
                     fill="none"
@@ -893,10 +833,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 60.00000000000001,0 L 60.00000000000001,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-79"
                     fill="none"
@@ -904,10 +844,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 80,0 L 80,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,0)">
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
@@ -915,10 +855,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 100,0 L 100,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,120,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
@@ -926,10 +866,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 120.00000000000001,0 L 120.00000000000001,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,140,0)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
@@ -937,10 +877,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 140,0 L 140,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,160,0)">
+                <g>
                   <path
                     id="g-svg-83"
                     fill="none"
@@ -948,10 +888,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 160,0 L 160,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180,0)">
+                <g>
                   <path
                     id="g-svg-84"
                     fill="none"
@@ -959,10 +899,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 180,0 L 180,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,0)">
+                <g>
                   <path
                     id="g-svg-85"
                     fill="none"
@@ -970,10 +910,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 200,0 L 200,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,0)">
+                <g>
                   <path
                     id="g-svg-86"
                     fill="none"
@@ -981,10 +921,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 220.00000000000003,0 L 220.00000000000003,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,240,0)">
+                <g>
                   <path
                     id="g-svg-87"
                     fill="none"
@@ -992,10 +932,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 240.00000000000003,0 L 240.00000000000003,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,0)">
+                <g>
                   <path
                     id="g-svg-88"
                     fill="none"
@@ -1003,10 +943,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 260,0 L 260,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,280,0)">
+                <g>
                   <path
                     id="g-svg-89"
                     fill="none"
@@ -1014,10 +954,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 280,0 L 280,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,0)">
+                <g>
                   <path
                     id="g-svg-90"
                     fill="none"
@@ -1025,10 +965,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 300,0 L 300,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,0)">
+                <g>
                   <path
                     id="g-svg-91"
                     fill="none"
@@ -1036,10 +976,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 320,0 L 320,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,340,0)">
+                <g>
                   <path
                     id="g-svg-92"
                     fill="none"
@@ -1047,10 +987,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 340.00000000000006,0 L 340.00000000000006,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,360,0)">
+                <g>
                   <path
                     id="g-svg-93"
                     fill="none"
@@ -1058,10 +998,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 360,0 L 360,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,0)">
+                <g>
                   <path
                     id="g-svg-94"
                     fill="none"
@@ -1069,31 +1009,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 380,0 L 380,400"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-74"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-74" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-95"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-96"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-95" fill="none" class="axis-main-group">
+            <g id="g-svg-96" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-97"
                   fill="none"
@@ -1107,25 +1032,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-98"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-99"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-98" fill="none" class="axis-tick-group" />
+            <g id="g-svg-99" fill="none" class="axis-label-group">
               <g
                 id="g-svg-100"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-120"
                     fill="rgba(0,0,0,1)"
@@ -1152,7 +1067,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-121"
                     fill="rgba(0,0,0,1)"
@@ -1179,7 +1094,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-122"
                     fill="rgba(0,0,0,1)"
@@ -1206,7 +1121,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-123"
                     fill="rgba(0,0,0,1)"
@@ -1233,7 +1148,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-124"
                     fill="rgba(0,0,0,1)"
@@ -1260,7 +1175,7 @@
                 transform="matrix(1,0,0,1,100,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-125"
                     fill="rgba(0,0,0,1)"
@@ -1287,7 +1202,7 @@
                 transform="matrix(1,0,0,1,120,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-126"
                     fill="rgba(0,0,0,1)"
@@ -1314,7 +1229,7 @@
                 transform="matrix(1,0,0,1,140,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-127"
                     fill="rgba(0,0,0,1)"
@@ -1341,7 +1256,7 @@
                 transform="matrix(1,0,0,1,160,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-128"
                     fill="rgba(0,0,0,1)"
@@ -1368,7 +1283,7 @@
                 transform="matrix(1,0,0,1,180,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-129"
                     fill="rgba(0,0,0,1)"
@@ -1395,7 +1310,7 @@
                 transform="matrix(1,0,0,1,200,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-130"
                     fill="rgba(0,0,0,1)"
@@ -1422,7 +1337,7 @@
                 transform="matrix(1,0,0,1,220,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-131"
                     fill="rgba(0,0,0,1)"
@@ -1449,7 +1364,7 @@
                 transform="matrix(1,0,0,1,240,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-132"
                     fill="rgba(0,0,0,1)"
@@ -1476,7 +1391,7 @@
                 transform="matrix(1,0,0,1,260,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-133"
                     fill="rgba(0,0,0,1)"
@@ -1503,7 +1418,7 @@
                 transform="matrix(1,0,0,1,280,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-134"
                     fill="rgba(0,0,0,1)"
@@ -1530,7 +1445,7 @@
                 transform="matrix(1,0,0,1,300,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-135"
                     fill="rgba(0,0,0,1)"
@@ -1557,7 +1472,7 @@
                 transform="matrix(1,0,0,1,320,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-136"
                     fill="rgba(0,0,0,1)"
@@ -1584,7 +1499,7 @@
                 transform="matrix(1,0,0,1,340,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-137"
                     fill="rgba(0,0,0,1)"
@@ -1611,7 +1526,7 @@
                 transform="matrix(1,0,0,1,360,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-138"
                     fill="rgba(0,0,0,1)"
@@ -1638,7 +1553,7 @@
                 transform="matrix(1,0,0,1,380,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-139"
                     fill="rgba(0,0,0,1)"
@@ -1661,32 +1576,19 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-140"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-140" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-154" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-141"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class=".crosshair-group"
-          >
-            <g
-              id="g-svg-142"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="crosshair-tag"
-            >
-              <g transform="matrix(1,0,0,1,-4,-4)">
+        <g id="g-svg-154" fill="none">
+          <g id="g-svg-141" fill="none" class=".crosshair-group">
+            <g id="g-svg-142" fill="none" class="crosshair-tag">
+              <g>
                 <path
                   id="g-svg-148"
                   fill="rgba(250,250,250,1)"
                   class="tag-background"
-                  d="M 2,0 l 4,0 a 2,2,0,0,1,2,2 l 0,4 a 2,2,0,0,1,-2,2 l -4,0 a 2,2,0,0,1,-2,-2 l 0,-4 a 2,2,0,0,1,2,-2 z"
+                  d="M -2,-4 l 4,0 a 2,2,0,0,1,2,2 l 0,4 a 2,2,0,0,1,-2,2 l -4,0 a 2,2,0,0,1,-2,-2 l 0,-4 a 2,2,0,0,1,2,-2 z"
+                  y="-4"
+                  x="-4"
                   width="8"
                   height="8"
                   stroke="rgba(217,217,217,1)"
@@ -1700,13 +1602,8 @@
                 transform="matrix(1,0,0,1,4,4)"
                 class="tag-content"
               >
-                <g
-                  id="g-svg-144"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="tag-marker"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-144" fill="none" class="tag-marker">
+                  <g>
                     <path
                       id="g-svg-146"
                       fill="none"
@@ -1718,7 +1615,7 @@
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,150,150)">
+            <g>
               <path
                 id="g-svg-149"
                 fill="none"
@@ -1727,7 +1624,7 @@
                 stroke-opacity="0.45"
                 stroke-width="1"
                 stroke-dasharray="5,5"
-                d="M 100,50 L 85.35533905932738,85.35533905932738 L 50,100 L 14.644660940672622,85.35533905932738 L 0,50 L 14.644660940672622,14.644660940672622 L 50,0 L 85.35533905932738,14.644660940672622 Z"
+                d="M 250,200 L 235.35533905932738,235.35533905932738 L 200,250 L 164.64466094067262,235.35533905932738 L 150,200 L 164.64466094067262,164.64466094067262 L 200,150 L 235.35533905932738,164.64466094067262 Z"
               />
             </g>
           </g>
diff --git a/__tests__/integration/snapshots/Handle1.svg b/__tests__/integration/snapshots/Handle1.svg
index 93bbdcc8e..71e79be9f 100644
--- a/__tests__/integration/snapshots/Handle1.svg
+++ b/__tests__/integration/snapshots/Handle1.svg
@@ -6,54 +6,46 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-39" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-40" fill="none" transform="matrix(1,0,0,1,150,150)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-icon-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="handle-icon"
-            >
-              <g transform="matrix(1,0,0,1,-5,-12)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-39" fill="none">
+        <g id="g-svg-40" fill="none" x="150" y="150">
+          <g id="g-svg-1" fill="none" class="handle-icon-group">
+            <g id="g-svg-2" fill="none" x="150" y="150" class="handle-icon">
+              <g>
                 <path
                   id="g-svg-3"
                   fill="rgba(255,255,255,1)"
                   class="handle-icon-rect"
                   stroke-width="1"
                   stroke="rgba(191,191,191,1)"
-                  d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                  d="M 147,138 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                   width="10"
                   height="24"
+                  x="145"
+                  y="138"
                 />
-                <g transform="matrix(1,0,0,1,3.333333,6)">
+                <g>
                   <line
                     id="g-svg-4"
                     fill="rgba(255,255,255,1)"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="12"
+                    x1="148.33333333333334"
+                    y1="144"
+                    x2="148.33333333333334"
+                    y2="156"
                     class="handle-icon-line-1"
                     stroke-width="1"
                     stroke="rgba(191,191,191,1)"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,6.666667,6)">
+                <g>
                   <line
                     id="g-svg-5"
                     fill="rgba(255,255,255,1)"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="12"
+                    x1="151.66666666666666"
+                    y1="144"
+                    x2="151.66666666666666"
+                    y2="156"
                     class="handle-icon-line-2"
                     stroke-width="1"
                     stroke="rgba(191,191,191,1)"
@@ -62,13 +54,8 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-6"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-label-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-6" fill="none" class="handle-label-group">
+            <g>
               <text
                 id="g-svg-7"
                 fill="rgba(0,0,0,1)"
@@ -76,6 +63,8 @@
                 fill-opacity="0.45"
                 dominant-baseline="central"
                 paint-order="stroke"
+                x="150"
+                y="150"
                 dx="0.5"
                 font-size="12"
                 text-anchor="middle"
diff --git a/__tests__/integration/snapshots/Handle2.svg b/__tests__/integration/snapshots/Handle2.svg
index 05d45d865..2389f734d 100644
--- a/__tests__/integration/snapshots/Handle2.svg
+++ b/__tests__/integration/snapshots/Handle2.svg
@@ -6,54 +6,46 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-8" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-9" fill="none" transform="matrix(1,0,0,1,150,150)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-icon-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(0,1,-1,0,0,0)"
-              class="handle-icon"
-            >
-              <g transform="matrix(1,0,0,1,-5,-12)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-8" fill="none">
+        <g id="g-svg-9" fill="none" x="150" y="150">
+          <g id="g-svg-1" fill="none" class="handle-icon-group">
+            <g id="g-svg-2" fill="none" x="150" y="150" class="handle-icon">
+              <g transform="matrix(0,1,-1,0,299.999990,0)">
                 <path
                   id="g-svg-3"
                   fill="rgba(255,255,255,1)"
                   class="handle-icon-rect"
                   stroke-width="1"
                   stroke="rgba(191,191,191,1)"
-                  d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                  d="M 147,138 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                   width="10"
                   height="24"
+                  x="145"
+                  y="138"
                 />
-                <g transform="matrix(1,0,0,1,3.333333,6)">
+                <g>
                   <line
                     id="g-svg-4"
                     fill="rgba(255,255,255,1)"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="12"
+                    x1="148.33333333333334"
+                    y1="144"
+                    x2="148.33333333333334"
+                    y2="156"
                     class="handle-icon-line-1"
                     stroke-width="1"
                     stroke="rgba(191,191,191,1)"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,6.666667,6)">
+                <g>
                   <line
                     id="g-svg-5"
                     fill="rgba(255,255,255,1)"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="12"
+                    x1="151.66666666666666"
+                    y1="144"
+                    x2="151.66666666666666"
+                    y2="156"
                     class="handle-icon-line-2"
                     stroke-width="1"
                     stroke="rgba(191,191,191,1)"
@@ -62,13 +54,8 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-6"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-label-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-6" fill="none" class="handle-label-group">
+            <g>
               <text
                 id="g-svg-7"
                 fill="rgba(0,0,0,1)"
@@ -76,6 +63,8 @@
                 fill-opacity="0.45"
                 dominant-baseline="central"
                 paint-order="stroke"
+                x="150"
+                y="150"
                 dx="0.5"
                 font-size="12"
                 text-anchor="middle"
diff --git a/__tests__/integration/snapshots/HandleDemo.svg b/__tests__/integration/snapshots/HandleDemo.svg
index 313eeb74c..fcf1be888 100644
--- a/__tests__/integration/snapshots/HandleDemo.svg
+++ b/__tests__/integration/snapshots/HandleDemo.svg
@@ -6,81 +6,58 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-71" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-71" fill="none">
         <g id="g-svg-72" fill="none" transform="matrix(1,0,0,1,100,100)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-marker-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="handle-marker"
-            >
-              <g transform="matrix(1,0,0,1,-6.250000,0)">
+          <g id="g-svg-1" fill="none" class="handle-marker-group">
+            <g id="g-svg-2" fill="none" class="handle-marker">
+              <g>
                 <path
                   id="g-svg-3"
                   fill="rgba(255,255,255,1)"
                   class="handle-marker"
-                  d="M 6.25,0 L 0,7 L 0,17.5 L 12.5,17.5 L 12.5,7 Z M 4.166666666666666,7 L 4.166666666666666,15.5 M 8.333333333333334,7 L 8.333333333333334,15.5"
+                  d="M 0,0 L -6.25,7 L -6.25,17.5 L 6.25,17.5 L 6.25,7 Z M -2.0833333333333335,7 L -2.0833333333333335,15.5 M 2.0833333333333335,7 L 2.0833333333333335,15.5"
                   stroke="rgba(197,197,197,1)"
                   stroke-width="1"
                 />
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-4"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-label-group"
-          />
+          <g id="g-svg-4" fill="none" class="handle-label-group" />
         </g>
-        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,100,150)">
-          <g
-            id="g-svg-5"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-marker-group"
-          >
-            <g
-              id="g-svg-6"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="handle-marker"
-            >
-              <g transform="matrix(1,0,0,1,0,-6.250000)">
+        <g
+          id="g-svg-73"
+          fill="none"
+          y="150"
+          transform="matrix(1,0,0,1,100,150)"
+        >
+          <g id="g-svg-5" fill="none" class="handle-marker-group">
+            <g id="g-svg-6" fill="none" class="handle-marker">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="rgba(255,255,255,1)"
                   class="handle-marker"
-                  d="M 0,6.25 L 7,12.5 L 17.5,12.5 L 17.5,0 L 7,0 Z M 7,8.333333333333334 L 15.5,8.333333333333334 M 7,4.166666666666666 L 15.5,4.166666666666666"
+                  d="M 0,0 L 7,6.25 L 17.5,6.25 L 17.5,-6.25 L 7,-6.25 Z M 7,2.0833333333333335 L 15.5,2.0833333333333335 M 7,-2.0833333333333335 L 15.5,-2.0833333333333335"
                   stroke="rgba(197,197,197,1)"
                   stroke-width="1"
                 />
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-8"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-label-group"
-          >
-            <g transform="matrix(1,0,0,1,17.500000,0)">
+          <g id="g-svg-8" fill="none" class="handle-label-group">
+            <g>
               <text
                 id="g-svg-9"
                 fill="rgba(197,197,197,1)"
                 class="handle-label"
                 dominant-baseline="central"
                 paint-order="stroke"
+                x="17.5"
                 dx="0.5"
                 font-size="12"
+                y="0"
                 text-anchor="left"
               >
                 labelText
@@ -88,47 +65,39 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,100,200)">
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-marker-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="handle-marker"
-            >
-              <g transform="matrix(1,0,0,1,-6.250000,0)">
+        <g
+          id="g-svg-74"
+          fill="none"
+          y="200"
+          transform="matrix(1,0,0,1,100,200)"
+        >
+          <g id="g-svg-10" fill="none" class="handle-marker-group">
+            <g id="g-svg-11" fill="none" class="handle-marker">
+              <g>
                 <path
                   id="g-svg-12"
                   fill="rgba(255,255,255,1)"
                   class="handle-marker"
-                  d="M 6.25,0 L 0,7 L 0,17.5 L 12.5,17.5 L 12.5,7 Z M 4.166666666666666,7 L 4.166666666666666,15.5 M 8.333333333333334,7 L 8.333333333333334,15.5"
+                  d="M 0,0 L -6.25,7 L -6.25,17.5 L 6.25,17.5 L 6.25,7 Z M -2.0833333333333335,7 L -2.0833333333333335,15.5 M 2.0833333333333335,7 L 2.0833333333333335,15.5"
                   stroke="rgba(197,197,197,1)"
                   stroke-width="1"
                 />
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-label-group"
-          >
-            <g transform="matrix(1,0,0,1,0,27.500000)">
+          <g id="g-svg-13" fill="none" class="handle-label-group">
+            <g>
               <text
                 id="g-svg-14"
                 fill="rgba(197,197,197,1)"
                 class="handle-label"
                 dominant-baseline="central"
                 paint-order="stroke"
+                y="27.5"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
+                x="0"
                 text-anchor="middle"
               >
                 formatted text - labelText
@@ -136,47 +105,39 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-75" fill="none" transform="matrix(1,0,0,1,100,250)">
-          <g
-            id="g-svg-15"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-marker-group"
-          >
-            <g
-              id="g-svg-16"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="handle-marker"
-            >
-              <g transform="matrix(1,0,0,1,-10,0)">
+        <g
+          id="g-svg-75"
+          fill="none"
+          y="250"
+          transform="matrix(1,0,0,1,100,250)"
+        >
+          <g id="g-svg-15" fill="none" class="handle-marker-group">
+            <g id="g-svg-16" fill="none" class="handle-marker">
+              <g>
                 <path
                   id="g-svg-17"
                   fill="rgba(193,56,54,1)"
                   class="handle-marker"
-                  d="M 10,0 L 0,11.200000000000001 L 0,28 L 20,28 L 20,11.200000000000001 Z M 6.666666666666666,11.200000000000001 L 6.666666666666666,26 M 13.333333333333334,11.200000000000001 L 13.333333333333334,26"
+                  d="M 0,0 L -10,11.200000000000001 L -10,28 L 10,28 L 10,11.200000000000001 Z M -3.3333333333333335,11.200000000000001 L -3.3333333333333335,26 M 3.3333333333333335,11.200000000000001 L 3.3333333333333335,26"
                   stroke="rgba(253,241,240,1)"
                   stroke-width="1"
                 />
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-18"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-label-group"
-          >
-            <g transform="matrix(1,0,0,1,0,38)">
+          <g id="g-svg-18" fill="none" class="handle-label-group">
+            <g>
               <text
                 id="g-svg-19"
                 fill="rgba(197,197,197,1)"
                 class="handle-label"
                 dominant-baseline="central"
                 paint-order="stroke"
+                y="38"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
+                x="0"
                 text-anchor="middle"
               >
                 labelText
diff --git a/__tests__/integration/snapshots/HandleUpdate.svg b/__tests__/integration/snapshots/HandleUpdate.svg
index 9390f7165..c7705dda6 100644
--- a/__tests__/integration/snapshots/HandleUpdate.svg
+++ b/__tests__/integration/snapshots/HandleUpdate.svg
@@ -6,60 +6,46 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-8"
-        fill="none"
-        width="200"
-        height="200"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-9" fill="none" transform="matrix(1,0,0,1,150,150)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-icon-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(0,1,-1,0,0,0)"
-              class="handle-icon"
-            >
-              <g transform="matrix(1,0,0,1,-5,-12)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-8" fill="none" width="200" height="200">
+        <g id="g-svg-9" fill="none" x="150" y="150">
+          <g id="g-svg-1" fill="none" class="handle-icon-group">
+            <g id="g-svg-2" fill="none" x="150" y="150" class="handle-icon">
+              <g transform="matrix(0,1,-1,0,299.999990,0)">
                 <path
                   id="g-svg-3"
                   fill="rgba(255,255,255,1)"
                   class="handle-icon-rect"
                   stroke-width="1"
                   stroke="rgba(191,191,191,1)"
-                  d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                  d="M 147,138 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                   width="10"
                   height="24"
+                  x="145"
+                  y="138"
                 />
-                <g transform="matrix(1,0,0,1,3.333333,6)">
+                <g>
                   <line
                     id="g-svg-4"
                     fill="rgba(255,255,255,1)"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="12"
+                    x1="148.33333333333334"
+                    y1="144"
+                    x2="148.33333333333334"
+                    y2="156"
                     class="handle-icon-line-1"
                     stroke-width="1"
                     stroke="rgba(191,191,191,1)"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,6.666667,6)">
+                <g>
                   <line
                     id="g-svg-5"
                     fill="rgba(255,255,255,1)"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="12"
+                    x1="151.66666666666666"
+                    y1="144"
+                    x2="151.66666666666666"
+                    y2="156"
                     class="handle-icon-line-2"
                     stroke-width="1"
                     stroke="rgba(191,191,191,1)"
@@ -68,13 +54,8 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-6"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="handle-label-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-6" fill="none" class="handle-label-group">
+            <g>
               <text
                 id="g-svg-7"
                 fill="rgba(0,0,0,1)"
@@ -82,6 +63,8 @@
                 fill-opacity="0.45"
                 dominant-baseline="central"
                 paint-order="stroke"
+                x="150"
+                y="150"
                 dx="0.5"
                 font-size="12"
                 text-anchor="middle"
diff --git a/__tests__/integration/snapshots/IndicatorDemo.svg b/__tests__/integration/snapshots/IndicatorDemo.svg
index 4e4a14c7f..fa0dd4754 100644
--- a/__tests__/integration/snapshots/IndicatorDemo.svg
+++ b/__tests__/integration/snapshots/IndicatorDemo.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
       <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,30,30)">
-        <g transform="matrix(1,0,0,1,0,0)">
+        <g>
           <path
             id="g-svg-13"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="400"
           />
         </g>
-        <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-14" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 400,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,20 L 400,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,40 L 400,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,60.00000000000001 L 400,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,10 +74,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,80 L 400,80"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,100)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -100,10 +85,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,100 L 400,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,120)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -111,10 +96,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,120.00000000000001 L 400,120.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,140)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -122,10 +107,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,140 L 400,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,160)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -133,10 +118,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,160 L 400,160"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,180)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -144,10 +129,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,180 L 400,180"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,200)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -155,10 +140,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,200 L 400,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,220)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -166,10 +151,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,220.00000000000003 L 400,220.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,240)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -177,10 +162,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,240.00000000000003 L 400,240.00000000000003"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,260)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -188,10 +173,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,260 L 400,260"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,280)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -199,10 +184,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,280 L 400,280"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,300)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -210,10 +195,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,300 L 400,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,320)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -221,10 +206,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,320 L 400,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,340)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -232,10 +217,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,340.00000000000006 L 400,340.00000000000006"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,360)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -243,10 +228,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,360 L 400,360"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,380)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -254,31 +239,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 400,0"
+                    d="M 0,380 L 400,380"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-26"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-25" fill="none" class="axis-main-group">
+            <g id="g-svg-26" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-27"
                   fill="none"
@@ -292,25 +262,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-28"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-29"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-28" fill="none" class="axis-tick-group" />
+            <g id="g-svg-29" fill="none" class="axis-label-group">
               <g
                 id="g-svg-30"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-50"
                     fill="rgba(0,0,0,1)"
@@ -333,10 +293,10 @@
               <g
                 id="g-svg-31"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-51"
                     fill="rgba(0,0,0,1)"
@@ -359,10 +319,10 @@
               <g
                 id="g-svg-32"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-52"
                     fill="rgba(0,0,0,1)"
@@ -385,10 +345,10 @@
               <g
                 id="g-svg-33"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-53"
                     fill="rgba(0,0,0,1)"
@@ -411,10 +371,10 @@
               <g
                 id="g-svg-34"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-54"
                     fill="rgba(0,0,0,1)"
@@ -437,10 +397,10 @@
               <g
                 id="g-svg-35"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,100)"
+                transform="matrix(1,0,0,1,-10,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-55"
                     fill="rgba(0,0,0,1)"
@@ -463,10 +423,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,120)"
+                transform="matrix(1,0,0,1,-10,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-56"
                     fill="rgba(0,0,0,1)"
@@ -489,10 +449,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,140)"
+                transform="matrix(1,0,0,1,-10,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-57"
                     fill="rgba(0,0,0,1)"
@@ -515,10 +475,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,160)"
+                transform="matrix(1,0,0,1,-10,160)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-58"
                     fill="rgba(0,0,0,1)"
@@ -541,10 +501,10 @@
               <g
                 id="g-svg-39"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,180)"
+                transform="matrix(1,0,0,1,-10,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-59"
                     fill="rgba(0,0,0,1)"
@@ -567,10 +527,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,200)"
+                transform="matrix(1,0,0,1,-10,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -593,10 +553,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,220)"
+                transform="matrix(1,0,0,1,-10,220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -619,10 +579,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,240)"
+                transform="matrix(1,0,0,1,-10,240)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -645,10 +605,10 @@
               <g
                 id="g-svg-43"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,260)"
+                transform="matrix(1,0,0,1,-10,260)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -671,10 +631,10 @@
               <g
                 id="g-svg-44"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,280)"
+                transform="matrix(1,0,0,1,-10,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -697,10 +657,10 @@
               <g
                 id="g-svg-45"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,300)"
+                transform="matrix(1,0,0,1,-10,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -723,10 +683,10 @@
               <g
                 id="g-svg-46"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,320)"
+                transform="matrix(1,0,0,1,-10,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -749,10 +709,10 @@
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,340)"
+                transform="matrix(1,0,0,1,-10,340)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -775,10 +735,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,360)"
+                transform="matrix(1,0,0,1,-10,360)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -801,10 +761,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,380)"
+                transform="matrix(1,0,0,1,-10,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -826,33 +786,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-70"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-70" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-71"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-72"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-73"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-15" fill="none">
+          <g id="g-svg-71" fill="none" class="axis-grid-group">
+            <g id="g-svg-72" fill="none" class="axis-grid">
+              <g id="g-svg-73" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-75"
                     fill="none"
@@ -863,7 +803,7 @@
                     d="M 0,0 L 0,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-76"
                     fill="none"
@@ -871,10 +811,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 20,0 L 20,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-77"
                     fill="none"
@@ -882,10 +822,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 40,0 L 40,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-78"
                     fill="none"
@@ -893,10 +833,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 60.00000000000001,0 L 60.00000000000001,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-79"
                     fill="none"
@@ -904,10 +844,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 80,0 L 80,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,0)">
+                <g>
                   <path
                     id="g-svg-80"
                     fill="none"
@@ -915,10 +855,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 100,0 L 100,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,120,0)">
+                <g>
                   <path
                     id="g-svg-81"
                     fill="none"
@@ -926,10 +866,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 120.00000000000001,0 L 120.00000000000001,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,140,0)">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="none"
@@ -937,10 +877,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 140,0 L 140,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,160,0)">
+                <g>
                   <path
                     id="g-svg-83"
                     fill="none"
@@ -948,10 +888,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 160,0 L 160,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180,0)">
+                <g>
                   <path
                     id="g-svg-84"
                     fill="none"
@@ -959,10 +899,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 180,0 L 180,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,0)">
+                <g>
                   <path
                     id="g-svg-85"
                     fill="none"
@@ -970,10 +910,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 200,0 L 200,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,0)">
+                <g>
                   <path
                     id="g-svg-86"
                     fill="none"
@@ -981,10 +921,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 220.00000000000003,0 L 220.00000000000003,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,240,0)">
+                <g>
                   <path
                     id="g-svg-87"
                     fill="none"
@@ -992,10 +932,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 240.00000000000003,0 L 240.00000000000003,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,0)">
+                <g>
                   <path
                     id="g-svg-88"
                     fill="none"
@@ -1003,10 +943,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 260,0 L 260,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,280,0)">
+                <g>
                   <path
                     id="g-svg-89"
                     fill="none"
@@ -1014,10 +954,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 280,0 L 280,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,0)">
+                <g>
                   <path
                     id="g-svg-90"
                     fill="none"
@@ -1025,10 +965,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 300,0 L 300,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,0)">
+                <g>
                   <path
                     id="g-svg-91"
                     fill="none"
@@ -1036,10 +976,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 320,0 L 320,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,340,0)">
+                <g>
                   <path
                     id="g-svg-92"
                     fill="none"
@@ -1047,10 +987,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 340.00000000000006,0 L 340.00000000000006,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,360,0)">
+                <g>
                   <path
                     id="g-svg-93"
                     fill="none"
@@ -1058,10 +998,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 360,0 L 360,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,0)">
+                <g>
                   <path
                     id="g-svg-94"
                     fill="none"
@@ -1069,31 +1009,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,400"
+                    d="M 380,0 L 380,400"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-74"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-74" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-95"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-96"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-95" fill="none" class="axis-main-group">
+            <g id="g-svg-96" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-97"
                   fill="none"
@@ -1107,25 +1032,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-98"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-99"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-98" fill="none" class="axis-tick-group" />
+            <g id="g-svg-99" fill="none" class="axis-label-group">
               <g
                 id="g-svg-100"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-120"
                     fill="rgba(0,0,0,1)"
@@ -1152,7 +1067,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-121"
                     fill="rgba(0,0,0,1)"
@@ -1179,7 +1094,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-122"
                     fill="rgba(0,0,0,1)"
@@ -1206,7 +1121,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-123"
                     fill="rgba(0,0,0,1)"
@@ -1233,7 +1148,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-124"
                     fill="rgba(0,0,0,1)"
@@ -1260,7 +1175,7 @@
                 transform="matrix(1,0,0,1,100,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-125"
                     fill="rgba(0,0,0,1)"
@@ -1287,7 +1202,7 @@
                 transform="matrix(1,0,0,1,120,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-126"
                     fill="rgba(0,0,0,1)"
@@ -1314,7 +1229,7 @@
                 transform="matrix(1,0,0,1,140,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-127"
                     fill="rgba(0,0,0,1)"
@@ -1341,7 +1256,7 @@
                 transform="matrix(1,0,0,1,160,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-128"
                     fill="rgba(0,0,0,1)"
@@ -1368,7 +1283,7 @@
                 transform="matrix(1,0,0,1,180,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-129"
                     fill="rgba(0,0,0,1)"
@@ -1395,7 +1310,7 @@
                 transform="matrix(1,0,0,1,200,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-130"
                     fill="rgba(0,0,0,1)"
@@ -1422,7 +1337,7 @@
                 transform="matrix(1,0,0,1,220,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-131"
                     fill="rgba(0,0,0,1)"
@@ -1449,7 +1364,7 @@
                 transform="matrix(1,0,0,1,240,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-132"
                     fill="rgba(0,0,0,1)"
@@ -1476,7 +1391,7 @@
                 transform="matrix(1,0,0,1,260,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-133"
                     fill="rgba(0,0,0,1)"
@@ -1503,7 +1418,7 @@
                 transform="matrix(1,0,0,1,280,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-134"
                     fill="rgba(0,0,0,1)"
@@ -1530,7 +1445,7 @@
                 transform="matrix(1,0,0,1,300,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-135"
                     fill="rgba(0,0,0,1)"
@@ -1557,7 +1472,7 @@
                 transform="matrix(1,0,0,1,320,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-136"
                     fill="rgba(0,0,0,1)"
@@ -1584,7 +1499,7 @@
                 transform="matrix(1,0,0,1,340,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-137"
                     fill="rgba(0,0,0,1)"
@@ -1611,7 +1526,7 @@
                 transform="matrix(1,0,0,1,360,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-138"
                     fill="rgba(0,0,0,1)"
@@ -1638,7 +1553,7 @@
                 transform="matrix(1,0,0,1,380,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-139"
                     fill="rgba(0,0,0,1)"
@@ -1661,19 +1576,15 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-140"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-140" fill="none" class="axis-title-group" />
         </g>
-        <g transform="matrix(1,0,0,1,0,30)">
+        <g>
           <text
             id="g-svg-16"
             fill="rgba(255,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            y="30"
             dx="0.5"
             font-family="sans-serif"
             font-size="16"
@@ -1682,56 +1593,30 @@
             font-weight="normal"
             stroke-width="1"
             text-anchor="left"
+            x="0"
           >
             left
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,50,50)">
-          <circle
-            id="g-svg-19"
-            fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
-            r="2"
-          />
+        <g>
+          <circle id="g-svg-19" fill="rgba(255,0,0,1)" cx="50" cy="50" r="2" />
         </g>
-        <g transform="matrix(1,0,0,1,50,80)">
-          <circle
-            id="g-svg-22"
-            fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
-            r="2"
-          />
+        <g>
+          <circle id="g-svg-22" fill="rgba(255,0,0,1)" cx="50" cy="80" r="2" />
         </g>
-        <g transform="matrix(1,0,0,1,50,110)">
-          <circle
-            id="g-svg-25"
-            fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
-            r="2"
-          />
+        <g>
+          <circle id="g-svg-25" fill="rgba(255,0,0,1)" cx="50" cy="110" r="2" />
         </g>
-        <g transform="matrix(1,0,0,1,50,140)">
-          <circle
-            id="g-svg-28"
-            fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
-            r="2"
-          />
+        <g>
+          <circle id="g-svg-28" fill="rgba(255,0,0,1)" cx="50" cy="140" r="2" />
         </g>
-        <g transform="matrix(1,0,0,1,0,30)">
+        <g>
           <text
             id="g-svg-29"
             fill="rgba(255,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            y="30"
             dx="0.5"
             font-family="sans-serif"
             font-size="16"
@@ -1740,56 +1625,30 @@
             font-weight="normal"
             stroke-width="1"
             text-anchor="left"
+            x="0"
           >
             left
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,50,170)">
-          <circle
-            id="g-svg-32"
-            fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
-            r="2"
-          />
+        <g>
+          <circle id="g-svg-32" fill="rgba(255,0,0,1)" cx="50" cy="170" r="2" />
         </g>
-        <g transform="matrix(1,0,0,1,50,200)">
-          <circle
-            id="g-svg-35"
-            fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
-            r="2"
-          />
+        <g>
+          <circle id="g-svg-35" fill="rgba(255,0,0,1)" cx="50" cy="200" r="2" />
         </g>
-        <g transform="matrix(1,0,0,1,50,230)">
-          <circle
-            id="g-svg-38"
-            fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
-            r="2"
-          />
+        <g>
+          <circle id="g-svg-38" fill="rgba(255,0,0,1)" cx="50" cy="230" r="2" />
         </g>
-        <g transform="matrix(1,0,0,1,50,260)">
-          <circle
-            id="g-svg-41"
-            fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
-            r="2"
-          />
+        <g>
+          <circle id="g-svg-41" fill="rgba(255,0,0,1)" cx="50" cy="260" r="2" />
         </g>
-        <g transform="matrix(1,0,0,1,0,30)">
+        <g>
           <text
             id="g-svg-42"
             fill="rgba(255,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            y="30"
             dx="0.5"
             font-family="sans-serif"
             font-size="16"
@@ -1798,56 +1657,42 @@
             font-weight="normal"
             stroke-width="1"
             text-anchor="left"
+            x="0"
           >
             left
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,150,50)">
-          <circle
-            id="g-svg-45"
-            fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
-            r="2"
-          />
+        <g>
+          <circle id="g-svg-45" fill="rgba(255,0,0,1)" cx="150" cy="50" r="2" />
         </g>
-        <g transform="matrix(1,0,0,1,150,80)">
-          <circle
-            id="g-svg-48"
-            fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
-            r="2"
-          />
+        <g>
+          <circle id="g-svg-48" fill="rgba(255,0,0,1)" cx="150" cy="80" r="2" />
         </g>
-        <g transform="matrix(1,0,0,1,150,110)">
+        <g>
           <circle
             id="g-svg-51"
             fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
+            cx="150"
+            cy="110"
             r="2"
           />
         </g>
-        <g transform="matrix(1,0,0,1,150,140)">
+        <g>
           <circle
             id="g-svg-54"
             fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
+            cx="150"
+            cy="140"
             r="2"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,30)">
+        <g>
           <text
             id="g-svg-55"
             fill="rgba(255,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            y="30"
             dx="0.5"
             font-family="sans-serif"
             font-size="16"
@@ -1856,63 +1701,59 @@
             font-weight="normal"
             stroke-width="1"
             text-anchor="left"
+            x="0"
           >
             left
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,150,180)">
+        <g>
           <circle
             id="g-svg-58"
             fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
+            cx="150"
+            cy="180"
             r="2"
           />
         </g>
-        <g transform="matrix(1,0,0,1,150,220)">
+        <g>
           <circle
             id="g-svg-61"
             fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
+            cx="150"
+            cy="220"
             r="2"
           />
         </g>
-        <g transform="matrix(1,0,0,1,150,250)">
+        <g>
           <circle
             id="g-svg-64"
             fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
+            cx="150"
+            cy="250"
             r="2"
           />
         </g>
-        <g transform="matrix(1,0,0,1,150,290)">
+        <g>
           <circle
             id="g-svg-67"
             fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
+            cx="150"
+            cy="290"
             r="2"
           />
         </g>
-        <g transform="matrix(1,0,0,1,250,100)">
+        <g>
           <circle
             id="g-svg-78"
             fill="rgba(255,0,0,1)"
-            transform="translate(-2,-2)"
-            cx="2"
-            cy="2"
+            cx="250"
+            cy="100"
             r="2"
           />
         </g>
-        <g id="g-svg-17" fill="none" transform="matrix(1,0,0,1,50,50)">
-          <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,-30.888203,0)">
-            <g transform="matrix(1,0,0,1,-4,-13.500000)">
+        <g id="g-svg-17" fill="none" x="50" y="50">
+          <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,19.111797,50)">
+            <g>
               <path
                 id="g-svg-143"
                 fill="rgba(38,38,38,1)"
@@ -1920,17 +1761,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 0,0 L 27.96,0 A 0 0 0 0 1 27.96 0 L 27.96,0 L 27.96,8.5 L 34.88820323027551,13.5 L 27.96,18.5 L 27.96,27 A 0 0 0 0 1 27.96 27 L 0,27 A 0 0 0 0 1 0 27 L 0,0 A 0 0 0 0 1 0 0 Z"
+                d="M -3.9999999999999964,-13.5 L 23.960000000000004,-13.5 A 0 0 0 0 1 23.960000000000004 -13.5 L 23.960000000000004,-13.5 L 23.960000000000004,-5 L 30.888203230275515,0 L 23.960000000000004,5 L 23.960000000000004,13.5 A 0 0 0 0 1 23.960000000000004 13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-141"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-141" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-142"
                   fill="rgba(255,255,255,1)"
@@ -1953,9 +1789,9 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-20" fill="none" transform="matrix(1,0,0,1,50,80)">
-          <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,-48.168201,0)">
-            <g transform="matrix(1,0,0,1,-4,-13.500000)">
+        <g id="g-svg-20" fill="none" x="50" y="80">
+          <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,1.831797,80)">
+            <g>
               <path
                 id="g-svg-146"
                 fill="rgba(38,38,38,1)"
@@ -1963,17 +1799,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 0,0 L 45.24000000000001,0 A 0 0 0 0 1 45.24000000000001 0 L 45.24000000000001,0 L 45.24000000000001,8.5 L 52.16820323027551,13.5 L 45.24000000000001,18.5 L 45.24000000000001,27 A 0 0 0 0 1 45.24000000000001 27 L 0,27 A 0 0 0 0 1 0 27 L 0,0 A 0 0 0 0 1 0 0 Z"
+                d="M -3.9999999999999964,-13.5 L 41.24000000000001,-13.5 A 0 0 0 0 1 41.24000000000001 -13.5 L 41.24000000000001,-13.5 L 41.24000000000001,-5 L 48.168203230275516,0 L 41.24000000000001,5 L 41.24000000000001,13.5 A 0 0 0 0 1 41.24000000000001 13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-144"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-144" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-145"
                   fill="rgba(255,255,255,1)"
@@ -1996,9 +1827,9 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-23" fill="none" transform="matrix(1,0,0,1,50,110)">
-          <g id="g-svg-24" fill="none" transform="matrix(1,0,0,1,-48.168201,0)">
-            <g transform="matrix(1,0,0,1,-4,-13.500000)">
+        <g id="g-svg-23" fill="none" x="50" y="110">
+          <g id="g-svg-24" fill="none" transform="matrix(1,0,0,1,1.831797,110)">
+            <g>
               <path
                 id="g-svg-149"
                 fill="rgba(255,255,255,1)"
@@ -2006,17 +1837,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 0,0 L 45.24000000000001,0 A 0 0 0 0 1 45.24000000000001 0 L 45.24000000000001,0 L 45.24000000000001,8.5 L 52.16820323027551,13.5 L 45.24000000000001,18.5 L 45.24000000000001,27 A 0 0 0 0 1 45.24000000000001 27 L 0,27 A 0 0 0 0 1 0 27 L 0,0 A 0 0 0 0 1 0 0 Z"
+                d="M -3.9999999999999964,-13.5 L 41.24000000000001,-13.5 A 0 0 0 0 1 41.24000000000001 -13.5 L 41.24000000000001,-13.5 L 41.24000000000001,-5 L 48.168203230275516,0 L 41.24000000000001,5 L 41.24000000000001,13.5 A 0 0 0 0 1 41.24000000000001 13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-147"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-147" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-148"
                   fill="rgba(0,0,0,1)"
@@ -2039,9 +1865,9 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,50,140)">
-          <g id="g-svg-27" fill="none" transform="matrix(1,0,0,1,-44.808205,0)">
-            <g transform="matrix(1,0,0,1,-10,-13.500000)">
+        <g id="g-svg-26" fill="none" x="50" y="140">
+          <g id="g-svg-27" fill="none" transform="matrix(1,0,0,1,5.191797,140)">
+            <g>
               <path
                 id="g-svg-157"
                 fill="rgba(38,38,38,1)"
@@ -2049,39 +1875,27 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 0,0 L 47.879999999999995,0 A 0 0 0 0 1 47.879999999999995 0 L 47.879999999999995,0 L 47.879999999999995,8.5 L 54.8082032302755,13.5 L 47.879999999999995,18.5 L 47.879999999999995,27 A 0 0 0 0 1 47.879999999999995 27 L 0,27 A 0 0 0 0 1 0 27 L 0,0 A 0 0 0 0 1 0 0 Z"
+                d="M -10,-13.5 L 37.879999999999995,-13.5 A 0 0 0 0 1 37.879999999999995 -13.5 L 37.879999999999995,-13.5 L 37.879999999999995,-5 L 44.8082032302755,0 L 37.879999999999995,5 L 37.879999999999995,13.5 A 0 0 0 0 1 37.879999999999995 13.5 L -10,13.5 A 0 0 0 0 1 -10 13.5 L -10,-13.5 A 0 0 0 0 1 -10 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-150"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g
-                id="g-svg-151"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="indicator-label"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-150" fill="none" class="indicator-label-group">
+              <g id="g-svg-151" fill="none" class="indicator-label">
+                <g>
                   <circle
                     id="g-svg-152"
                     fill="rgba(255,165,0,1)"
-                    transform="translate(-6,-6)"
-                    cx="6"
-                    cy="6"
                     r="6"
                     visibility="visible"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,12,0)">
+                <g>
                   <text
                     id="g-svg-153"
                     fill="rgba(255,255,255,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="12"
                     dx="0.5"
                     font-family="sans-serif"
                     font-size="12"
@@ -2099,9 +1913,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,50,170)">
-          <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,10.928204,0)">
-            <g transform="matrix(1,0,0,1,-10.928204,-13.500000)">
+        <g id="g-svg-30" fill="none" x="50" y="170">
+          <g
+            id="g-svg-31"
+            fill="none"
+            transform="matrix(1,0,0,1,60.928204,170)"
+          >
+            <g>
               <path
                 id="g-svg-160"
                 fill="rgba(38,38,38,1)"
@@ -2109,17 +1927,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 6.928203230275509,0 L 34.88820323027551,0 A 0 0 0 0 1 34.88820323027551 0 L 34.88820323027551,27 A 0 0 0 0 1 34.88820323027551 27 L 6.928203230275509,27 A 0 0 0 0 1 6.928203230275509 27 L 6.928203230275509,27 L 6.928203230275509,18.5 L 0,13.5 L 6.928203230275509,8.5 L 6.928203230275509,0 A 0 0 0 0 1 6.928203230275509 0 Z"
+                d="M -3.9999999999999964,-13.5 L 23.960000000000004,-13.5 A 0 0 0 0 1 23.960000000000004 -13.5 L 23.960000000000004,13.5 A 0 0 0 0 1 23.960000000000004 13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,13.5 L -3.9999999999999964,5 L -10.928203230275505,0 L -3.9999999999999964,-5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-158"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-158" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-159"
                   fill="rgba(255,255,255,1)"
@@ -2142,9 +1955,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-33" fill="none" transform="matrix(1,0,0,1,50,200)">
-          <g id="g-svg-34" fill="none" transform="matrix(1,0,0,1,10.928204,0)">
-            <g transform="matrix(1,0,0,1,-10.928204,-13.500000)">
+        <g id="g-svg-33" fill="none" x="50" y="200">
+          <g
+            id="g-svg-34"
+            fill="none"
+            transform="matrix(1,0,0,1,60.928204,200)"
+          >
+            <g>
               <path
                 id="g-svg-163"
                 fill="rgba(38,38,38,1)"
@@ -2152,17 +1969,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 6.928203230275509,0 L 52.168203230275516,0 A 0 0 0 0 1 52.168203230275516 0 L 52.168203230275516,27 A 0 0 0 0 1 52.168203230275516 27 L 6.928203230275509,27 A 0 0 0 0 1 6.928203230275509 27 L 6.928203230275509,27 L 6.928203230275509,18.5 L 0,13.5 L 6.928203230275509,8.5 L 6.928203230275509,0 A 0 0 0 0 1 6.928203230275509 0 Z"
+                d="M -3.9999999999999964,-13.5 L 41.24000000000001,-13.5 A 0 0 0 0 1 41.24000000000001 -13.5 L 41.24000000000001,13.5 A 0 0 0 0 1 41.24000000000001 13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,13.5 L -3.9999999999999964,5 L -10.928203230275505,0 L -3.9999999999999964,-5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-161"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-161" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-162"
                   fill="rgba(255,255,255,1)"
@@ -2185,9 +1997,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-36" fill="none" transform="matrix(1,0,0,1,50,230)">
-          <g id="g-svg-37" fill="none" transform="matrix(1,0,0,1,10.928204,0)">
-            <g transform="matrix(1,0,0,1,-10.928204,-13.500000)">
+        <g id="g-svg-36" fill="none" x="50" y="230">
+          <g
+            id="g-svg-37"
+            fill="none"
+            transform="matrix(1,0,0,1,60.928204,230)"
+          >
+            <g>
               <path
                 id="g-svg-166"
                 fill="rgba(255,255,255,1)"
@@ -2195,17 +2011,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 6.928203230275509,0 L 52.168203230275516,0 A 0 0 0 0 1 52.168203230275516 0 L 52.168203230275516,27 A 0 0 0 0 1 52.168203230275516 27 L 6.928203230275509,27 A 0 0 0 0 1 6.928203230275509 27 L 6.928203230275509,27 L 6.928203230275509,18.5 L 0,13.5 L 6.928203230275509,8.5 L 6.928203230275509,0 A 0 0 0 0 1 6.928203230275509 0 Z"
+                d="M -3.9999999999999964,-13.5 L 41.24000000000001,-13.5 A 0 0 0 0 1 41.24000000000001 -13.5 L 41.24000000000001,13.5 A 0 0 0 0 1 41.24000000000001 13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,13.5 L -3.9999999999999964,5 L -10.928203230275505,0 L -3.9999999999999964,-5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-164"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-164" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-165"
                   fill="rgba(0,0,0,1)"
@@ -2228,9 +2039,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-39" fill="none" transform="matrix(1,0,0,1,50,260)">
-          <g id="g-svg-40" fill="none" transform="matrix(1,0,0,1,16.928204,0)">
-            <g transform="matrix(1,0,0,1,-16.928204,-13.500000)">
+        <g id="g-svg-39" fill="none" x="50" y="260">
+          <g
+            id="g-svg-40"
+            fill="none"
+            transform="matrix(1,0,0,1,66.928200,260)"
+          >
+            <g>
               <path
                 id="g-svg-174"
                 fill="rgba(38,38,38,1)"
@@ -2238,39 +2053,27 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 6.928203230275507,0 L 54.8082032302755,0 A 0 0 0 0 1 54.8082032302755 0 L 54.8082032302755,27 A 0 0 0 0 1 54.8082032302755 27 L 6.928203230275507,27 A 0 0 0 0 1 6.928203230275507 27 L 6.928203230275507,27 L 6.928203230275507,18.5 L 0,13.5 L 6.928203230275507,8.5 L 6.928203230275507,0 A 0 0 0 0 1 6.928203230275507 0 Z"
+                d="M -10,-13.5 L 37.879999999999995,-13.5 A 0 0 0 0 1 37.879999999999995 -13.5 L 37.879999999999995,13.5 A 0 0 0 0 1 37.879999999999995 13.5 L -10,13.5 A 0 0 0 0 1 -10 13.5 L -10,13.5 L -10,5 L -16.928203230275507,0 L -10,-5 L -10,-13.5 A 0 0 0 0 1 -10 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-167"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g
-                id="g-svg-168"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="indicator-label"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-167" fill="none" class="indicator-label-group">
+              <g id="g-svg-168" fill="none" class="indicator-label">
+                <g>
                   <circle
                     id="g-svg-169"
                     fill="rgba(255,165,0,1)"
-                    transform="translate(-6,-6)"
-                    cx="6"
-                    cy="6"
                     r="6"
                     visibility="visible"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,12,0)">
+                <g>
                   <text
                     id="g-svg-170"
                     fill="rgba(255,255,255,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="12"
                     dx="0.5"
                     font-family="sans-serif"
                     font-size="12"
@@ -2288,13 +2091,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-43" fill="none" transform="matrix(1,0,0,1,150,50)">
+        <g id="g-svg-43" fill="none" x="150" y="50">
           <g
             id="g-svg-44"
             fill="none"
-            transform="matrix(1,0,0,1,-9.980000,-20.428204)"
+            transform="matrix(1,0,0,1,140.020004,29.571796)"
           >
-            <g transform="matrix(1,0,0,1,-4,-13.500000)">
+            <g>
               <path
                 id="g-svg-177"
                 fill="rgba(38,38,38,1)"
@@ -2302,17 +2105,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 0,0 L 27.96,0 A 0 0 0 0 1 27.96 0 L 27.96,27 A 0 0 0 0 1 27.96 27 L 27.96,27 L 18.98,27 L 13.98,33.92820323027551 L 8.98,27 L 0,27 A 0 0 0 0 1 0 27 L 0,0 A 0 0 0 0 1 0 0 Z"
+                d="M -3.9999999999999964,-13.5 L 23.960000000000004,-13.5 A 0 0 0 0 1 23.960000000000004 -13.5 L 23.960000000000004,13.5 A 0 0 0 0 1 23.960000000000004 13.5 L 23.960000000000004,13.5 L 14.980000000000004,13.5 L 9.980000000000004,20.428203230275507 L 4.980000000000004,13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-175"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-175" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-176"
                   fill="rgba(255,255,255,1)"
@@ -2335,13 +2133,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-46" fill="none" transform="matrix(1,0,0,1,150,80)">
+        <g id="g-svg-46" fill="none" x="150" y="80">
           <g
             id="g-svg-47"
             fill="none"
-            transform="matrix(1,0,0,1,-18.620001,-20.428204)"
+            transform="matrix(1,0,0,1,131.380005,59.571796)"
           >
-            <g transform="matrix(1,0,0,1,-4,-13.500000)">
+            <g>
               <path
                 id="g-svg-180"
                 fill="rgba(38,38,38,1)"
@@ -2349,17 +2147,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 0,0 L 45.24000000000001,0 A 0 0 0 0 1 45.24000000000001 0 L 45.24000000000001,27 A 0 0 0 0 1 45.24000000000001 27 L 45.24000000000001,27 L 27.62,27 L 22.62,33.92820323027551 L 17.62,27 L 0,27 A 0 0 0 0 1 0 27 L 0,0 A 0 0 0 0 1 0 0 Z"
+                d="M -3.9999999999999964,-13.5 L 41.24000000000001,-13.5 A 0 0 0 0 1 41.24000000000001 -13.5 L 41.24000000000001,13.5 A 0 0 0 0 1 41.24000000000001 13.5 L 41.24000000000001,13.5 L 23.620000000000005,13.5 L 18.620000000000005,20.428203230275507 L 13.620000000000005,13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-178"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-178" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-179"
                   fill="rgba(255,255,255,1)"
@@ -2382,13 +2175,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-49" fill="none" transform="matrix(1,0,0,1,150,110)">
+        <g id="g-svg-49" fill="none" x="150" y="110">
           <g
             id="g-svg-50"
             fill="none"
-            transform="matrix(1,0,0,1,-18.620001,-20.428204)"
+            transform="matrix(1,0,0,1,131.380005,89.571800)"
           >
-            <g transform="matrix(1,0,0,1,-4,-13.500000)">
+            <g>
               <path
                 id="g-svg-183"
                 fill="rgba(255,255,255,1)"
@@ -2396,17 +2189,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 0,0 L 45.24000000000001,0 A 0 0 0 0 1 45.24000000000001 0 L 45.24000000000001,27 A 0 0 0 0 1 45.24000000000001 27 L 45.24000000000001,27 L 27.62,27 L 22.62,33.92820323027551 L 17.62,27 L 0,27 A 0 0 0 0 1 0 27 L 0,0 A 0 0 0 0 1 0 0 Z"
+                d="M -3.9999999999999964,-13.5 L 41.24000000000001,-13.5 A 0 0 0 0 1 41.24000000000001 -13.5 L 41.24000000000001,13.5 A 0 0 0 0 1 41.24000000000001 13.5 L 41.24000000000001,13.5 L 23.620000000000005,13.5 L 18.620000000000005,20.428203230275507 L 13.620000000000005,13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-181"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-181" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-182"
                   fill="rgba(0,0,0,1)"
@@ -2429,13 +2217,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-52" fill="none" transform="matrix(1,0,0,1,150,140)">
+        <g id="g-svg-52" fill="none" x="150" y="140">
           <g
             id="g-svg-53"
             fill="none"
-            transform="matrix(1,0,0,1,-13.940000,-20.428204)"
+            transform="matrix(1,0,0,1,136.059998,119.571800)"
           >
-            <g transform="matrix(1,0,0,1,-10,-13.500000)">
+            <g>
               <path
                 id="g-svg-191"
                 fill="rgba(38,38,38,1)"
@@ -2443,39 +2231,27 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 0,0 L 47.879999999999995,0 A 0 0 0 0 1 47.879999999999995 0 L 47.879999999999995,27 A 0 0 0 0 1 47.879999999999995 27 L 47.879999999999995,27 L 28.939999999999998,27 L 23.939999999999998,33.92820323027551 L 18.939999999999998,27 L 0,27 A 0 0 0 0 1 0 27 L 0,0 A 0 0 0 0 1 0 0 Z"
+                d="M -10,-13.5 L 37.879999999999995,-13.5 A 0 0 0 0 1 37.879999999999995 -13.5 L 37.879999999999995,13.5 A 0 0 0 0 1 37.879999999999995 13.5 L 37.879999999999995,13.5 L 18.939999999999998,13.5 L 13.939999999999998,20.428203230275507 L 8.939999999999998,13.5 L -10,13.5 A 0 0 0 0 1 -10 13.5 L -10,-13.5 A 0 0 0 0 1 -10 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-184"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g
-                id="g-svg-185"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="indicator-label"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-184" fill="none" class="indicator-label-group">
+              <g id="g-svg-185" fill="none" class="indicator-label">
+                <g>
                   <circle
                     id="g-svg-186"
                     fill="rgba(255,165,0,1)"
-                    transform="translate(-6,-6)"
-                    cx="6"
-                    cy="6"
                     r="6"
                     visibility="visible"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,12,0)">
+                <g>
                   <text
                     id="g-svg-187"
                     fill="rgba(255,255,255,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="12"
                     dx="0.5"
                     font-family="sans-serif"
                     font-size="12"
@@ -2493,13 +2269,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-56" fill="none" transform="matrix(1,0,0,1,150,180)">
+        <g id="g-svg-56" fill="none" x="150" y="180">
           <g
             id="g-svg-57"
             fill="none"
-            transform="matrix(1,0,0,1,-9.980000,20.428204)"
+            transform="matrix(1,0,0,1,140.020004,200.428207)"
           >
-            <g transform="matrix(1,0,0,1,-4,-20.428204)">
+            <g>
               <path
                 id="g-svg-194"
                 fill="rgba(38,38,38,1)"
@@ -2507,17 +2283,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 0,6.928203230275507 L 0,6.928203230275507 L 8.98,6.928203230275507 L 13.98,0 L 18.98,6.928203230275507 L 27.96,6.928203230275507 A 0 0 0 0 1 27.96 6.928203230275507 L 27.96,33.92820323027551 A 0 0 0 0 1 27.96 33.92820323027551 L 0,33.92820323027551 A 0 0 0 0 1 0 33.92820323027551 L 0,6.928203230275507 A 0 0 0 0 1 0 6.928203230275507 Z"
+                d="M -3.9999999999999964,-13.5 L -3.9999999999999964,-13.5 L 4.980000000000004,-13.5 L 9.980000000000004,-20.428203230275507 L 14.980000000000004,-13.5 L 23.960000000000004,-13.5 A 0 0 0 0 1 23.960000000000004 -13.5 L 23.960000000000004,13.5 A 0 0 0 0 1 23.960000000000004 13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-192"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-192" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-193"
                   fill="rgba(255,255,255,1)"
@@ -2540,13 +2311,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-59" fill="none" transform="matrix(1,0,0,1,150,220)">
+        <g id="g-svg-59" fill="none" x="150" y="220">
           <g
             id="g-svg-60"
             fill="none"
-            transform="matrix(1,0,0,1,-18.620001,20.428204)"
+            transform="matrix(1,0,0,1,131.380005,240.428207)"
           >
-            <g transform="matrix(1,0,0,1,-4,-20.428204)">
+            <g>
               <path
                 id="g-svg-197"
                 fill="rgba(38,38,38,1)"
@@ -2554,17 +2325,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 0,6.928203230275507 L 0,6.928203230275507 L 17.620000000000005,6.928203230275507 L 22.620000000000005,0 L 27.620000000000005,6.928203230275507 L 45.24000000000001,6.928203230275507 A 0 0 0 0 1 45.24000000000001 6.928203230275507 L 45.24000000000001,33.92820323027551 A 0 0 0 0 1 45.24000000000001 33.92820323027551 L 0,33.92820323027551 A 0 0 0 0 1 0 33.92820323027551 L 0,6.928203230275507 A 0 0 0 0 1 0 6.928203230275507 Z"
+                d="M -3.9999999999999964,-13.5 L -3.9999999999999964,-13.5 L 13.620000000000008,-13.5 L 18.620000000000008,-20.428203230275507 L 23.620000000000008,-13.5 L 41.24000000000001,-13.5 A 0 0 0 0 1 41.24000000000001 -13.5 L 41.24000000000001,13.5 A 0 0 0 0 1 41.24000000000001 13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-195"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-195" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-196"
                   fill="rgba(255,255,255,1)"
@@ -2587,13 +2353,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-62" fill="none" transform="matrix(1,0,0,1,150,250)">
+        <g id="g-svg-62" fill="none" x="150" y="250">
           <g
             id="g-svg-63"
             fill="none"
-            transform="matrix(1,0,0,1,-18.620001,20.428204)"
+            transform="matrix(1,0,0,1,131.380005,270.428192)"
           >
-            <g transform="matrix(1,0,0,1,-4,-20.428204)">
+            <g>
               <path
                 id="g-svg-200"
                 fill="rgba(255,255,255,1)"
@@ -2601,17 +2367,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 0,6.928203230275507 L 0,6.928203230275507 L 17.620000000000005,6.928203230275507 L 22.620000000000005,0 L 27.620000000000005,6.928203230275507 L 45.24000000000001,6.928203230275507 A 0 0 0 0 1 45.24000000000001 6.928203230275507 L 45.24000000000001,33.92820323027551 A 0 0 0 0 1 45.24000000000001 33.92820323027551 L 0,33.92820323027551 A 0 0 0 0 1 0 33.92820323027551 L 0,6.928203230275507 A 0 0 0 0 1 0 6.928203230275507 Z"
+                d="M -3.9999999999999964,-13.5 L -3.9999999999999964,-13.5 L 13.620000000000008,-13.5 L 18.620000000000008,-20.428203230275507 L 23.620000000000008,-13.5 L 41.24000000000001,-13.5 A 0 0 0 0 1 41.24000000000001 -13.5 L 41.24000000000001,13.5 A 0 0 0 0 1 41.24000000000001 13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-198"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-198" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-199"
                   fill="rgba(0,0,0,1)"
@@ -2634,17 +2395,17 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-65" fill="none" transform="matrix(1,0,0,1,150,290)">
+        <g id="g-svg-65" fill="none" x="150" y="290">
           <g
             id="g-svg-66"
             fill="none"
-            transform="matrix(1,0,0,1,-32.959999,20.428204)"
+            transform="matrix(1,0,0,1,117.040001,310.428192)"
           >
-            <g transform="matrix(1,0,0,1,-10,-20.428204)">
+            <g>
               <path
                 id="g-svg-75"
                 fill="rgba(38,38,38,1)"
-                d="M 0,6.928203230275507 L 0,6.928203230275507 L 37.96000000000001,6.928203230275507 L 42.96000000000001,0 L 47.96000000000001,6.928203230275507 L 85.92000000000002,6.928203230275507 A 0 0 0 0 1 85.92000000000002 6.928203230275507 L 85.92000000000002,33.92820323027551 A 0 0 0 0 1 85.92000000000002 33.92820323027551 L 0,33.92820323027551 A 0 0 0 0 1 0 33.92820323027551 L 0,6.928203230275507 A 0 0 0 0 1 0 6.928203230275507 Z"
+                d="M -10.000007629394545,-13.5 L -10.000007629394545,-13.5 L 27.95999237060545,-13.5 L 32.95999237060545,-20.428203230275507 L 37.95999237060545,-13.5 L 75.91999237060544,-13.5 A 0 0 0 0 1 75.91999237060544 -13.5 L 75.91999237060544,13.5 A 0 0 0 0 1 75.91999237060544 13.5 L -10.000007629394545,13.5 A 0 0 0 0 1 -10.000007629394545 13.5 L -10.000007629394545,-13.5 A 0 0 0 0 1 -10.000007629394545 -13.5 Z"
                 class="indicator-background"
                 stroke-linecap="round"
                 stroke-width="1"
@@ -2652,35 +2413,23 @@
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-68"
-              fill="none"
-              class="indicator-label-group"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g
-                id="g-svg-69"
-                fill="none"
-                class="indicator-label"
-                transform="matrix(1,0,0,1,0,0)"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-68" fill="none" class="indicator-label-group">
+              <g id="g-svg-69" fill="none" class="indicator-label">
+                <g>
                   <circle
                     id="g-svg-70"
                     fill="rgba(255,165,0,1)"
-                    transform="translate(-6,-6)"
-                    cx="6"
-                    cy="6"
                     r="6"
                     visibility="visible"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,12,0)">
+                <g>
                   <text
                     id="g-svg-71"
                     fill="rgba(255,0,0,1)"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="12"
                     dx="0.5"
                     font-family="sans-serif"
                     font-size="12"
@@ -2698,13 +2447,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-76" fill="none" transform="matrix(1,0,0,1,250,100)">
+        <g id="g-svg-76" fill="none" x="250" y="100">
           <g
             id="g-svg-77"
             fill="none"
-            transform="matrix(1,0,0,1,-9.980000,20.428204)"
+            transform="matrix(1,0,0,1,240.020004,120.428200)"
           >
-            <g transform="matrix(1,0,0,1,-4,-20.428204)">
+            <g>
               <path
                 id="g-svg-206"
                 fill="rgba(38,38,38,1)"
@@ -2712,17 +2461,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 0,6.928203230275507 L 0,6.928203230275507 L 8.98,6.928203230275507 L 13.98,0 L 18.98,6.928203230275507 L 27.96,6.928203230275507 A 0 0 0 0 1 27.96 6.928203230275507 L 27.96,33.92820323027551 A 0 0 0 0 1 27.96 33.92820323027551 L 0,33.92820323027551 A 0 0 0 0 1 0 33.92820323027551 L 0,6.928203230275507 A 0 0 0 0 1 0 6.928203230275507 Z"
+                d="M -3.9999999999999964,-13.5 L -3.9999999999999964,-13.5 L 4.980000000000004,-13.5 L 9.980000000000004,-20.428203230275507 L 14.980000000000004,-13.5 L 23.960000000000004,-13.5 A 0 0 0 0 1 23.960000000000004 -13.5 L 23.960000000000004,13.5 A 0 0 0 0 1 23.960000000000004 13.5 L -3.9999999999999964,13.5 A 0 0 0 0 1 -3.9999999999999964 13.5 L -3.9999999999999964,-13.5 A 0 0 0 0 1 -3.9999999999999964 -13.5 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-204"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-204" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-205"
                   fill="rgba(255,255,255,1)"
diff --git a/__tests__/integration/snapshots/IndicatorRadius.svg b/__tests__/integration/snapshots/IndicatorRadius.svg
index b0173819d..5188bab3a 100644
--- a/__tests__/integration/snapshots/IndicatorRadius.svg
+++ b/__tests__/integration/snapshots/IndicatorRadius.svg
@@ -6,12 +6,16 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-207" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-208" fill="none" transform="matrix(1,0,0,1,10,20)">
-          <g id="g-svg-209" fill="none" transform="matrix(1,0,0,1,10.928204,0)">
-            <g transform="matrix(1,0,0,1,-10.928204,-25)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-207" fill="none">
+        <g id="g-svg-208" fill="none" x="10" y="20">
+          <g
+            id="g-svg-209"
+            fill="none"
+            transform="matrix(1,0,0,1,20.928204,20)"
+          >
+            <g>
               <path
                 id="g-svg-3"
                 fill="rgba(38,38,38,1)"
@@ -19,17 +23,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 9.928203230275509,0 L 93.80820323027552,0 A 3 3 0 0 1 96.80820323027552 3 L 96.80820323027552,47 A 3 3 0 0 1 93.80820323027552 50 L 9.928203230275509,50 A 3 3 0 0 1 6.928203230275509 47 L 6.928203230275509,47 L 6.928203230275509,30 L 0,25 L 6.928203230275509,20 L 6.928203230275509,3 A 3 3 0 0 1 9.928203230275509 0 Z"
+                d="M -1,-25 L 82.88000000000001,-25 A 3 3 0 0 1 85.88000000000001 -22 L 85.88000000000001,22 A 3 3 0 0 1 82.88000000000001 25 L -1,25 A 3 3 0 0 1 -4 22 L -4,22 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-22 A 3 3 0 0 1 -1 -25 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-1" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-2"
                   fill="rgba(255,255,255,1)"
@@ -56,13 +55,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-210" fill="none" transform="matrix(1,0,0,1,100,60)">
+        <g id="g-svg-210" fill="none" x="100" y="60">
           <g
             id="g-svg-211"
             fill="none"
-            transform="matrix(1,0,0,1,-84.888206,0)"
+            transform="matrix(1,0,0,1,15.111796,60)"
           >
-            <g transform="matrix(1,0,0,1,-4,-25)">
+            <g>
               <path
                 id="g-svg-6"
                 fill="rgba(38,38,38,1)"
@@ -70,17 +69,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 3,0 L 78.96000000000001,0 A 3 3 0 0 1 81.96000000000001 3 L 81.96000000000001,3 L 81.96000000000001,20 L 88.88820323027552,25 L 81.96000000000001,30 L 81.96000000000001,47 A 3 3 0 0 1 78.96000000000001 50 L 3,50 A 3 3 0 0 1 0 47 L 0,3 A 3 3 0 0 1 3 0 Z"
+                d="M -1,-25 L 74.96000000000001,-25 A 3 3 0 0 1 77.96000000000001 -22 L 77.96000000000001,-22 L 77.96000000000001,-5 L 84.88820323027552,0 L 77.96000000000001,5 L 77.96000000000001,22 A 3 3 0 0 1 74.96000000000001 25 L -1,25 A 3 3 0 0 1 -4 22 L -4,-22 A 3 3 0 0 1 -1 -25 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-4"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-4" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-5"
                   fill="rgba(255,255,255,1)"
@@ -107,13 +101,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-212" fill="none" transform="matrix(1,0,0,1,60,125)">
+        <g id="g-svg-212" fill="none" x="60" y="125">
           <g
             id="g-svg-213"
             fill="none"
-            transform="matrix(1,0,0,1,-37.040001,-31.928204)"
+            transform="matrix(1,0,0,1,22.959999,93.071800)"
           >
-            <g transform="matrix(1,0,0,1,-4,-25)">
+            <g>
               <path
                 id="g-svg-9"
                 fill="rgba(38,38,38,1)"
@@ -121,17 +115,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 3,0 L 79.07999999999998,0 A 3 3 0 0 1 82.07999999999998 3 L 82.07999999999998,47 A 3 3 0 0 1 79.07999999999998 50 L 79.07999999999998,50 L 46.04,50 L 41.04,56.92820323027551 L 36.04,50 L 3,50 A 3 3 0 0 1 0 47 L 0,3 A 3 3 0 0 1 3 0 Z"
+                d="M -1,-25 L 75.08,-25 A 3 3 0 0 1 78.08 -22 L 78.08,22 A 3 3 0 0 1 75.08 25 L 75.08,25 L 42.04,25 L 37.04,31.928203230275507 L 32.04,25 L -1,25 A 3 3 0 0 1 -4 22 L -4,-22 A 3 3 0 0 1 -1 -25 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-7"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-7" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-8"
                   fill="rgba(255,255,255,1)"
@@ -158,13 +147,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-214" fill="none" transform="matrix(1,0,0,1,60,130)">
+        <g id="g-svg-214" fill="none" x="60" y="130">
           <g
             id="g-svg-215"
             fill="none"
-            transform="matrix(1,0,0,1,-48.259998,31.928204)"
+            transform="matrix(1,0,0,1,11.740000,161.928207)"
           >
-            <g transform="matrix(1,0,0,1,-4,-31.928204)">
+            <g>
               <path
                 id="g-svg-12"
                 fill="rgba(38,38,38,1)"
@@ -172,17 +161,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 3,6.928203230275507 L 3,6.928203230275507 L 47.260000000000005,6.928203230275507 L 52.260000000000005,0 L 57.260000000000005,6.928203230275507 L 101.52000000000001,6.928203230275507 A 3 3 0 0 1 104.52000000000001 9.928203230275507 L 104.52000000000001,53.92820323027551 A 3 3 0 0 1 101.52000000000001 56.92820323027551 L 3,56.92820323027551 A 3 3 0 0 1 0 53.92820323027551 L 0,9.928203230275507 A 3 3 0 0 1 3 6.928203230275507 Z"
+                d="M -1,-25 L -1,-25 L 43.260000000000005,-25 L 48.260000000000005,-31.928203230275507 L 53.260000000000005,-25 L 97.52000000000001,-25 A 3 3 0 0 1 100.52000000000001 -22 L 100.52000000000001,22 A 3 3 0 0 1 97.52000000000001 25 L -1,25 A 3 3 0 0 1 -4 22 L -4,-22 A 3 3 0 0 1 -1 -25 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-10"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-10" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-11"
                   fill="rgba(255,255,255,1)"
@@ -209,9 +193,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-216" fill="none" transform="matrix(1,0,0,1,120,20)">
-          <g id="g-svg-217" fill="none" transform="matrix(1,0,0,1,10.928204,0)">
-            <g transform="matrix(1,0,0,1,-10.928204,-25)">
+        <g id="g-svg-216" fill="none" x="120" y="20">
+          <g
+            id="g-svg-217"
+            fill="none"
+            transform="matrix(1,0,0,1,130.928207,20)"
+          >
+            <g>
               <path
                 id="g-svg-15"
                 fill="rgba(38,38,38,1)"
@@ -219,17 +207,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 14.928203230275509,0 L 88.80820323027551,0 A 8 8 0 0 1 96.80820323027551 8 L 96.80820323027551,42 A 8 8 0 0 1 88.80820323027551 50 L 14.928203230275509,50 A 8 8 0 0 1 6.928203230275509 42 L 6.928203230275509,42 L 6.928203230275509,30 L 0,25 L 6.928203230275509,20 L 6.928203230275509,8 A 8 8 0 0 1 14.928203230275509 0 Z"
+                d="M 4,-25 L 77.88000000000001,-25 A 8 8 0 0 1 85.88000000000001 -17 L 85.88000000000001,17 A 8 8 0 0 1 77.88000000000001 25 L 4,25 A 8 8 0 0 1 -4 17 L -4,17 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-17 A 8 8 0 0 1 4 -25 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-13" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-14"
                   fill="rgba(255,255,255,1)"
@@ -256,13 +239,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-218" fill="none" transform="matrix(1,0,0,1,210,60)">
+        <g id="g-svg-218" fill="none" x="210" y="60">
           <g
             id="g-svg-219"
             fill="none"
-            transform="matrix(1,0,0,1,-84.888206,0)"
+            transform="matrix(1,0,0,1,125.111794,60)"
           >
-            <g transform="matrix(1,0,0,1,-4,-25)">
+            <g>
               <path
                 id="g-svg-18"
                 fill="rgba(38,38,38,1)"
@@ -270,17 +253,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 8,0 L 73.96000000000001,0 A 8 8 0 0 1 81.96000000000001 8 L 81.96000000000001,8 L 81.96000000000001,20 L 88.88820323027552,25 L 81.96000000000001,30 L 81.96000000000001,42 A 8 8 0 0 1 73.96000000000001 50 L 8,50 A 8 8 0 0 1 0 42 L 0,8 A 8 8 0 0 1 8 0 Z"
+                d="M 4,-25 L 69.96000000000001,-25 A 8 8 0 0 1 77.96000000000001 -17 L 77.96000000000001,-17 L 77.96000000000001,-5 L 84.88820323027552,0 L 77.96000000000001,5 L 77.96000000000001,17 A 8 8 0 0 1 69.96000000000001 25 L 4,25 A 8 8 0 0 1 -4 17 L -4,-17 A 8 8 0 0 1 4 -25 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-16"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-16" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-17"
                   fill="rgba(255,255,255,1)"
@@ -307,13 +285,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-220" fill="none" transform="matrix(1,0,0,1,170,125)">
+        <g id="g-svg-220" fill="none" x="170" y="125">
           <g
             id="g-svg-221"
             fill="none"
-            transform="matrix(1,0,0,1,-37.040001,-31.928204)"
+            transform="matrix(1,0,0,1,132.960007,93.071800)"
           >
-            <g transform="matrix(1,0,0,1,-4,-25)">
+            <g>
               <path
                 id="g-svg-21"
                 fill="rgba(38,38,38,1)"
@@ -321,17 +299,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 8,0 L 74.07999999999998,0 A 8 8 0 0 1 82.07999999999998 8 L 82.07999999999998,42 A 8 8 0 0 1 74.07999999999998 50 L 74.07999999999998,50 L 46.04,50 L 41.04,56.92820323027551 L 36.04,50 L 8,50 A 8 8 0 0 1 0 42 L 0,8 A 8 8 0 0 1 8 0 Z"
+                d="M 4,-25 L 70.08,-25 A 8 8 0 0 1 78.08 -17 L 78.08,17 A 8 8 0 0 1 70.08 25 L 70.08,25 L 42.04,25 L 37.04,31.928203230275507 L 32.04,25 L 4,25 A 8 8 0 0 1 -4 17 L -4,-17 A 8 8 0 0 1 4 -25 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-19"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-19" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-20"
                   fill="rgba(255,255,255,1)"
@@ -358,13 +331,13 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-222" fill="none" transform="matrix(1,0,0,1,170,130)">
+        <g id="g-svg-222" fill="none" x="170" y="130">
           <g
             id="g-svg-223"
             fill="none"
-            transform="matrix(1,0,0,1,-48.259998,31.928204)"
+            transform="matrix(1,0,0,1,121.739998,161.928207)"
           >
-            <g transform="matrix(1,0,0,1,-4,-31.928204)">
+            <g>
               <path
                 id="g-svg-24"
                 fill="rgba(38,38,38,1)"
@@ -372,17 +345,12 @@
                 stroke-linecap="round"
                 stroke-width="1"
                 stroke="rgba(51,51,51,1)"
-                d="M 8,6.928203230275507 L 8,6.928203230275507 L 47.260000000000005,6.928203230275507 L 52.260000000000005,0 L 57.260000000000005,6.928203230275507 L 96.52000000000001,6.928203230275507 A 8 8 0 0 1 104.52000000000001 14.928203230275507 L 104.52000000000001,48.92820323027551 A 8 8 0 0 1 96.52000000000001 56.92820323027551 L 8,56.92820323027551 A 8 8 0 0 1 0 48.92820323027551 L 0,14.928203230275507 A 8 8 0 0 1 8 6.928203230275507 Z"
+                d="M 4,-25 L 4,-25 L 43.260000000000005,-25 L 48.260000000000005,-31.928203230275507 L 53.260000000000005,-25 L 92.52000000000001,-25 A 8 8 0 0 1 100.52000000000001 -17 L 100.52000000000001,17 A 8 8 0 0 1 92.52000000000001 25 L 4,25 A 8 8 0 0 1 -4 17 L -4,-17 A 8 8 0 0 1 4 -25 Z"
                 visibility="visible"
               />
             </g>
-            <g
-              id="g-svg-22"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="indicator-label-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-22" fill="none" class="indicator-label-group">
+              <g>
                 <text
                   id="g-svg-23"
                   fill="rgba(255,255,255,1)"
diff --git a/__tests__/integration/snapshots/LayoutContinuous1.svg b/__tests__/integration/snapshots/LayoutContinuous1.svg
index 35954db34..ce1ea3748 100644
--- a/__tests__/integration/snapshots/LayoutContinuous1.svg
+++ b/__tests__/integration/snapshots/LayoutContinuous1.svg
@@ -29,16 +29,10 @@
       <use href="#g-svg-35" transform="matrix(1,0,0,1,14.900000,0)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-82"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-83"
             fill="none"
@@ -48,53 +42,25 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-84"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-85"
-            fill="none"
-            width="300"
-            height="50"
-            transform="matrix(1,0,0,1,0,0)"
-          >
+        <g id="g-svg-84" fill="none" width="500" height="500">
+          <g id="g-svg-85" fill="none" width="300" height="50">
             <g
               id="g-svg-1"
               fill="none"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-content-group"
-            >
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon-group"
-              >
+            <g id="g-svg-2" fill="none" class="legend-content-group">
+              <g id="g-svg-4" fill="none" class="legend-ribbon-group">
                 <g
                   id="g-svg-30"
                   fill="none"
                   transform="matrix(1,0,0,1,14.900000,0)"
                   class="legend-ribbon"
                 >
-                  <g
-                    id="g-svg-31"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-background-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-31" fill="none" class="ribbon-background-group">
+                    <g>
                       <path
                         id="g-svg-32"
                         fill="rgba(255,192,203,1)"
@@ -103,23 +69,15 @@
                       />
                     </g>
                   </g>
-                  <g
-                    id="g-svg-33"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-ribbon-group"
-                  >
-                    <g
-                      transform="matrix(1,0,0,1,0,0)"
-                      clip-path="url(#clip-path-35-34)"
-                    >
+                  <g id="g-svg-33" fill="none" class="ribbon-ribbon-group">
+                    <g clip-path="url(#clip-path-35-34)">
                       <path
                         id="g-svg-34"
                         fill="url(#g-pattern-0)"
                         class="ribbon-ribbon"
                         d="M 0,50 L 0,0 L 270.2,0 L 270.2,50 Z"
                       />
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-35"
                           fill="none"
@@ -131,68 +89,58 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label-group"
-              />
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-handles-group"
-              >
+              <g id="g-svg-3" fill="none" class="legend-label-group" />
+              <g id="g-svg-5" fill="none" class="legend-handles-group">
                 <g
                   id="g-svg-6"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,14.900000,25)"
                   class="legend-handle legend-start-handle"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-7" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-41"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-42"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-43"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -201,13 +149,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-12"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-12" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-13"
                         fill="rgba(197,197,197,1)"
@@ -218,6 +161,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         0
                       </text>
@@ -227,53 +172,53 @@
                 <g
                   id="g-svg-14"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,285.100006,25)"
                   class="legend-handle legend-end-handle"
                 >
-                  <g
-                    id="g-svg-15"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-15" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-44"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-45"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-46"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-47"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -282,13 +227,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-20"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-20" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-21"
                         fill="rgba(197,197,197,1)"
@@ -299,6 +239,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         1000
                       </text>
@@ -306,18 +248,9 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-36"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-indicator"
-              >
-                <g
-                  id="g-svg-37"
-                  fill="none"
-                  transform="matrix(1,0,0,1,10.928204,0)"
-                >
-                  <g transform="matrix(1,0,0,1,-10.928204,-5)">
+              <g id="g-svg-36" fill="none" class="legend-indicator">
+                <g id="g-svg-37" fill="none">
+                  <g>
                     <path
                       id="g-svg-39"
                       fill="rgba(38,38,38,1)"
@@ -325,16 +258,11 @@
                       stroke-linecap="round"
                       stroke-width="1"
                       stroke="rgba(51,51,51,1)"
-                      d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                      d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                       visibility="hidden"
                     />
                   </g>
-                  <g
-                    id="g-svg-38"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="indicator-label-group"
-                  />
+                  <g id="g-svg-38" fill="none" class="indicator-label-group" />
                 </g>
               </g>
             </g>
diff --git a/__tests__/integration/snapshots/LayoutContinuous2.svg b/__tests__/integration/snapshots/LayoutContinuous2.svg
index 2d4a9a2c3..72273666d 100644
--- a/__tests__/integration/snapshots/LayoutContinuous2.svg
+++ b/__tests__/integration/snapshots/LayoutContinuous2.svg
@@ -29,16 +29,10 @@
       <use href="#g-svg-35" transform="matrix(1,0,0,1,14.900000,225)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-49"
             fill="none"
@@ -48,13 +42,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-50"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-50" fill="none" width="500" height="500">
           <g
             id="g-svg-51"
             fill="none"
@@ -67,34 +55,18 @@
               fill="none"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-content-group"
-            >
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon-group"
-              >
+            <g id="g-svg-2" fill="none" class="legend-content-group">
+              <g id="g-svg-4" fill="none" class="legend-ribbon-group">
                 <g
                   id="g-svg-30"
                   fill="none"
                   transform="matrix(1,0,0,1,14.900000,0)"
                   class="legend-ribbon"
                 >
-                  <g
-                    id="g-svg-31"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-background-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-31" fill="none" class="ribbon-background-group">
+                    <g>
                       <path
                         id="g-svg-32"
                         fill="rgba(255,192,203,1)"
@@ -103,23 +75,15 @@
                       />
                     </g>
                   </g>
-                  <g
-                    id="g-svg-33"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-ribbon-group"
-                  >
-                    <g
-                      transform="matrix(1,0,0,1,0,0)"
-                      clip-path="url(#clip-path-35-34)"
-                    >
+                  <g id="g-svg-33" fill="none" class="ribbon-ribbon-group">
+                    <g clip-path="url(#clip-path-35-34)">
                       <path
                         id="g-svg-34"
                         fill="url(#g-pattern-0)"
                         class="ribbon-ribbon"
                         d="M 0,50 L 0,0 L 270.2,0 L 270.2,50 Z"
                       />
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-35"
                           fill="none"
@@ -131,68 +95,58 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label-group"
-              />
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-handles-group"
-              >
+              <g id="g-svg-3" fill="none" class="legend-label-group" />
+              <g id="g-svg-5" fill="none" class="legend-handles-group">
                 <g
                   id="g-svg-6"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,14.900000,25)"
                   class="legend-handle legend-start-handle"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-7" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-41"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-42"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-43"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -201,13 +155,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-12"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-12" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-13"
                         fill="rgba(197,197,197,1)"
@@ -218,6 +167,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         0
                       </text>
@@ -227,53 +178,53 @@
                 <g
                   id="g-svg-14"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,285.100006,25)"
                   class="legend-handle legend-end-handle"
                 >
-                  <g
-                    id="g-svg-15"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-15" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-44"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-45"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-46"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-47"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -282,13 +233,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-20"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-20" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-21"
                         fill="rgba(197,197,197,1)"
@@ -299,6 +245,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         1000
                       </text>
@@ -306,18 +254,9 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-36"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-indicator"
-              >
-                <g
-                  id="g-svg-37"
-                  fill="none"
-                  transform="matrix(1,0,0,1,10.928204,0)"
-                >
-                  <g transform="matrix(1,0,0,1,-10.928204,-5)">
+              <g id="g-svg-36" fill="none" class="legend-indicator">
+                <g id="g-svg-37" fill="none">
+                  <g>
                     <path
                       id="g-svg-39"
                       fill="rgba(38,38,38,1)"
@@ -325,16 +264,11 @@
                       stroke-linecap="round"
                       stroke-width="1"
                       stroke="rgba(51,51,51,1)"
-                      d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                      d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                       visibility="hidden"
                     />
                   </g>
-                  <g
-                    id="g-svg-38"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="indicator-label-group"
-                  />
+                  <g id="g-svg-38" fill="none" class="indicator-label-group" />
                 </g>
               </g>
             </g>
diff --git a/__tests__/integration/snapshots/LayoutContinuous3.svg b/__tests__/integration/snapshots/LayoutContinuous3.svg
index 6beb5afa1..69aae2c2b 100644
--- a/__tests__/integration/snapshots/LayoutContinuous3.svg
+++ b/__tests__/integration/snapshots/LayoutContinuous3.svg
@@ -29,16 +29,10 @@
       <use href="#g-svg-35" transform="matrix(1,0,0,1,14.900000,450)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-49"
             fill="none"
@@ -48,13 +42,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-50"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-50" fill="none" width="500" height="500">
           <g
             id="g-svg-51"
             fill="none"
@@ -67,34 +55,18 @@
               fill="none"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-content-group"
-            >
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon-group"
-              >
+            <g id="g-svg-2" fill="none" class="legend-content-group">
+              <g id="g-svg-4" fill="none" class="legend-ribbon-group">
                 <g
                   id="g-svg-30"
                   fill="none"
                   transform="matrix(1,0,0,1,14.900000,0)"
                   class="legend-ribbon"
                 >
-                  <g
-                    id="g-svg-31"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-background-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-31" fill="none" class="ribbon-background-group">
+                    <g>
                       <path
                         id="g-svg-32"
                         fill="rgba(255,192,203,1)"
@@ -103,23 +75,15 @@
                       />
                     </g>
                   </g>
-                  <g
-                    id="g-svg-33"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-ribbon-group"
-                  >
-                    <g
-                      transform="matrix(1,0,0,1,0,0)"
-                      clip-path="url(#clip-path-35-34)"
-                    >
+                  <g id="g-svg-33" fill="none" class="ribbon-ribbon-group">
+                    <g clip-path="url(#clip-path-35-34)">
                       <path
                         id="g-svg-34"
                         fill="url(#g-pattern-0)"
                         class="ribbon-ribbon"
                         d="M 0,50 L 0,0 L 270.2,0 L 270.2,50 Z"
                       />
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-35"
                           fill="none"
@@ -131,68 +95,58 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label-group"
-              />
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-handles-group"
-              >
+              <g id="g-svg-3" fill="none" class="legend-label-group" />
+              <g id="g-svg-5" fill="none" class="legend-handles-group">
                 <g
                   id="g-svg-6"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,14.900000,25)"
                   class="legend-handle legend-start-handle"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-7" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-41"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-42"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-43"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -201,13 +155,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-12"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-12" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-13"
                         fill="rgba(197,197,197,1)"
@@ -218,6 +167,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         0
                       </text>
@@ -227,53 +178,53 @@
                 <g
                   id="g-svg-14"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,285.100006,25)"
                   class="legend-handle legend-end-handle"
                 >
-                  <g
-                    id="g-svg-15"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-15" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-44"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-45"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-46"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-47"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -282,13 +233,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-20"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-20" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-21"
                         fill="rgba(197,197,197,1)"
@@ -299,6 +245,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         1000
                       </text>
@@ -306,18 +254,9 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-36"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-indicator"
-              >
-                <g
-                  id="g-svg-37"
-                  fill="none"
-                  transform="matrix(1,0,0,1,10.928204,0)"
-                >
-                  <g transform="matrix(1,0,0,1,-10.928204,-5)">
+              <g id="g-svg-36" fill="none" class="legend-indicator">
+                <g id="g-svg-37" fill="none">
+                  <g>
                     <path
                       id="g-svg-39"
                       fill="rgba(38,38,38,1)"
@@ -325,16 +264,11 @@
                       stroke-linecap="round"
                       stroke-width="1"
                       stroke="rgba(51,51,51,1)"
-                      d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                      d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                       visibility="hidden"
                     />
                   </g>
-                  <g
-                    id="g-svg-38"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="indicator-label-group"
-                  />
+                  <g id="g-svg-38" fill="none" class="indicator-label-group" />
                 </g>
               </g>
             </g>
diff --git a/__tests__/integration/snapshots/LayoutContinuous4.svg b/__tests__/integration/snapshots/LayoutContinuous4.svg
index 01571507b..aaa143ccd 100644
--- a/__tests__/integration/snapshots/LayoutContinuous4.svg
+++ b/__tests__/integration/snapshots/LayoutContinuous4.svg
@@ -29,16 +29,10 @@
       <use href="#g-svg-35" transform="matrix(1,0,0,1,114.900000,0)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-49"
             fill="none"
@@ -48,13 +42,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-50"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-50" fill="none" width="500" height="500">
           <g
             id="g-svg-51"
             fill="none"
@@ -67,34 +55,18 @@
               fill="none"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-content-group"
-            >
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon-group"
-              >
+            <g id="g-svg-2" fill="none" class="legend-content-group">
+              <g id="g-svg-4" fill="none" class="legend-ribbon-group">
                 <g
                   id="g-svg-30"
                   fill="none"
                   transform="matrix(1,0,0,1,14.900000,0)"
                   class="legend-ribbon"
                 >
-                  <g
-                    id="g-svg-31"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-background-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-31" fill="none" class="ribbon-background-group">
+                    <g>
                       <path
                         id="g-svg-32"
                         fill="rgba(255,192,203,1)"
@@ -103,23 +75,15 @@
                       />
                     </g>
                   </g>
-                  <g
-                    id="g-svg-33"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-ribbon-group"
-                  >
-                    <g
-                      transform="matrix(1,0,0,1,0,0)"
-                      clip-path="url(#clip-path-35-34)"
-                    >
+                  <g id="g-svg-33" fill="none" class="ribbon-ribbon-group">
+                    <g clip-path="url(#clip-path-35-34)">
                       <path
                         id="g-svg-34"
                         fill="url(#g-pattern-0)"
                         class="ribbon-ribbon"
                         d="M 0,50 L 0,0 L 270.2,0 L 270.2,50 Z"
                       />
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-35"
                           fill="none"
@@ -131,68 +95,58 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label-group"
-              />
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-handles-group"
-              >
+              <g id="g-svg-3" fill="none" class="legend-label-group" />
+              <g id="g-svg-5" fill="none" class="legend-handles-group">
                 <g
                   id="g-svg-6"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,14.900000,25)"
                   class="legend-handle legend-start-handle"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-7" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-41"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-42"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-43"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -201,13 +155,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-12"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-12" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-13"
                         fill="rgba(197,197,197,1)"
@@ -218,6 +167,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         0
                       </text>
@@ -227,53 +178,53 @@
                 <g
                   id="g-svg-14"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,285.100006,25)"
                   class="legend-handle legend-end-handle"
                 >
-                  <g
-                    id="g-svg-15"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-15" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-44"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-45"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-46"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-47"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -282,13 +233,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-20"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-20" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-21"
                         fill="rgba(197,197,197,1)"
@@ -299,6 +245,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         1000
                       </text>
@@ -306,18 +254,9 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-36"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-indicator"
-              >
-                <g
-                  id="g-svg-37"
-                  fill="none"
-                  transform="matrix(1,0,0,1,10.928204,0)"
-                >
-                  <g transform="matrix(1,0,0,1,-10.928204,-5)">
+              <g id="g-svg-36" fill="none" class="legend-indicator">
+                <g id="g-svg-37" fill="none">
+                  <g>
                     <path
                       id="g-svg-39"
                       fill="rgba(38,38,38,1)"
@@ -325,16 +264,11 @@
                       stroke-linecap="round"
                       stroke-width="1"
                       stroke="rgba(51,51,51,1)"
-                      d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                      d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                       visibility="hidden"
                     />
                   </g>
-                  <g
-                    id="g-svg-38"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="indicator-label-group"
-                  />
+                  <g id="g-svg-38" fill="none" class="indicator-label-group" />
                 </g>
               </g>
             </g>
diff --git a/__tests__/integration/snapshots/LayoutContinuous5.svg b/__tests__/integration/snapshots/LayoutContinuous5.svg
index 4fff314b5..7e22ac1af 100644
--- a/__tests__/integration/snapshots/LayoutContinuous5.svg
+++ b/__tests__/integration/snapshots/LayoutContinuous5.svg
@@ -29,16 +29,10 @@
       <use href="#g-svg-35" transform="matrix(1,0,0,1,114.900000,225)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-49"
             fill="none"
@@ -48,13 +42,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-50"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-50" fill="none" width="500" height="500">
           <g
             id="g-svg-51"
             fill="none"
@@ -67,34 +55,18 @@
               fill="none"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-content-group"
-            >
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon-group"
-              >
+            <g id="g-svg-2" fill="none" class="legend-content-group">
+              <g id="g-svg-4" fill="none" class="legend-ribbon-group">
                 <g
                   id="g-svg-30"
                   fill="none"
                   transform="matrix(1,0,0,1,14.900000,0)"
                   class="legend-ribbon"
                 >
-                  <g
-                    id="g-svg-31"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-background-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-31" fill="none" class="ribbon-background-group">
+                    <g>
                       <path
                         id="g-svg-32"
                         fill="rgba(255,192,203,1)"
@@ -103,23 +75,15 @@
                       />
                     </g>
                   </g>
-                  <g
-                    id="g-svg-33"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-ribbon-group"
-                  >
-                    <g
-                      transform="matrix(1,0,0,1,0,0)"
-                      clip-path="url(#clip-path-35-34)"
-                    >
+                  <g id="g-svg-33" fill="none" class="ribbon-ribbon-group">
+                    <g clip-path="url(#clip-path-35-34)">
                       <path
                         id="g-svg-34"
                         fill="url(#g-pattern-0)"
                         class="ribbon-ribbon"
                         d="M 0,50 L 0,0 L 270.2,0 L 270.2,50 Z"
                       />
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-35"
                           fill="none"
@@ -131,68 +95,58 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label-group"
-              />
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-handles-group"
-              >
+              <g id="g-svg-3" fill="none" class="legend-label-group" />
+              <g id="g-svg-5" fill="none" class="legend-handles-group">
                 <g
                   id="g-svg-6"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,14.900000,25)"
                   class="legend-handle legend-start-handle"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-7" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-41"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-42"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-43"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -201,13 +155,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-12"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-12" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-13"
                         fill="rgba(197,197,197,1)"
@@ -218,6 +167,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         0
                       </text>
@@ -227,53 +178,53 @@
                 <g
                   id="g-svg-14"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,285.100006,25)"
                   class="legend-handle legend-end-handle"
                 >
-                  <g
-                    id="g-svg-15"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-15" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-44"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-45"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-46"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-47"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -282,13 +233,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-20"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-20" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-21"
                         fill="rgba(197,197,197,1)"
@@ -299,6 +245,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         1000
                       </text>
@@ -306,18 +254,9 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-36"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-indicator"
-              >
-                <g
-                  id="g-svg-37"
-                  fill="none"
-                  transform="matrix(1,0,0,1,10.928204,0)"
-                >
-                  <g transform="matrix(1,0,0,1,-10.928204,-5)">
+              <g id="g-svg-36" fill="none" class="legend-indicator">
+                <g id="g-svg-37" fill="none">
+                  <g>
                     <path
                       id="g-svg-39"
                       fill="rgba(38,38,38,1)"
@@ -325,16 +264,11 @@
                       stroke-linecap="round"
                       stroke-width="1"
                       stroke="rgba(51,51,51,1)"
-                      d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                      d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                       visibility="hidden"
                     />
                   </g>
-                  <g
-                    id="g-svg-38"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="indicator-label-group"
-                  />
+                  <g id="g-svg-38" fill="none" class="indicator-label-group" />
                 </g>
               </g>
             </g>
diff --git a/__tests__/integration/snapshots/LayoutContinuous6.svg b/__tests__/integration/snapshots/LayoutContinuous6.svg
index 74b013f67..1e7c43b74 100644
--- a/__tests__/integration/snapshots/LayoutContinuous6.svg
+++ b/__tests__/integration/snapshots/LayoutContinuous6.svg
@@ -29,16 +29,10 @@
       <use href="#g-svg-35" transform="matrix(1,0,0,1,114.900000,450)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-49"
             fill="none"
@@ -48,13 +42,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-50"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-50" fill="none" width="500" height="500">
           <g
             id="g-svg-51"
             fill="none"
@@ -67,34 +55,18 @@
               fill="none"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-content-group"
-            >
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon-group"
-              >
+            <g id="g-svg-2" fill="none" class="legend-content-group">
+              <g id="g-svg-4" fill="none" class="legend-ribbon-group">
                 <g
                   id="g-svg-30"
                   fill="none"
                   transform="matrix(1,0,0,1,14.900000,0)"
                   class="legend-ribbon"
                 >
-                  <g
-                    id="g-svg-31"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-background-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-31" fill="none" class="ribbon-background-group">
+                    <g>
                       <path
                         id="g-svg-32"
                         fill="rgba(255,192,203,1)"
@@ -103,23 +75,15 @@
                       />
                     </g>
                   </g>
-                  <g
-                    id="g-svg-33"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-ribbon-group"
-                  >
-                    <g
-                      transform="matrix(1,0,0,1,0,0)"
-                      clip-path="url(#clip-path-35-34)"
-                    >
+                  <g id="g-svg-33" fill="none" class="ribbon-ribbon-group">
+                    <g clip-path="url(#clip-path-35-34)">
                       <path
                         id="g-svg-34"
                         fill="url(#g-pattern-0)"
                         class="ribbon-ribbon"
                         d="M 0,50 L 0,0 L 270.2,0 L 270.2,50 Z"
                       />
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-35"
                           fill="none"
@@ -131,68 +95,58 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label-group"
-              />
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-handles-group"
-              >
+              <g id="g-svg-3" fill="none" class="legend-label-group" />
+              <g id="g-svg-5" fill="none" class="legend-handles-group">
                 <g
                   id="g-svg-6"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,14.900000,25)"
                   class="legend-handle legend-start-handle"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-7" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-41"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-42"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-43"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -201,13 +155,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-12"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-12" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-13"
                         fill="rgba(197,197,197,1)"
@@ -218,6 +167,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         0
                       </text>
@@ -227,53 +178,53 @@
                 <g
                   id="g-svg-14"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,285.100006,25)"
                   class="legend-handle legend-end-handle"
                 >
-                  <g
-                    id="g-svg-15"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-15" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-44"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-45"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-46"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-47"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -282,13 +233,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-20"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-20" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-21"
                         fill="rgba(197,197,197,1)"
@@ -299,6 +245,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         1000
                       </text>
@@ -306,18 +254,9 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-36"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-indicator"
-              >
-                <g
-                  id="g-svg-37"
-                  fill="none"
-                  transform="matrix(1,0,0,1,10.928204,0)"
-                >
-                  <g transform="matrix(1,0,0,1,-10.928204,-5)">
+              <g id="g-svg-36" fill="none" class="legend-indicator">
+                <g id="g-svg-37" fill="none">
+                  <g>
                     <path
                       id="g-svg-39"
                       fill="rgba(38,38,38,1)"
@@ -325,16 +264,11 @@
                       stroke-linecap="round"
                       stroke-width="1"
                       stroke="rgba(51,51,51,1)"
-                      d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                      d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                       visibility="hidden"
                     />
                   </g>
-                  <g
-                    id="g-svg-38"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="indicator-label-group"
-                  />
+                  <g id="g-svg-38" fill="none" class="indicator-label-group" />
                 </g>
               </g>
             </g>
diff --git a/__tests__/integration/snapshots/LayoutContinuous7.svg b/__tests__/integration/snapshots/LayoutContinuous7.svg
index db1bda95c..be73bdd0a 100644
--- a/__tests__/integration/snapshots/LayoutContinuous7.svg
+++ b/__tests__/integration/snapshots/LayoutContinuous7.svg
@@ -29,16 +29,10 @@
       <use href="#g-svg-35" transform="matrix(1,0,0,1,214.900000,0)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-49"
             fill="none"
@@ -48,13 +42,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-50"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-50" fill="none" width="500" height="500">
           <g
             id="g-svg-51"
             fill="none"
@@ -67,34 +55,18 @@
               fill="none"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-content-group"
-            >
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon-group"
-              >
+            <g id="g-svg-2" fill="none" class="legend-content-group">
+              <g id="g-svg-4" fill="none" class="legend-ribbon-group">
                 <g
                   id="g-svg-30"
                   fill="none"
                   transform="matrix(1,0,0,1,14.900000,0)"
                   class="legend-ribbon"
                 >
-                  <g
-                    id="g-svg-31"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-background-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-31" fill="none" class="ribbon-background-group">
+                    <g>
                       <path
                         id="g-svg-32"
                         fill="rgba(255,192,203,1)"
@@ -103,23 +75,15 @@
                       />
                     </g>
                   </g>
-                  <g
-                    id="g-svg-33"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-ribbon-group"
-                  >
-                    <g
-                      transform="matrix(1,0,0,1,0,0)"
-                      clip-path="url(#clip-path-35-34)"
-                    >
+                  <g id="g-svg-33" fill="none" class="ribbon-ribbon-group">
+                    <g clip-path="url(#clip-path-35-34)">
                       <path
                         id="g-svg-34"
                         fill="url(#g-pattern-0)"
                         class="ribbon-ribbon"
                         d="M 0,50 L 0,0 L 270.2,0 L 270.2,50 Z"
                       />
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-35"
                           fill="none"
@@ -131,68 +95,58 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label-group"
-              />
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-handles-group"
-              >
+              <g id="g-svg-3" fill="none" class="legend-label-group" />
+              <g id="g-svg-5" fill="none" class="legend-handles-group">
                 <g
                   id="g-svg-6"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,14.900000,25)"
                   class="legend-handle legend-start-handle"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-7" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-41"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-42"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-43"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -201,13 +155,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-12"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-12" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-13"
                         fill="rgba(197,197,197,1)"
@@ -218,6 +167,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         0
                       </text>
@@ -227,53 +178,53 @@
                 <g
                   id="g-svg-14"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,285.100006,25)"
                   class="legend-handle legend-end-handle"
                 >
-                  <g
-                    id="g-svg-15"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-15" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-44"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-45"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-46"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-47"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -282,13 +233,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-20"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-20" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-21"
                         fill="rgba(197,197,197,1)"
@@ -299,6 +245,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         1000
                       </text>
@@ -306,18 +254,9 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-36"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-indicator"
-              >
-                <g
-                  id="g-svg-37"
-                  fill="none"
-                  transform="matrix(1,0,0,1,10.928204,0)"
-                >
-                  <g transform="matrix(1,0,0,1,-10.928204,-5)">
+              <g id="g-svg-36" fill="none" class="legend-indicator">
+                <g id="g-svg-37" fill="none">
+                  <g>
                     <path
                       id="g-svg-39"
                       fill="rgba(38,38,38,1)"
@@ -325,16 +264,11 @@
                       stroke-linecap="round"
                       stroke-width="1"
                       stroke="rgba(51,51,51,1)"
-                      d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                      d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                       visibility="hidden"
                     />
                   </g>
-                  <g
-                    id="g-svg-38"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="indicator-label-group"
-                  />
+                  <g id="g-svg-38" fill="none" class="indicator-label-group" />
                 </g>
               </g>
             </g>
diff --git a/__tests__/integration/snapshots/LayoutContinuous8.svg b/__tests__/integration/snapshots/LayoutContinuous8.svg
index 835cb819d..b8ecac576 100644
--- a/__tests__/integration/snapshots/LayoutContinuous8.svg
+++ b/__tests__/integration/snapshots/LayoutContinuous8.svg
@@ -29,16 +29,10 @@
       <use href="#g-svg-35" transform="matrix(1,0,0,1,214.900000,225)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-49"
             fill="none"
@@ -48,13 +42,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-50"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-50" fill="none" width="500" height="500">
           <g
             id="g-svg-51"
             fill="none"
@@ -67,34 +55,18 @@
               fill="none"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-content-group"
-            >
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon-group"
-              >
+            <g id="g-svg-2" fill="none" class="legend-content-group">
+              <g id="g-svg-4" fill="none" class="legend-ribbon-group">
                 <g
                   id="g-svg-30"
                   fill="none"
                   transform="matrix(1,0,0,1,14.900000,0)"
                   class="legend-ribbon"
                 >
-                  <g
-                    id="g-svg-31"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-background-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-31" fill="none" class="ribbon-background-group">
+                    <g>
                       <path
                         id="g-svg-32"
                         fill="rgba(255,192,203,1)"
@@ -103,23 +75,15 @@
                       />
                     </g>
                   </g>
-                  <g
-                    id="g-svg-33"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-ribbon-group"
-                  >
-                    <g
-                      transform="matrix(1,0,0,1,0,0)"
-                      clip-path="url(#clip-path-35-34)"
-                    >
+                  <g id="g-svg-33" fill="none" class="ribbon-ribbon-group">
+                    <g clip-path="url(#clip-path-35-34)">
                       <path
                         id="g-svg-34"
                         fill="url(#g-pattern-0)"
                         class="ribbon-ribbon"
                         d="M 0,50 L 0,0 L 270.2,0 L 270.2,50 Z"
                       />
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-35"
                           fill="none"
@@ -131,68 +95,58 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label-group"
-              />
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-handles-group"
-              >
+              <g id="g-svg-3" fill="none" class="legend-label-group" />
+              <g id="g-svg-5" fill="none" class="legend-handles-group">
                 <g
                   id="g-svg-6"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,14.900000,25)"
                   class="legend-handle legend-start-handle"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-7" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-41"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-42"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-43"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -201,13 +155,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-12"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-12" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-13"
                         fill="rgba(197,197,197,1)"
@@ -218,6 +167,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         0
                       </text>
@@ -227,53 +178,53 @@
                 <g
                   id="g-svg-14"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,285.100006,25)"
                   class="legend-handle legend-end-handle"
                 >
-                  <g
-                    id="g-svg-15"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-15" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-44"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-45"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-46"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-47"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -282,13 +233,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-20"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-20" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-21"
                         fill="rgba(197,197,197,1)"
@@ -299,6 +245,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         1000
                       </text>
@@ -306,18 +254,9 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-36"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-indicator"
-              >
-                <g
-                  id="g-svg-37"
-                  fill="none"
-                  transform="matrix(1,0,0,1,10.928204,0)"
-                >
-                  <g transform="matrix(1,0,0,1,-10.928204,-5)">
+              <g id="g-svg-36" fill="none" class="legend-indicator">
+                <g id="g-svg-37" fill="none">
+                  <g>
                     <path
                       id="g-svg-39"
                       fill="rgba(38,38,38,1)"
@@ -325,16 +264,11 @@
                       stroke-linecap="round"
                       stroke-width="1"
                       stroke="rgba(51,51,51,1)"
-                      d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                      d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                       visibility="hidden"
                     />
                   </g>
-                  <g
-                    id="g-svg-38"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="indicator-label-group"
-                  />
+                  <g id="g-svg-38" fill="none" class="indicator-label-group" />
                 </g>
               </g>
             </g>
diff --git a/__tests__/integration/snapshots/LayoutContinuous9.svg b/__tests__/integration/snapshots/LayoutContinuous9.svg
index 1836af604..c9f624618 100644
--- a/__tests__/integration/snapshots/LayoutContinuous9.svg
+++ b/__tests__/integration/snapshots/LayoutContinuous9.svg
@@ -29,16 +29,10 @@
       <use href="#g-svg-35" transform="matrix(1,0,0,1,214.900000,450)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-49"
             fill="none"
@@ -48,13 +42,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-50"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-50" fill="none" width="500" height="500">
           <g
             id="g-svg-51"
             fill="none"
@@ -67,34 +55,18 @@
               fill="none"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="legend-title"
             />
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-content-group"
-            >
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-ribbon-group"
-              >
+            <g id="g-svg-2" fill="none" class="legend-content-group">
+              <g id="g-svg-4" fill="none" class="legend-ribbon-group">
                 <g
                   id="g-svg-30"
                   fill="none"
                   transform="matrix(1,0,0,1,14.900000,0)"
                   class="legend-ribbon"
                 >
-                  <g
-                    id="g-svg-31"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-background-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-31" fill="none" class="ribbon-background-group">
+                    <g>
                       <path
                         id="g-svg-32"
                         fill="rgba(255,192,203,1)"
@@ -103,23 +75,15 @@
                       />
                     </g>
                   </g>
-                  <g
-                    id="g-svg-33"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="ribbon-ribbon-group"
-                  >
-                    <g
-                      transform="matrix(1,0,0,1,0,0)"
-                      clip-path="url(#clip-path-35-34)"
-                    >
+                  <g id="g-svg-33" fill="none" class="ribbon-ribbon-group">
+                    <g clip-path="url(#clip-path-35-34)">
                       <path
                         id="g-svg-34"
                         fill="url(#g-pattern-0)"
                         class="ribbon-ribbon"
                         d="M 0,50 L 0,0 L 270.2,0 L 270.2,50 Z"
                       />
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <path
                           id="g-svg-35"
                           fill="none"
@@ -131,68 +95,58 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-label-group"
-              />
-              <g
-                id="g-svg-5"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-handles-group"
-              >
+              <g id="g-svg-3" fill="none" class="legend-label-group" />
+              <g id="g-svg-5" fill="none" class="legend-handles-group">
                 <g
                   id="g-svg-6"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,14.900000,25)"
                   class="legend-handle legend-start-handle"
                 >
-                  <g
-                    id="g-svg-7"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-7" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-40"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-41"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-42"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-43"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -201,13 +155,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-12"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-12" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-13"
                         fill="rgba(197,197,197,1)"
@@ -218,6 +167,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         0
                       </text>
@@ -227,53 +178,53 @@
                 <g
                   id="g-svg-14"
                   fill="none"
+                  x="0"
+                  y="0"
                   transform="matrix(1,0,0,1,285.100006,25)"
                   class="legend-handle legend-end-handle"
                 >
-                  <g
-                    id="g-svg-15"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-icon-group"
-                  >
+                  <g id="g-svg-15" fill="none" class="handle-icon-group">
                     <g
                       id="g-svg-44"
                       fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
+                      x="0"
+                      y="0"
                       class="handle-icon"
                     >
-                      <g transform="matrix(1,0,0,1,-5,-12)">
+                      <g>
                         <path
                           id="g-svg-45"
                           fill="rgba(255,255,255,1)"
                           class="handle-icon-rect"
                           stroke-width="1"
                           stroke="rgba(191,191,191,1)"
-                          d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                          d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                           width="10"
                           height="24"
+                          x="-5"
+                          y="-12"
                         />
-                        <g transform="matrix(1,0,0,1,3.333333,6)">
+                        <g>
                           <line
                             id="g-svg-46"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="-1.666666666666667"
+                            y1="-6"
+                            x2="-1.666666666666667"
+                            y2="6"
                             class="handle-icon-line-1"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,6.666667,6)">
+                        <g>
                           <line
                             id="g-svg-47"
                             fill="rgba(255,255,255,1)"
-                            x1="0"
-                            y1="0"
-                            x2="0"
-                            y2="12"
+                            x1="1.666666666666666"
+                            y1="-6"
+                            x2="1.666666666666666"
+                            y2="6"
                             class="handle-icon-line-2"
                             stroke-width="1"
                             stroke="rgba(191,191,191,1)"
@@ -282,13 +233,8 @@
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-20"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="handle-label-group"
-                  >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-20" fill="none" class="handle-label-group">
+                    <g>
                       <text
                         id="g-svg-21"
                         fill="rgba(197,197,197,1)"
@@ -299,6 +245,8 @@
                         dx="0.5"
                         font-size="12"
                         text-anchor="middle"
+                        x="0"
+                        y="0"
                       >
                         1000
                       </text>
@@ -306,18 +254,9 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-36"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="legend-indicator"
-              >
-                <g
-                  id="g-svg-37"
-                  fill="none"
-                  transform="matrix(1,0,0,1,10.928204,0)"
-                >
-                  <g transform="matrix(1,0,0,1,-10.928204,-5)">
+              <g id="g-svg-36" fill="none" class="legend-indicator">
+                <g id="g-svg-37" fill="none">
+                  <g>
                     <path
                       id="g-svg-39"
                       fill="rgba(38,38,38,1)"
@@ -325,16 +264,11 @@
                       stroke-linecap="round"
                       stroke-width="1"
                       stroke="rgba(51,51,51,1)"
-                      d="M 6.928203230275509,3 L 14.928203230275509,3 A 0 0 0 0 1 14.928203230275509 3 L 14.928203230275509,7 A 0 0 0 0 1 14.928203230275509 7 L 6.928203230275509,7 A 0 0 0 0 1 6.928203230275509 7 L 6.928203230275509,7 L 6.928203230275509,10 L 0,5 L 6.928203230275509,0 L 6.928203230275509,3 A 0 0 0 0 1 6.928203230275509 3 Z"
+                      d="M -4,-2 L 4,-2 A 0 0 0 0 1 4 -2 L 4,2 A 0 0 0 0 1 4 2 L -4,2 A 0 0 0 0 1 -4 2 L -4,2 L -4,5 L -10.928203230275509,0 L -4,-5 L -4,-2 A 0 0 0 0 1 -4 -2 Z"
                       visibility="hidden"
                     />
                   </g>
-                  <g
-                    id="g-svg-38"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="indicator-label-group"
-                  />
+                  <g id="g-svg-38" fill="none" class="indicator-label-group" />
                 </g>
               </g>
             </g>
diff --git a/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexCenter.svg b/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexCenter.svg
index 9955dc7dd..c56f3e0ca 100644
--- a/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexCenter.svg
+++ b/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexCenter.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,0,45)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexEnd.svg b/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexEnd.svg
index 5bfe75522..aa9b2e053 100644
--- a/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexEnd.svg
+++ b/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexEnd.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,0,90)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexStart.svg b/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexStart.svg
index ffce2ef9d..5ef1bb6a2 100644
--- a/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexStart.svg
+++ b/__tests__/integration/snapshots/LayoutFlexAlignItemsFlexStart.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,21 +451,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-55" fill="none" width="100" height="100">
+          <g>
             <path
               id="g-svg-56"
               fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexDirectionColumn.svg b/__tests__/integration/snapshots/LayoutFlexDirectionColumn.svg
index e45ababcb..d391448a8 100644
--- a/__tests__/integration/snapshots/LayoutFlexDirectionColumn.svg
+++ b/__tests__/integration/snapshots/LayoutFlexDirectionColumn.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,21 +451,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-55" fill="none" width="100" height="100">
+          <g>
             <path
               id="g-svg-56"
               fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexDirectionRow.svg b/__tests__/integration/snapshots/LayoutFlexDirectionRow.svg
index 195b5906d..33ea64b3f 100644
--- a/__tests__/integration/snapshots/LayoutFlexDirectionRow.svg
+++ b/__tests__/integration/snapshots/LayoutFlexDirectionRow.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1" fill="none">
+        <g>
           <path
             id="g-svg-2"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-3" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-4" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-4" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,21 +451,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-5"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-5" fill="none" width="100" height="100">
+          <g>
             <path
               id="g-svg-6"
               fill="rgba(255,0,0,1)"
@@ -559,7 +463,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-7"
               fill="rgba(0,128,0,1)"
@@ -568,7 +472,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-8"
               fill="rgba(0,0,255,1)"
@@ -577,7 +481,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-9"
               fill="rgba(255,255,0,1)"
@@ -586,7 +490,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-10"
               fill="rgba(255,192,203,1)"
@@ -595,7 +499,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-11"
               fill="rgba(255,165,0,1)"
@@ -604,7 +508,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-12"
               fill="rgba(128,0,128,1)"
@@ -613,7 +517,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-13"
               fill="rgba(0,255,255,1)"
@@ -622,7 +526,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-14"
               fill="rgba(255,0,255,1)"
@@ -631,7 +535,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-15"
               fill="rgba(165,42,42,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexJustifyContentCenter.svg b/__tests__/integration/snapshots/LayoutFlexJustifyContentCenter.svg
index 9afebbb8f..e054d6d13 100644
--- a/__tests__/integration/snapshots/LayoutFlexJustifyContentCenter.svg
+++ b/__tests__/integration/snapshots/LayoutFlexJustifyContentCenter.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,25,0)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexEnd.svg b/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexEnd.svg
index ab1682bc6..cd8a5841b 100644
--- a/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexEnd.svg
+++ b/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexEnd.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,50,0)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexStart.svg b/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexStart.svg
index ffce2ef9d..5ef1bb6a2 100644
--- a/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexStart.svg
+++ b/__tests__/integration/snapshots/LayoutFlexJustifyContentFlexStart.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,21 +451,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-55" fill="none" width="100" height="100">
+          <g>
             <path
               id="g-svg-56"
               fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexManipulateChildren.svg b/__tests__/integration/snapshots/LayoutFlexManipulateChildren.svg
index c20e01687..62564477f 100644
--- a/__tests__/integration/snapshots/LayoutFlexManipulateChildren.svg
+++ b/__tests__/integration/snapshots/LayoutFlexManipulateChildren.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,0,90)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexNest.svg b/__tests__/integration/snapshots/LayoutFlexNest.svg
index b9d06ff4e..ec751b175 100644
--- a/__tests__/integration/snapshots/LayoutFlexNest.svg
+++ b/__tests__/integration/snapshots/LayoutFlexNest.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-251" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-251" fill="none">
+        <g>
           <path
             id="g-svg-252"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-253" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-253" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-254" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-254" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,27 +451,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-255"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-259"
-            fill="none"
-            width="40"
-            height="40"
-            transform="matrix(1,0,0,1,50,0)"
-          >
+        <g id="g-svg-255" fill="none" width="100" height="100">
+          <g id="g-svg-259" fill="none" width="40" height="40">
             <g transform="matrix(1,0,0,1,15,20)">
               <path
                 id="g-svg-260"
@@ -577,37 +475,40 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,50,0)">
+        <g>
           <path
             id="g-svg-256"
             fill="none"
-            d="M 0,0 l 50,0 l 0,50 l-50 0 z"
+            d="M 50,0 l 50,0 l 0,50 l-50 0 z"
+            x="50"
+            y="0"
             width="50"
             height="50"
             stroke="rgba(255,165,0,1)"
-            stroke-width="2"
           />
         </g>
-        <g transform="matrix(1,0,0,1,55,5)">
+        <g>
           <path
             id="g-svg-257"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 55,5 l 40,0 l 0,40 l-40 0 z"
+            x="55"
+            y="5"
             width="40"
             height="40"
             stroke="rgba(255,0,0,1)"
-            stroke-width="1"
           />
         </g>
-        <g transform="matrix(1,0,0,1,60,10)">
+        <g>
           <path
             id="g-svg-258"
             fill="none"
-            d="M 0,0 l 30,0 l 0,30 l-30 0 z"
+            d="M 60,10 l 30,0 l 0,30 l-30 0 z"
+            x="60"
+            y="10"
             width="30"
             height="30"
             stroke="rgba(0,128,0,1)"
-            stroke-width="1"
           />
         </g>
       </g>
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionBottom.svg b/__tests__/integration/snapshots/LayoutFlexPositionBottom.svg
index b30c3d135..dad430f27 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionBottom.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionBottom.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,45,90)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionBottomLeft.svg b/__tests__/integration/snapshots/LayoutFlexPositionBottomLeft.svg
index 2a4246fc1..9a0386db9 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionBottomLeft.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionBottomLeft.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,0,90)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionBottomRight.svg b/__tests__/integration/snapshots/LayoutFlexPositionBottomRight.svg
index aa8b1517f..9d6273243 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionBottomRight.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionBottomRight.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,90,90)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionCenter.svg b/__tests__/integration/snapshots/LayoutFlexPositionCenter.svg
index 217493008..0c942ef60 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionCenter.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionCenter.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,45,45)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionLeft.svg b/__tests__/integration/snapshots/LayoutFlexPositionLeft.svg
index ce487a2aa..6390bbee0 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionLeft.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionLeft.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,0,45)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionRight.svg b/__tests__/integration/snapshots/LayoutFlexPositionRight.svg
index 5eefe78ba..f317f2ace 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionRight.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionRight.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,90,45)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionTop.svg b/__tests__/integration/snapshots/LayoutFlexPositionTop.svg
index 88a896592..304ab99b1 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionTop.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionTop.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,45,0)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionTopLeft.svg b/__tests__/integration/snapshots/LayoutFlexPositionTopLeft.svg
index cfbc45384..86de32c96 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionTopLeft.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionTopLeft.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,21 +451,10 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-55" fill="none" width="100" height="100">
+          <g>
             <path
               id="g-svg-56"
               fill="rgba(255,0,0,1)"
diff --git a/__tests__/integration/snapshots/LayoutFlexPositionTopRight.svg b/__tests__/integration/snapshots/LayoutFlexPositionTopRight.svg
index e1bff5b9b..46bd51823 100644
--- a/__tests__/integration/snapshots/LayoutFlexPositionTopRight.svg
+++ b/__tests__/integration/snapshots/LayoutFlexPositionTopRight.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="100"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 100,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,20 L 100,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,40 L 100,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,60.00000000000001 L 100,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,31 +74,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 100,0"
+                    d="M 0,80 L 100,80"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-10"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-11"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-10" fill="none" class="axis-main-group">
+            <g id="g-svg-11" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-12"
                   fill="none"
@@ -127,25 +97,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-13"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-13" fill="none" class="axis-tick-group" />
+            <g id="g-svg-14" fill="none" class="axis-label-group">
               <g
                 id="g-svg-15"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-20"
                     fill="rgba(0,0,0,1)"
@@ -168,10 +128,10 @@
               <g
                 id="g-svg-16"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-21"
                     fill="rgba(0,0,0,1)"
@@ -194,10 +154,10 @@
               <g
                 id="g-svg-17"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -220,10 +180,10 @@
               <g
                 id="g-svg-18"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-23"
                     fill="rgba(0,0,0,1)"
@@ -246,10 +206,10 @@
               <g
                 id="g-svg-19"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-24"
                     fill="rgba(0,0,0,1)"
@@ -271,33 +231,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-25"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-25" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-27"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-26" fill="none" class="axis-grid-group">
+            <g id="g-svg-27" fill="none" class="axis-grid">
+              <g id="g-svg-28" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -308,7 +248,7 @@
                     d="M 0,0 L 0,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -316,10 +256,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 20,0 L 20,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -327,10 +267,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 40,0 L 40,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -338,10 +278,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 60.00000000000001,0 L 60.00000000000001,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -349,31 +289,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,100"
+                    d="M 80,0 L 80,100"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-29"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-29" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -387,25 +312,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-45"
                     fill="rgba(0,0,0,1)"
@@ -432,7 +347,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-46"
                     fill="rgba(0,0,0,1)"
@@ -459,7 +374,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-47"
                     fill="rgba(0,0,0,1)"
@@ -486,7 +401,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-48"
                     fill="rgba(0,0,0,1)"
@@ -513,7 +428,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-49"
                     fill="rgba(0,0,0,1)"
@@ -536,20 +451,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-50" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-55"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-55" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,90,0)">
             <path
               id="g-svg-56"
diff --git a/__tests__/integration/snapshots/LayoutFlexUpdateLayout.svg b/__tests__/integration/snapshots/LayoutFlexUpdateLayout.svg
index 0d1bb1c63..7f302bfa4 100644
--- a/__tests__/integration/snapshots/LayoutFlexUpdateLayout.svg
+++ b/__tests__/integration/snapshots/LayoutFlexUpdateLayout.svg
@@ -6,16 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-51"
-        fill="none"
-        width="600"
-        height="300"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none" width="600" height="300">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(255,255,255,1)"
@@ -24,26 +18,11 @@
             height="600"
           />
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-53" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -54,7 +33,7 @@
                     d="M 0,0 L 600,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -62,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,20 L 600,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -73,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,40 L 600,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -84,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,60 L 600,60"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -95,10 +74,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,80 L 600,80"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,100)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -106,10 +85,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,100 L 600,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,120)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -117,10 +96,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,120 L 600,120"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,140)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -128,10 +107,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,140 L 600,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,160)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -139,10 +118,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,160 L 600,160"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,180)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -150,10 +129,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,180 L 600,180"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,200)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -161,10 +140,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,200 L 600,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,220)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -172,10 +151,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,219.99999999999997 L 600,219.99999999999997"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,240)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -183,10 +162,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,240 L 600,240"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,260)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -194,10 +173,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,260 L 600,260"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,280)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -205,10 +184,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,280 L 600,280"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,300)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -216,10 +195,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,300 L 600,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,320)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -227,10 +206,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,320 L 600,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,340)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -238,10 +217,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,340 L 600,340"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,360)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -249,10 +228,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,360 L 600,360"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,380)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -260,10 +239,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,380 L 600,380"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,400)">
+                <g>
                   <path
                     id="g-svg-25"
                     fill="none"
@@ -271,10 +250,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,400 L 600,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,420)">
+                <g>
                   <path
                     id="g-svg-26"
                     fill="none"
@@ -282,10 +261,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,420 L 600,420"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,440)">
+                <g>
                   <path
                     id="g-svg-27"
                     fill="none"
@@ -293,10 +272,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,439.99999999999994 L 600,439.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,460)">
+                <g>
                   <path
                     id="g-svg-28"
                     fill="none"
@@ -304,10 +283,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,459.99999999999994 L 600,459.99999999999994"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,480)">
+                <g>
                   <path
                     id="g-svg-29"
                     fill="none"
@@ -315,10 +294,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,480 L 600,480"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,500)">
+                <g>
                   <path
                     id="g-svg-30"
                     fill="none"
@@ -326,10 +305,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,500 L 600,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,520)">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="none"
@@ -337,10 +316,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,520 L 600,520"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,540)">
+                <g>
                   <path
                     id="g-svg-32"
                     fill="none"
@@ -348,10 +327,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,540 L 600,540"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,560)">
+                <g>
                   <path
                     id="g-svg-33"
                     fill="none"
@@ -359,10 +338,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,560 L 600,560"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,580)">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="none"
@@ -370,31 +349,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 600,0"
+                    d="M 0,580 L 600,580"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-36"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-35" fill="none" class="axis-main-group">
+            <g id="g-svg-36" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-37"
                   fill="none"
@@ -408,25 +372,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-38"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-39"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-38" fill="none" class="axis-tick-group" />
+            <g id="g-svg-39" fill="none" class="axis-label-group">
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -449,10 +403,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -475,10 +429,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-72"
                     fill="rgba(0,0,0,1)"
@@ -501,10 +455,10 @@
               <g
                 id="g-svg-43"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-73"
                     fill="rgba(0,0,0,1)"
@@ -527,10 +481,10 @@
               <g
                 id="g-svg-44"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-74"
                     fill="rgba(0,0,0,1)"
@@ -553,10 +507,10 @@
               <g
                 id="g-svg-45"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,100)"
+                transform="matrix(1,0,0,1,-10,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-75"
                     fill="rgba(0,0,0,1)"
@@ -579,10 +533,10 @@
               <g
                 id="g-svg-46"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,120)"
+                transform="matrix(1,0,0,1,-10,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-76"
                     fill="rgba(0,0,0,1)"
@@ -605,10 +559,10 @@
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,140)"
+                transform="matrix(1,0,0,1,-10,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-77"
                     fill="rgba(0,0,0,1)"
@@ -631,10 +585,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,160)"
+                transform="matrix(1,0,0,1,-10,160)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-78"
                     fill="rgba(0,0,0,1)"
@@ -657,10 +611,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,180)"
+                transform="matrix(1,0,0,1,-10,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-79"
                     fill="rgba(0,0,0,1)"
@@ -683,10 +637,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,200)"
+                transform="matrix(1,0,0,1,-10,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-80"
                     fill="rgba(0,0,0,1)"
@@ -709,10 +663,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,220)"
+                transform="matrix(1,0,0,1,-10,220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-81"
                     fill="rgba(0,0,0,1)"
@@ -735,10 +689,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,240)"
+                transform="matrix(1,0,0,1,-10,240)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-82"
                     fill="rgba(0,0,0,1)"
@@ -761,10 +715,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,260)"
+                transform="matrix(1,0,0,1,-10,260)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-83"
                     fill="rgba(0,0,0,1)"
@@ -787,10 +741,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,280)"
+                transform="matrix(1,0,0,1,-10,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-84"
                     fill="rgba(0,0,0,1)"
@@ -813,10 +767,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,300)"
+                transform="matrix(1,0,0,1,-10,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-85"
                     fill="rgba(0,0,0,1)"
@@ -839,10 +793,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,320)"
+                transform="matrix(1,0,0,1,-10,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-86"
                     fill="rgba(0,0,0,1)"
@@ -865,10 +819,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,340)"
+                transform="matrix(1,0,0,1,-10,340)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-87"
                     fill="rgba(0,0,0,1)"
@@ -891,10 +845,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,360)"
+                transform="matrix(1,0,0,1,-10,360)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-88"
                     fill="rgba(0,0,0,1)"
@@ -917,10 +871,10 @@
               <g
                 id="g-svg-59"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,380)"
+                transform="matrix(1,0,0,1,-10,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-89"
                     fill="rgba(0,0,0,1)"
@@ -943,10 +897,10 @@
               <g
                 id="g-svg-60"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,400)"
+                transform="matrix(1,0,0,1,-10,400)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-90"
                     fill="rgba(0,0,0,1)"
@@ -969,10 +923,10 @@
               <g
                 id="g-svg-61"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,420)"
+                transform="matrix(1,0,0,1,-10,420)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-91"
                     fill="rgba(0,0,0,1)"
@@ -995,10 +949,10 @@
               <g
                 id="g-svg-62"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,440)"
+                transform="matrix(1,0,0,1,-10,440)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-92"
                     fill="rgba(0,0,0,1)"
@@ -1021,10 +975,10 @@
               <g
                 id="g-svg-63"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,460)"
+                transform="matrix(1,0,0,1,-10,460)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-93"
                     fill="rgba(0,0,0,1)"
@@ -1047,10 +1001,10 @@
               <g
                 id="g-svg-64"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,480)"
+                transform="matrix(1,0,0,1,-10,480)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-94"
                     fill="rgba(0,0,0,1)"
@@ -1073,10 +1027,10 @@
               <g
                 id="g-svg-65"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,500)"
+                transform="matrix(1,0,0,1,-10,500)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-95"
                     fill="rgba(0,0,0,1)"
@@ -1099,10 +1053,10 @@
               <g
                 id="g-svg-66"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,520)"
+                transform="matrix(1,0,0,1,-10,520)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-96"
                     fill="rgba(0,0,0,1)"
@@ -1125,10 +1079,10 @@
               <g
                 id="g-svg-67"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,540)"
+                transform="matrix(1,0,0,1,-10,540)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-97"
                     fill="rgba(0,0,0,1)"
@@ -1151,10 +1105,10 @@
               <g
                 id="g-svg-68"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,560)"
+                transform="matrix(1,0,0,1,-10,560)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-98"
                     fill="rgba(0,0,0,1)"
@@ -1177,10 +1131,10 @@
               <g
                 id="g-svg-69"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,580)"
+                transform="matrix(1,0,0,1,-10,580)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-99"
                     fill="rgba(0,0,0,1)"
@@ -1202,33 +1156,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-100"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-100" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-101"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-102"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-103"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-54" fill="none">
+          <g id="g-svg-101" fill="none" class="axis-grid-group">
+            <g id="g-svg-102" fill="none" class="axis-grid">
+              <g id="g-svg-103" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-105"
                     fill="none"
@@ -1239,7 +1173,7 @@
                     d="M 0,0 L 0,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-106"
                     fill="none"
@@ -1247,10 +1181,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 20,0 L 20,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-107"
                     fill="none"
@@ -1258,10 +1192,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 40,0 L 40,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-108"
                     fill="none"
@@ -1269,10 +1203,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 60,0 L 60,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-109"
                     fill="none"
@@ -1280,10 +1214,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 80,0 L 80,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,0)">
+                <g>
                   <path
                     id="g-svg-110"
                     fill="none"
@@ -1291,10 +1225,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 100,0 L 100,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,120,0)">
+                <g>
                   <path
                     id="g-svg-111"
                     fill="none"
@@ -1302,10 +1236,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 120,0 L 120,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,140,0)">
+                <g>
                   <path
                     id="g-svg-112"
                     fill="none"
@@ -1313,10 +1247,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 140,0 L 140,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,160,0)">
+                <g>
                   <path
                     id="g-svg-113"
                     fill="none"
@@ -1324,10 +1258,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 160,0 L 160,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180,0)">
+                <g>
                   <path
                     id="g-svg-114"
                     fill="none"
@@ -1335,10 +1269,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 180,0 L 180,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,0)">
+                <g>
                   <path
                     id="g-svg-115"
                     fill="none"
@@ -1346,10 +1280,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 200,0 L 200,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,0)">
+                <g>
                   <path
                     id="g-svg-116"
                     fill="none"
@@ -1357,10 +1291,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 219.99999999999997,0 L 219.99999999999997,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,240,0)">
+                <g>
                   <path
                     id="g-svg-117"
                     fill="none"
@@ -1368,10 +1302,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 240,0 L 240,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,0)">
+                <g>
                   <path
                     id="g-svg-118"
                     fill="none"
@@ -1379,10 +1313,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 260,0 L 260,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,280,0)">
+                <g>
                   <path
                     id="g-svg-119"
                     fill="none"
@@ -1390,10 +1324,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 280,0 L 280,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,0)">
+                <g>
                   <path
                     id="g-svg-120"
                     fill="none"
@@ -1401,10 +1335,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 300,0 L 300,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,0)">
+                <g>
                   <path
                     id="g-svg-121"
                     fill="none"
@@ -1412,10 +1346,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 320,0 L 320,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,340,0)">
+                <g>
                   <path
                     id="g-svg-122"
                     fill="none"
@@ -1423,10 +1357,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 340,0 L 340,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,360,0)">
+                <g>
                   <path
                     id="g-svg-123"
                     fill="none"
@@ -1434,10 +1368,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 360,0 L 360,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,0)">
+                <g>
                   <path
                     id="g-svg-124"
                     fill="none"
@@ -1445,10 +1379,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 380,0 L 380,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,0)">
+                <g>
                   <path
                     id="g-svg-125"
                     fill="none"
@@ -1456,10 +1390,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 400,0 L 400,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,420,0)">
+                <g>
                   <path
                     id="g-svg-126"
                     fill="none"
@@ -1467,10 +1401,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 420,0 L 420,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,440,0)">
+                <g>
                   <path
                     id="g-svg-127"
                     fill="none"
@@ -1478,10 +1412,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 439.99999999999994,0 L 439.99999999999994,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,460,0)">
+                <g>
                   <path
                     id="g-svg-128"
                     fill="none"
@@ -1489,10 +1423,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 459.99999999999994,0 L 459.99999999999994,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,480,0)">
+                <g>
                   <path
                     id="g-svg-129"
                     fill="none"
@@ -1500,10 +1434,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 480,0 L 480,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,500,0)">
+                <g>
                   <path
                     id="g-svg-130"
                     fill="none"
@@ -1511,10 +1445,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 500,0 L 500,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,520,0)">
+                <g>
                   <path
                     id="g-svg-131"
                     fill="none"
@@ -1522,10 +1456,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 520,0 L 520,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,540,0)">
+                <g>
                   <path
                     id="g-svg-132"
                     fill="none"
@@ -1533,10 +1467,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 540,0 L 540,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,560,0)">
+                <g>
                   <path
                     id="g-svg-133"
                     fill="none"
@@ -1544,10 +1478,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 560,0 L 560,600"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,580,0)">
+                <g>
                   <path
                     id="g-svg-134"
                     fill="none"
@@ -1555,31 +1489,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,600"
+                    d="M 580,0 L 580,600"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-104"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-104" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-135"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-136"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-135" fill="none" class="axis-main-group">
+            <g id="g-svg-136" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-137"
                   fill="none"
@@ -1593,25 +1512,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-138"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-139"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-138" fill="none" class="axis-tick-group" />
+            <g id="g-svg-139" fill="none" class="axis-label-group">
               <g
                 id="g-svg-140"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-170"
                     fill="rgba(0,0,0,1)"
@@ -1638,7 +1547,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-171"
                     fill="rgba(0,0,0,1)"
@@ -1665,7 +1574,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-172"
                     fill="rgba(0,0,0,1)"
@@ -1692,7 +1601,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-173"
                     fill="rgba(0,0,0,1)"
@@ -1719,7 +1628,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-174"
                     fill="rgba(0,0,0,1)"
@@ -1746,7 +1655,7 @@
                 transform="matrix(1,0,0,1,100,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-175"
                     fill="rgba(0,0,0,1)"
@@ -1773,7 +1682,7 @@
                 transform="matrix(1,0,0,1,120,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-176"
                     fill="rgba(0,0,0,1)"
@@ -1800,7 +1709,7 @@
                 transform="matrix(1,0,0,1,140,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-177"
                     fill="rgba(0,0,0,1)"
@@ -1827,7 +1736,7 @@
                 transform="matrix(1,0,0,1,160,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-178"
                     fill="rgba(0,0,0,1)"
@@ -1854,7 +1763,7 @@
                 transform="matrix(1,0,0,1,180,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-179"
                     fill="rgba(0,0,0,1)"
@@ -1881,7 +1790,7 @@
                 transform="matrix(1,0,0,1,200,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-180"
                     fill="rgba(0,0,0,1)"
@@ -1908,7 +1817,7 @@
                 transform="matrix(1,0,0,1,220,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-181"
                     fill="rgba(0,0,0,1)"
@@ -1935,7 +1844,7 @@
                 transform="matrix(1,0,0,1,240,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-182"
                     fill="rgba(0,0,0,1)"
@@ -1962,7 +1871,7 @@
                 transform="matrix(1,0,0,1,260,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-183"
                     fill="rgba(0,0,0,1)"
@@ -1989,7 +1898,7 @@
                 transform="matrix(1,0,0,1,280,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-184"
                     fill="rgba(0,0,0,1)"
@@ -2016,7 +1925,7 @@
                 transform="matrix(1,0,0,1,300,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-185"
                     fill="rgba(0,0,0,1)"
@@ -2043,7 +1952,7 @@
                 transform="matrix(1,0,0,1,320,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-186"
                     fill="rgba(0,0,0,1)"
@@ -2070,7 +1979,7 @@
                 transform="matrix(1,0,0,1,340,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-187"
                     fill="rgba(0,0,0,1)"
@@ -2097,7 +2006,7 @@
                 transform="matrix(1,0,0,1,360,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-188"
                     fill="rgba(0,0,0,1)"
@@ -2124,7 +2033,7 @@
                 transform="matrix(1,0,0,1,380,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-189"
                     fill="rgba(0,0,0,1)"
@@ -2151,7 +2060,7 @@
                 transform="matrix(1,0,0,1,400,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-190"
                     fill="rgba(0,0,0,1)"
@@ -2178,7 +2087,7 @@
                 transform="matrix(1,0,0,1,420,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-191"
                     fill="rgba(0,0,0,1)"
@@ -2205,7 +2114,7 @@
                 transform="matrix(1,0,0,1,440,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-192"
                     fill="rgba(0,0,0,1)"
@@ -2232,7 +2141,7 @@
                 transform="matrix(1,0,0,1,460,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-193"
                     fill="rgba(0,0,0,1)"
@@ -2259,7 +2168,7 @@
                 transform="matrix(1,0,0,1,480,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-194"
                     fill="rgba(0,0,0,1)"
@@ -2286,7 +2195,7 @@
                 transform="matrix(1,0,0,1,500,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-195"
                     fill="rgba(0,0,0,1)"
@@ -2313,7 +2222,7 @@
                 transform="matrix(1,0,0,1,520,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-196"
                     fill="rgba(0,0,0,1)"
@@ -2340,7 +2249,7 @@
                 transform="matrix(1,0,0,1,540,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-197"
                     fill="rgba(0,0,0,1)"
@@ -2367,7 +2276,7 @@
                 transform="matrix(1,0,0,1,560,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-198"
                     fill="rgba(0,0,0,1)"
@@ -2394,7 +2303,7 @@
                 transform="matrix(1,0,0,1,580,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-199"
                     fill="rgba(0,0,0,1)"
@@ -2417,32 +2326,22 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-200"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-200" fill="none" class="axis-title-group" />
         </g>
-        <g transform="matrix(1,0,0,1,0,0)">
+        <g>
           <path
             id="g-svg-55"
             fill="none"
             d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            x="0"
+            y="0"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-56"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-56" fill="none" x="0" y="0" width="100" height="100">
+          <g>
             <path
               id="g-svg-58"
               fill="rgba(255,0,0,1)"
@@ -2451,7 +2350,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-59"
               fill="rgba(0,128,0,1)"
@@ -2460,7 +2359,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-60"
               fill="rgba(0,0,255,1)"
@@ -2470,12 +2369,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,50,50)">
+        <g>
           <text
             id="g-svg-57"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="50"
+            y="50"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -2484,36 +2385,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="50" dx="0.5" dy="-19">
               column
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="50" dx="0.5" dy="19">
               flex-start
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="50" dx="0.5" dy="19">
               flex-start
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,100,0)">
+        <g>
           <path
             id="g-svg-61"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 100,0 l 100,0 l 0,100 l-100 0 z"
+            x="100"
+            y="0"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-62"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,100,0)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-62" fill="none" x="100" y="0" width="100" height="100">
+          <g>
             <path
               id="g-svg-64"
               fill="rgba(255,0,0,1)"
@@ -2522,7 +2418,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-65"
               fill="rgba(0,128,0,1)"
@@ -2531,7 +2427,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-66"
               fill="rgba(0,0,255,1)"
@@ -2541,12 +2437,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,150,50)">
+        <g>
           <text
             id="g-svg-63"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="150"
+            y="50"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -2555,36 +2453,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="150" dx="0.5" dy="-19">
               column
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="150" dx="0.5" dy="19">
               flex-start
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="150" dx="0.5" dy="19">
               center
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,200,0)">
+        <g>
           <path
             id="g-svg-67"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 200,0 l 100,0 l 0,100 l-100 0 z"
+            x="200"
+            y="0"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-68"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,200,0)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-68" fill="none" x="200" y="0" width="100" height="100">
+          <g>
             <path
               id="g-svg-70"
               fill="rgba(255,0,0,1)"
@@ -2593,7 +2486,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-71"
               fill="rgba(0,128,0,1)"
@@ -2602,7 +2495,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-72"
               fill="rgba(0,0,255,1)"
@@ -2612,12 +2505,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,250,50)">
+        <g>
           <text
             id="g-svg-69"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="250"
+            y="50"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -2626,36 +2521,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="250" dx="0.5" dy="-19">
               column
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="250" dx="0.5" dy="19">
               flex-start
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="250" dx="0.5" dy="19">
               flex-end
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,300,0)">
+        <g>
           <path
             id="g-svg-73"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 300,0 l 100,0 l 0,100 l-100 0 z"
+            x="300"
+            y="0"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-74"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,300,0)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-74" fill="none" x="300" y="0" width="100" height="100">
+          <g>
             <path
               id="g-svg-76"
               fill="rgba(255,0,0,1)"
@@ -2664,7 +2554,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-77"
               fill="rgba(0,128,0,1)"
@@ -2673,7 +2563,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-78"
               fill="rgba(0,0,255,1)"
@@ -2683,12 +2573,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,350,50)">
+        <g>
           <text
             id="g-svg-75"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="350"
+            y="50"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -2697,36 +2589,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="350" dx="0.5" dy="-19">
               column
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="350" dx="0.5" dy="19">
               center
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="350" dx="0.5" dy="19">
               flex-start
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,400,0)">
+        <g>
           <path
             id="g-svg-79"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 400,0 l 100,0 l 0,100 l-100 0 z"
+            x="400"
+            y="0"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-80"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,400,0)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-80" fill="none" x="400" y="0" width="100" height="100">
+          <g>
             <path
               id="g-svg-82"
               fill="rgba(255,0,0,1)"
@@ -2735,7 +2622,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-83"
               fill="rgba(0,128,0,1)"
@@ -2744,7 +2631,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-84"
               fill="rgba(0,0,255,1)"
@@ -2754,12 +2641,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,450,50)">
+        <g>
           <text
             id="g-svg-81"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="450"
+            y="50"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -2768,36 +2657,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="450" dx="0.5" dy="-19">
               column
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="450" dx="0.5" dy="19">
               center
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="450" dx="0.5" dy="19">
               center
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,500,0)">
+        <g>
           <path
             id="g-svg-85"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 500,0 l 100,0 l 0,100 l-100 0 z"
+            x="500"
+            y="0"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-86"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,500,0)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-86" fill="none" x="500" y="0" width="100" height="100">
+          <g>
             <path
               id="g-svg-88"
               fill="rgba(255,0,0,1)"
@@ -2806,7 +2690,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-89"
               fill="rgba(0,128,0,1)"
@@ -2815,7 +2699,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-90"
               fill="rgba(0,0,255,1)"
@@ -2825,12 +2709,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,550,50)">
+        <g>
           <text
             id="g-svg-87"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="550"
+            y="50"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -2839,36 +2725,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="550" dx="0.5" dy="-19">
               column
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="550" dx="0.5" dy="19">
               center
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="550" dx="0.5" dy="19">
               flex-end
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,0,100)">
+        <g>
           <path
             id="g-svg-91"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 0,100 l 100,0 l 0,100 l-100 0 z"
+            x="0"
+            y="100"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-92"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,100)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-92" fill="none" x="0" y="100" width="100" height="100">
+          <g>
             <path
               id="g-svg-94"
               fill="rgba(255,0,0,1)"
@@ -2877,7 +2758,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-95"
               fill="rgba(0,128,0,1)"
@@ -2886,7 +2767,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-96"
               fill="rgba(0,0,255,1)"
@@ -2896,12 +2777,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,50,150)">
+        <g>
           <text
             id="g-svg-93"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="50"
+            y="150"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -2910,36 +2793,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="50" dx="0.5" dy="-19">
               column
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="50" dx="0.5" dy="19">
               flex-end
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="50" dx="0.5" dy="19">
               flex-start
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,100,100)">
+        <g>
           <path
             id="g-svg-97"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 100,100 l 100,0 l 0,100 l-100 0 z"
+            x="100"
+            y="100"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-98"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,100,100)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-98" fill="none" x="100" y="100" width="100" height="100">
+          <g>
             <path
               id="g-svg-100"
               fill="rgba(255,0,0,1)"
@@ -2948,7 +2826,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-101"
               fill="rgba(0,128,0,1)"
@@ -2957,7 +2835,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-102"
               fill="rgba(0,0,255,1)"
@@ -2967,12 +2845,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,150,150)">
+        <g>
           <text
             id="g-svg-99"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="150"
+            y="150"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -2981,36 +2861,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="150" dx="0.5" dy="-19">
               column
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="150" dx="0.5" dy="19">
               flex-end
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="150" dx="0.5" dy="19">
               center
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,200,100)">
+        <g>
           <path
             id="g-svg-103"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 200,100 l 100,0 l 0,100 l-100 0 z"
+            x="200"
+            y="100"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-104"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,200,100)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-104" fill="none" x="200" y="100" width="100" height="100">
+          <g>
             <path
               id="g-svg-106"
               fill="rgba(255,0,0,1)"
@@ -3019,7 +2894,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-107"
               fill="rgba(0,128,0,1)"
@@ -3028,7 +2903,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-108"
               fill="rgba(0,0,255,1)"
@@ -3038,12 +2913,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,250,150)">
+        <g>
           <text
             id="g-svg-105"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="250"
+            y="150"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -3052,36 +2929,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="250" dx="0.5" dy="-19">
               column
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="250" dx="0.5" dy="19">
               flex-end
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="250" dx="0.5" dy="19">
               flex-end
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,300,100)">
+        <g>
           <path
             id="g-svg-109"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 300,100 l 100,0 l 0,100 l-100 0 z"
+            x="300"
+            y="100"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-110"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,300,100)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-110" fill="none" x="300" y="100" width="100" height="100">
+          <g>
             <path
               id="g-svg-112"
               fill="rgba(255,0,0,1)"
@@ -3090,7 +2962,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-113"
               fill="rgba(0,128,0,1)"
@@ -3099,7 +2971,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-114"
               fill="rgba(0,0,255,1)"
@@ -3109,12 +2981,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,350,150)">
+        <g>
           <text
             id="g-svg-111"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="350"
+            y="150"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -3123,36 +2997,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="350" dx="0.5" dy="-19">
               row
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="350" dx="0.5" dy="19">
               flex-start
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="350" dx="0.5" dy="19">
               flex-start
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,400,100)">
+        <g>
           <path
             id="g-svg-115"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 400,100 l 100,0 l 0,100 l-100 0 z"
+            x="400"
+            y="100"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-116"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,400,100)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-116" fill="none" x="400" y="100" width="100" height="100">
+          <g>
             <path
               id="g-svg-118"
               fill="rgba(255,0,0,1)"
@@ -3161,7 +3030,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-119"
               fill="rgba(0,128,0,1)"
@@ -3170,7 +3039,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-120"
               fill="rgba(0,0,255,1)"
@@ -3180,12 +3049,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,450,150)">
+        <g>
           <text
             id="g-svg-117"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="450"
+            y="150"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -3194,36 +3065,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="450" dx="0.5" dy="-19">
               row
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="450" dx="0.5" dy="19">
               flex-start
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="450" dx="0.5" dy="19">
               center
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,500,100)">
+        <g>
           <path
             id="g-svg-121"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 500,100 l 100,0 l 0,100 l-100 0 z"
+            x="500"
+            y="100"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-122"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,500,100)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-122" fill="none" x="500" y="100" width="100" height="100">
+          <g>
             <path
               id="g-svg-124"
               fill="rgba(255,0,0,1)"
@@ -3232,7 +3098,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-125"
               fill="rgba(0,128,0,1)"
@@ -3241,7 +3107,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-126"
               fill="rgba(0,0,255,1)"
@@ -3251,12 +3117,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,550,150)">
+        <g>
           <text
             id="g-svg-123"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="550"
+            y="150"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -3265,36 +3133,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="550" dx="0.5" dy="-19">
               row
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="550" dx="0.5" dy="19">
               flex-start
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="550" dx="0.5" dy="19">
               flex-end
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,0,200)">
+        <g>
           <path
             id="g-svg-127"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 0,200 l 100,0 l 0,100 l-100 0 z"
+            x="0"
+            y="200"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-128"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,200)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-128" fill="none" x="0" y="200" width="100" height="100">
+          <g>
             <path
               id="g-svg-130"
               fill="rgba(255,0,0,1)"
@@ -3303,7 +3166,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-131"
               fill="rgba(0,128,0,1)"
@@ -3312,7 +3175,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-132"
               fill="rgba(0,0,255,1)"
@@ -3322,12 +3185,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,50,250)">
+        <g>
           <text
             id="g-svg-129"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="50"
+            y="250"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -3336,36 +3201,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="50" dx="0.5" dy="-19">
               row
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="50" dx="0.5" dy="19">
               center
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="50" dx="0.5" dy="19">
               flex-start
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,100,200)">
+        <g>
           <path
             id="g-svg-133"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 100,200 l 100,0 l 0,100 l-100 0 z"
+            x="100"
+            y="200"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-134"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,100,200)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-134" fill="none" x="100" y="200" width="100" height="100">
+          <g>
             <path
               id="g-svg-136"
               fill="rgba(255,0,0,1)"
@@ -3374,7 +3234,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-137"
               fill="rgba(0,128,0,1)"
@@ -3383,7 +3243,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-138"
               fill="rgba(0,0,255,1)"
@@ -3393,12 +3253,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,150,250)">
+        <g>
           <text
             id="g-svg-135"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="150"
+            y="250"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -3407,36 +3269,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="150" dx="0.5" dy="-19">
               row
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="150" dx="0.5" dy="19">
               center
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="150" dx="0.5" dy="19">
               center
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,200,200)">
+        <g>
           <path
             id="g-svg-139"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 200,200 l 100,0 l 0,100 l-100 0 z"
+            x="200"
+            y="200"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-140"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,200,200)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-140" fill="none" x="200" y="200" width="100" height="100">
+          <g>
             <path
               id="g-svg-142"
               fill="rgba(255,0,0,1)"
@@ -3445,7 +3302,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-143"
               fill="rgba(0,128,0,1)"
@@ -3454,7 +3311,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-144"
               fill="rgba(0,0,255,1)"
@@ -3464,12 +3321,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,250,250)">
+        <g>
           <text
             id="g-svg-141"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="250"
+            y="250"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -3478,36 +3337,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="250" dx="0.5" dy="-19">
               row
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="250" dx="0.5" dy="19">
               center
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="250" dx="0.5" dy="19">
               flex-end
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,300,200)">
+        <g>
           <path
             id="g-svg-145"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 300,200 l 100,0 l 0,100 l-100 0 z"
+            x="300"
+            y="200"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-146"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,300,200)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-146" fill="none" x="300" y="200" width="100" height="100">
+          <g>
             <path
               id="g-svg-148"
               fill="rgba(255,0,0,1)"
@@ -3516,7 +3370,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-149"
               fill="rgba(0,128,0,1)"
@@ -3525,7 +3379,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-150"
               fill="rgba(0,0,255,1)"
@@ -3535,12 +3389,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,350,250)">
+        <g>
           <text
             id="g-svg-147"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="350"
+            y="250"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -3549,36 +3405,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="350" dx="0.5" dy="-19">
               row
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="350" dx="0.5" dy="19">
               flex-end
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="350" dx="0.5" dy="19">
               flex-start
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,400,200)">
+        <g>
           <path
             id="g-svg-151"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 400,200 l 100,0 l 0,100 l-100 0 z"
+            x="400"
+            y="200"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-152"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,400,200)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-152" fill="none" x="400" y="200" width="100" height="100">
+          <g>
             <path
               id="g-svg-154"
               fill="rgba(255,0,0,1)"
@@ -3587,7 +3438,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-155"
               fill="rgba(0,128,0,1)"
@@ -3596,7 +3447,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-156"
               fill="rgba(0,0,255,1)"
@@ -3606,12 +3457,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,450,250)">
+        <g>
           <text
             id="g-svg-153"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="450"
+            y="250"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -3620,36 +3473,31 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="450" dx="0.5" dy="-19">
               row
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="450" dx="0.5" dy="19">
               flex-end
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="450" dx="0.5" dy="19">
               center
             </tspan>
           </text>
         </g>
-        <g transform="matrix(1,0,0,1,500,200)">
+        <g>
           <path
             id="g-svg-157"
             fill="none"
-            d="M 0,0 l 100,0 l 0,100 l-100 0 z"
+            d="M 500,200 l 100,0 l 0,100 l-100 0 z"
+            x="500"
+            y="200"
             width="100"
             height="100"
-            stroke-width="2"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g
-          id="g-svg-158"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,500,200)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-158" fill="none" x="500" y="200" width="100" height="100">
+          <g>
             <path
               id="g-svg-160"
               fill="rgba(255,0,0,1)"
@@ -3658,7 +3506,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-161"
               fill="rgba(0,128,0,1)"
@@ -3667,7 +3515,7 @@
               height="10"
             />
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-162"
               fill="rgba(0,0,255,1)"
@@ -3677,12 +3525,14 @@
             />
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,550,250)">
+        <g>
           <text
             id="g-svg-159"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="550"
+            y="250"
             font-family="sans-serif"
             font-size="10"
             font-style="normal"
@@ -3691,13 +3541,13 @@
             stroke-width="1"
             text-anchor="middle"
           >
-            <tspan x="0" dx="0.5" dy="-19">
+            <tspan x="550" dx="0.5" dy="-19">
               row
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="550" dx="0.5" dy="19">
               flex-end
             </tspan>
-            <tspan x="0" dx="0.5" dy="19">
+            <tspan x="550" dx="0.5" dy="19">
               flex-end
             </tspan>
           </text>
diff --git a/__tests__/integration/snapshots/LayoutLegend1.svg b/__tests__/integration/snapshots/LayoutLegend1.svg
index 04f4abf2c..4b8832504 100644
--- a/__tests__/integration/snapshots/LayoutLegend1.svg
+++ b/__tests__/integration/snapshots/LayoutLegend1.svg
@@ -10,16 +10,10 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,50)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-51"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-52"
             fill="none"
@@ -29,35 +23,17 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-53"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g
-            id="g-svg-54"
-            fill="none"
-            width="400"
-            height="300"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+        <g id="g-svg-53" fill="none" width="500" height="500">
+          <g id="g-svg-54" fill="none" width="400" height="300">
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-3"
                     fill="rgba(44,53,66,1)"
@@ -67,6 +43,8 @@
                     font-weight="bold"
                     font-size="12"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     <tspan x="0" dx="0.5" dy="0">
@@ -90,49 +68,34 @@
                 fill="none"
                 width="400"
                 height="250"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-7"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-81-7)"
                   >
-                    <g
-                      id="g-svg-8"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-66"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-8" fill="none" class="navigator-play-window">
+                      <g id="g-svg-66" fill="none" class="items-item-page">
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="93.8"
                           height="23"
                         >
                           <g
                             id="g-svg-16"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-17"
                                 fill="none"
@@ -147,16 +110,13 @@
                           <g
                             id="g-svg-11"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-12"
                                 fill="rgba(160,174,198,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -166,10 +126,10 @@
                           <g
                             id="g-svg-13"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-14"
                                 fill="rgba(100,100,100,1)"
@@ -193,25 +153,25 @@
                           <g
                             id="g-svg-15"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(1,0,0,1,98.800003,0)"
                           class="items-item"
+                          x="98.8"
+                          y="0"
                           width="87.08"
                           height="23"
+                          transform="matrix(1,0,0,1,98.800003,0)"
                         >
                           <g
                             id="g-svg-24"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-25"
                                 fill="none"
@@ -226,16 +186,13 @@
                           <g
                             id="g-svg-19"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-20"
                                 fill="rgba(144,143,169,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -245,10 +202,10 @@
                           <g
                             id="g-svg-21"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-22"
                                 fill="rgba(100,100,100,1)"
@@ -272,25 +229,25 @@
                           <g
                             id="g-svg-23"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="92.48"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-32"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-33"
                                 fill="none"
@@ -305,16 +262,13 @@
                           <g
                             id="g-svg-27"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-28"
                                 fill="rgba(127,113,140,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -324,10 +278,10 @@
                           <g
                             id="g-svg-29"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-30"
                                 fill="rgba(100,100,100,1)"
@@ -351,25 +305,25 @@
                           <g
                             id="g-svg-31"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.480003,23)"
                           class="items-item"
+                          x="97.48"
+                          y="23"
                           width="94.99999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,97.480003,23)"
                         >
                           <g
                             id="g-svg-40"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-41"
                                 fill="none"
@@ -384,16 +338,13 @@
                           <g
                             id="g-svg-35"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-36"
                                 fill="rgba(110,82,113,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -403,10 +354,10 @@
                           <g
                             id="g-svg-37"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-38"
                                 fill="rgba(100,100,100,1)"
@@ -430,25 +381,25 @@
                           <g
                             id="g-svg-39"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,46)"
                           class="items-item"
+                          x="0"
+                          y="46"
                           width="96.92"
                           height="23"
+                          transform="matrix(1,0,0,1,0,46)"
                         >
                           <g
                             id="g-svg-48"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-49"
                                 fill="none"
@@ -463,16 +414,13 @@
                           <g
                             id="g-svg-43"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-44"
                                 fill="rgba(156,104,97,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -482,10 +430,10 @@
                           <g
                             id="g-svg-45"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-46"
                                 fill="rgba(100,100,100,1)"
@@ -509,25 +457,25 @@
                           <g
                             id="g-svg-47"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(1,0,0,1,101.919998,46)"
                           class="items-item"
+                          x="101.92"
+                          y="46"
                           width="97.27999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,101.919998,46)"
                         >
                           <g
                             id="g-svg-56"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-57"
                                 fill="none"
@@ -542,16 +490,13 @@
                           <g
                             id="g-svg-51"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-52"
                                 fill="rgba(198,127,81,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -561,10 +506,10 @@
                           <g
                             id="g-svg-53"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-54"
                                 fill="rgba(100,100,100,1)"
@@ -588,25 +533,25 @@
                           <g
                             id="g-svg-55"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,69)"
                           class="items-item"
+                          x="0"
+                          y="69"
                           width="118.75999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,0,69)"
                         >
                           <g
                             id="g-svg-64"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-65"
                                 fill="none"
@@ -621,16 +566,13 @@
                           <g
                             id="g-svg-59"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-60"
                                 fill="rgba(240,151,64,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -640,10 +582,10 @@
                           <g
                             id="g-svg-61"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-62"
                                 fill="rgba(100,100,100,1)"
@@ -667,26 +609,20 @@
                           <g
                             id="g-svg-63"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="navigator-controller"
-                  />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-9" fill="none" class="navigator-controller" />
+                  <g>
                     <path
                       id="g-svg-81"
                       fill="none"
-                      d="M 0,0 l 199.1999982086817,0 l 0,92 l-199.1999982086817 0 z"
+                      d="M 0,0 l 199.19999816894529,0 l 0,92 l-199.19999816894529 0 z"
                       class="navigator-clip-path"
-                      width="199.1999982086817"
+                      width="199.19999816894529"
                       height="92"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/LayoutLegend2.svg b/__tests__/integration/snapshots/LayoutLegend2.svg
index 1b7a112e8..4bf134e9d 100644
--- a/__tests__/integration/snapshots/LayoutLegend2.svg
+++ b/__tests__/integration/snapshots/LayoutLegend2.svg
@@ -10,16 +10,10 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,227)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-82"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-83"
             fill="none"
@@ -29,13 +23,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-84"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-84" fill="none" width="500" height="500">
           <g
             id="g-svg-85"
             fill="none"
@@ -43,21 +31,15 @@
             height="300"
             transform="matrix(1,0,0,1,0,177)"
           >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-3"
                     fill="rgba(44,53,66,1)"
@@ -67,6 +49,8 @@
                     font-weight="bold"
                     font-size="12"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     <tspan x="0" dx="0.5" dy="0">
@@ -90,49 +74,34 @@
                 fill="none"
                 width="400"
                 height="250"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-7"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-81-7)"
                   >
-                    <g
-                      id="g-svg-8"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-66"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-8" fill="none" class="navigator-play-window">
+                      <g id="g-svg-66" fill="none" class="items-item-page">
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="93.8"
                           height="23"
                         >
                           <g
                             id="g-svg-16"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-17"
                                 fill="none"
@@ -147,16 +116,13 @@
                           <g
                             id="g-svg-11"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-12"
                                 fill="rgba(160,174,198,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -166,10 +132,10 @@
                           <g
                             id="g-svg-13"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-14"
                                 fill="rgba(100,100,100,1)"
@@ -193,25 +159,25 @@
                           <g
                             id="g-svg-15"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(1,0,0,1,98.800003,0)"
                           class="items-item"
+                          x="98.8"
+                          y="0"
                           width="87.08"
                           height="23"
+                          transform="matrix(1,0,0,1,98.800003,0)"
                         >
                           <g
                             id="g-svg-24"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-25"
                                 fill="none"
@@ -226,16 +192,13 @@
                           <g
                             id="g-svg-19"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-20"
                                 fill="rgba(144,143,169,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -245,10 +208,10 @@
                           <g
                             id="g-svg-21"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-22"
                                 fill="rgba(100,100,100,1)"
@@ -272,25 +235,25 @@
                           <g
                             id="g-svg-23"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="92.48"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-32"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-33"
                                 fill="none"
@@ -305,16 +268,13 @@
                           <g
                             id="g-svg-27"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-28"
                                 fill="rgba(127,113,140,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -324,10 +284,10 @@
                           <g
                             id="g-svg-29"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-30"
                                 fill="rgba(100,100,100,1)"
@@ -351,25 +311,25 @@
                           <g
                             id="g-svg-31"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.480003,23)"
                           class="items-item"
+                          x="97.48"
+                          y="23"
                           width="94.99999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,97.480003,23)"
                         >
                           <g
                             id="g-svg-40"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-41"
                                 fill="none"
@@ -384,16 +344,13 @@
                           <g
                             id="g-svg-35"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-36"
                                 fill="rgba(110,82,113,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -403,10 +360,10 @@
                           <g
                             id="g-svg-37"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-38"
                                 fill="rgba(100,100,100,1)"
@@ -430,25 +387,25 @@
                           <g
                             id="g-svg-39"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,46)"
                           class="items-item"
+                          x="0"
+                          y="46"
                           width="96.92"
                           height="23"
+                          transform="matrix(1,0,0,1,0,46)"
                         >
                           <g
                             id="g-svg-48"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-49"
                                 fill="none"
@@ -463,16 +420,13 @@
                           <g
                             id="g-svg-43"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-44"
                                 fill="rgba(156,104,97,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -482,10 +436,10 @@
                           <g
                             id="g-svg-45"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-46"
                                 fill="rgba(100,100,100,1)"
@@ -509,25 +463,25 @@
                           <g
                             id="g-svg-47"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(1,0,0,1,101.919998,46)"
                           class="items-item"
+                          x="101.92"
+                          y="46"
                           width="97.27999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,101.919998,46)"
                         >
                           <g
                             id="g-svg-56"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-57"
                                 fill="none"
@@ -542,16 +496,13 @@
                           <g
                             id="g-svg-51"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-52"
                                 fill="rgba(198,127,81,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -561,10 +512,10 @@
                           <g
                             id="g-svg-53"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-54"
                                 fill="rgba(100,100,100,1)"
@@ -588,25 +539,25 @@
                           <g
                             id="g-svg-55"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,69)"
                           class="items-item"
+                          x="0"
+                          y="69"
                           width="118.75999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,0,69)"
                         >
                           <g
                             id="g-svg-64"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-65"
                                 fill="none"
@@ -621,16 +572,13 @@
                           <g
                             id="g-svg-59"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-60"
                                 fill="rgba(240,151,64,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -640,10 +588,10 @@
                           <g
                             id="g-svg-61"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-62"
                                 fill="rgba(100,100,100,1)"
@@ -667,26 +615,20 @@
                           <g
                             id="g-svg-63"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="navigator-controller"
-                  />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-9" fill="none" class="navigator-controller" />
+                  <g>
                     <path
                       id="g-svg-81"
                       fill="none"
-                      d="M 0,0 l 199.1999982086817,0 l 0,92 l-199.1999982086817 0 z"
+                      d="M 0,0 l 199.19999816894529,0 l 0,92 l-199.19999816894529 0 z"
                       class="navigator-clip-path"
-                      width="199.1999982086817"
+                      width="199.19999816894529"
                       height="92"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/LayoutLegend3.svg b/__tests__/integration/snapshots/LayoutLegend3.svg
index 7918469f6..9ccfa56e4 100644
--- a/__tests__/integration/snapshots/LayoutLegend3.svg
+++ b/__tests__/integration/snapshots/LayoutLegend3.svg
@@ -10,16 +10,10 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,0,404)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-82"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-83"
             fill="none"
@@ -29,13 +23,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-84"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-84" fill="none" width="500" height="500">
           <g
             id="g-svg-85"
             fill="none"
@@ -43,21 +31,15 @@
             height="300"
             transform="matrix(1,0,0,1,0,354)"
           >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-3"
                     fill="rgba(44,53,66,1)"
@@ -67,6 +49,8 @@
                     font-weight="bold"
                     font-size="12"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     <tspan x="0" dx="0.5" dy="0">
@@ -90,49 +74,34 @@
                 fill="none"
                 width="400"
                 height="250"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-7"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-81-7)"
                   >
-                    <g
-                      id="g-svg-8"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-66"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-8" fill="none" class="navigator-play-window">
+                      <g id="g-svg-66" fill="none" class="items-item-page">
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="93.8"
                           height="23"
                         >
                           <g
                             id="g-svg-16"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-17"
                                 fill="none"
@@ -147,16 +116,13 @@
                           <g
                             id="g-svg-11"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-12"
                                 fill="rgba(160,174,198,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -166,10 +132,10 @@
                           <g
                             id="g-svg-13"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-14"
                                 fill="rgba(100,100,100,1)"
@@ -193,25 +159,25 @@
                           <g
                             id="g-svg-15"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(1,0,0,1,98.800003,0)"
                           class="items-item"
+                          x="98.8"
+                          y="0"
                           width="87.08"
                           height="23"
+                          transform="matrix(1,0,0,1,98.800003,0)"
                         >
                           <g
                             id="g-svg-24"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-25"
                                 fill="none"
@@ -226,16 +192,13 @@
                           <g
                             id="g-svg-19"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-20"
                                 fill="rgba(144,143,169,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -245,10 +208,10 @@
                           <g
                             id="g-svg-21"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-22"
                                 fill="rgba(100,100,100,1)"
@@ -272,25 +235,25 @@
                           <g
                             id="g-svg-23"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="92.48"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-32"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-33"
                                 fill="none"
@@ -305,16 +268,13 @@
                           <g
                             id="g-svg-27"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-28"
                                 fill="rgba(127,113,140,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -324,10 +284,10 @@
                           <g
                             id="g-svg-29"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-30"
                                 fill="rgba(100,100,100,1)"
@@ -351,25 +311,25 @@
                           <g
                             id="g-svg-31"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.480003,23)"
                           class="items-item"
+                          x="97.48"
+                          y="23"
                           width="94.99999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,97.480003,23)"
                         >
                           <g
                             id="g-svg-40"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-41"
                                 fill="none"
@@ -384,16 +344,13 @@
                           <g
                             id="g-svg-35"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-36"
                                 fill="rgba(110,82,113,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -403,10 +360,10 @@
                           <g
                             id="g-svg-37"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-38"
                                 fill="rgba(100,100,100,1)"
@@ -430,25 +387,25 @@
                           <g
                             id="g-svg-39"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,46)"
                           class="items-item"
+                          x="0"
+                          y="46"
                           width="96.92"
                           height="23"
+                          transform="matrix(1,0,0,1,0,46)"
                         >
                           <g
                             id="g-svg-48"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-49"
                                 fill="none"
@@ -463,16 +420,13 @@
                           <g
                             id="g-svg-43"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-44"
                                 fill="rgba(156,104,97,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -482,10 +436,10 @@
                           <g
                             id="g-svg-45"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-46"
                                 fill="rgba(100,100,100,1)"
@@ -509,25 +463,25 @@
                           <g
                             id="g-svg-47"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(1,0,0,1,101.919998,46)"
                           class="items-item"
+                          x="101.92"
+                          y="46"
                           width="97.27999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,101.919998,46)"
                         >
                           <g
                             id="g-svg-56"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-57"
                                 fill="none"
@@ -542,16 +496,13 @@
                           <g
                             id="g-svg-51"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-52"
                                 fill="rgba(198,127,81,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -561,10 +512,10 @@
                           <g
                             id="g-svg-53"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-54"
                                 fill="rgba(100,100,100,1)"
@@ -588,25 +539,25 @@
                           <g
                             id="g-svg-55"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,69)"
                           class="items-item"
+                          x="0"
+                          y="69"
                           width="118.75999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,0,69)"
                         >
                           <g
                             id="g-svg-64"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-65"
                                 fill="none"
@@ -621,16 +572,13 @@
                           <g
                             id="g-svg-59"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-60"
                                 fill="rgba(240,151,64,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -640,10 +588,10 @@
                           <g
                             id="g-svg-61"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-62"
                                 fill="rgba(100,100,100,1)"
@@ -667,26 +615,20 @@
                           <g
                             id="g-svg-63"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="navigator-controller"
-                  />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-9" fill="none" class="navigator-controller" />
+                  <g>
                     <path
                       id="g-svg-81"
                       fill="none"
-                      d="M 0,0 l 199.1999982086817,0 l 0,92 l-199.1999982086817 0 z"
+                      d="M 0,0 l 199.19999816894529,0 l 0,92 l-199.19999816894529 0 z"
                       class="navigator-clip-path"
-                      width="199.1999982086817"
+                      width="199.19999816894529"
                       height="92"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/LayoutLegend4.svg b/__tests__/integration/snapshots/LayoutLegend4.svg
index e8409612e..05c2ccce9 100644
--- a/__tests__/integration/snapshots/LayoutLegend4.svg
+++ b/__tests__/integration/snapshots/LayoutLegend4.svg
@@ -10,16 +10,10 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,150.399994,50)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-82"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-83"
             fill="none"
@@ -29,13 +23,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-84"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-84" fill="none" width="500" height="500">
           <g
             id="g-svg-85"
             fill="none"
@@ -43,21 +31,15 @@
             height="300"
             transform="matrix(1,0,0,1,150.399994,0)"
           >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-3"
                     fill="rgba(44,53,66,1)"
@@ -67,6 +49,8 @@
                     font-weight="bold"
                     font-size="12"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     <tspan x="0" dx="0.5" dy="0">
@@ -90,55 +74,40 @@
                 fill="none"
                 width="400"
                 height="250"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-7"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-81-7)"
                   >
-                    <g
-                      id="g-svg-8"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-66"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-8" fill="none" class="navigator-play-window">
+                      <g id="g-svg-66" fill="none" class="items-item-page">
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
-                          width="93.80000000000001"
+                          x="0"
+                          y="0"
+                          width="93.79999999999995"
                           height="23"
                         >
                           <g
                             id="g-svg-16"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-17"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 93.80000000000001,0 l 0,23 l-93.80000000000001 0 z"
-                                width="93.80000000000001"
+                                d="M 0,0 l 93.79999999999995,0 l 0,23 l-93.79999999999995 0 z"
+                                width="93.79999999999995"
                                 height="23"
                                 visibility="visible"
                               />
@@ -147,16 +116,13 @@
                           <g
                             id="g-svg-11"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-12"
                                 fill="rgba(160,174,198,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -166,10 +132,10 @@
                           <g
                             id="g-svg-13"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-14"
                                 fill="rgba(100,100,100,1)"
@@ -193,31 +159,31 @@
                           <g
                             id="g-svg-15"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(1,0,0,1,98.800003,0)"
                           class="items-item"
-                          width="87.07999999999998"
+                          x="98.79999999999995"
+                          y="0"
+                          width="87.08000000000004"
                           height="23"
+                          transform="matrix(1,0,0,1,98.800003,0)"
                         >
                           <g
                             id="g-svg-24"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-25"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 87.07999999999998,0 l 0,23 l-87.07999999999998 0 z"
-                                width="87.07999999999998"
+                                d="M 0,0 l 87.08000000000004,0 l 0,23 l-87.08000000000004 0 z"
+                                width="87.08000000000004"
                                 height="23"
                                 visibility="visible"
                               />
@@ -226,16 +192,13 @@
                           <g
                             id="g-svg-19"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-20"
                                 fill="rgba(144,143,169,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -245,10 +208,10 @@
                           <g
                             id="g-svg-21"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-22"
                                 fill="rgba(100,100,100,1)"
@@ -272,25 +235,25 @@
                           <g
                             id="g-svg-23"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="92.48000000000002"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-32"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-33"
                                 fill="none"
@@ -305,16 +268,13 @@
                           <g
                             id="g-svg-27"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-28"
                                 fill="rgba(127,113,140,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -324,10 +284,10 @@
                           <g
                             id="g-svg-29"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-30"
                                 fill="rgba(100,100,100,1)"
@@ -351,25 +311,25 @@
                           <g
                             id="g-svg-31"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.480003,23)"
                           class="items-item"
+                          x="97.48000000000002"
+                          y="23"
                           width="95"
                           height="23"
+                          transform="matrix(1,0,0,1,97.480003,23)"
                         >
                           <g
                             id="g-svg-40"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-41"
                                 fill="none"
@@ -384,16 +344,13 @@
                           <g
                             id="g-svg-35"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-36"
                                 fill="rgba(110,82,113,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -403,10 +360,10 @@
                           <g
                             id="g-svg-37"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-38"
                                 fill="rgba(100,100,100,1)"
@@ -430,31 +387,31 @@
                           <g
                             id="g-svg-39"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,46)"
                           class="items-item"
-                          width="96.92000000000002"
+                          x="0"
+                          y="46"
+                          width="96.91999999999996"
                           height="23"
+                          transform="matrix(1,0,0,1,0,46)"
                         >
                           <g
                             id="g-svg-48"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-49"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 96.92000000000002,0 l 0,23 l-96.92000000000002 0 z"
-                                width="96.92000000000002"
+                                d="M 0,0 l 96.91999999999996,0 l 0,23 l-96.91999999999996 0 z"
+                                width="96.91999999999996"
                                 height="23"
                                 visibility="visible"
                               />
@@ -463,16 +420,13 @@
                           <g
                             id="g-svg-43"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-44"
                                 fill="rgba(156,104,97,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -482,10 +436,10 @@
                           <g
                             id="g-svg-45"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-46"
                                 fill="rgba(100,100,100,1)"
@@ -509,25 +463,25 @@
                           <g
                             id="g-svg-47"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(1,0,0,1,101.919998,46)"
                           class="items-item"
+                          x="101.91999999999996"
+                          y="46"
                           width="97.27999999999997"
                           height="23"
+                          transform="matrix(1,0,0,1,101.919998,46)"
                         >
                           <g
                             id="g-svg-56"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-57"
                                 fill="none"
@@ -542,16 +496,13 @@
                           <g
                             id="g-svg-51"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-52"
                                 fill="rgba(198,127,81,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -561,10 +512,10 @@
                           <g
                             id="g-svg-53"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-54"
                                 fill="rgba(100,100,100,1)"
@@ -588,25 +539,25 @@
                           <g
                             id="g-svg-55"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,69)"
                           class="items-item"
+                          x="0"
+                          y="69"
                           width="118.75999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,0,69)"
                         >
                           <g
                             id="g-svg-64"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-65"
                                 fill="none"
@@ -621,16 +572,13 @@
                           <g
                             id="g-svg-59"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-60"
                                 fill="rgba(240,151,64,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -640,10 +588,10 @@
                           <g
                             id="g-svg-61"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-62"
                                 fill="rgba(100,100,100,1)"
@@ -667,26 +615,20 @@
                           <g
                             id="g-svg-63"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="navigator-controller"
-                  />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-9" fill="none" class="navigator-controller" />
+                  <g>
                     <path
                       id="g-svg-81"
                       fill="none"
-                      d="M 0,0 l 199.19999820868173,0 l 0,92 l-199.19999820868173 0 z"
+                      d="M 0,0 l 199.19999816894529,0 l 0,92 l-199.19999816894529 0 z"
                       class="navigator-clip-path"
-                      width="199.19999820868173"
+                      width="199.19999816894529"
                       height="92"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/LayoutLegend5.svg b/__tests__/integration/snapshots/LayoutLegend5.svg
index 0cbf4fd68..77c7e4ac1 100644
--- a/__tests__/integration/snapshots/LayoutLegend5.svg
+++ b/__tests__/integration/snapshots/LayoutLegend5.svg
@@ -10,16 +10,10 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,150.399994,227)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-82"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-83"
             fill="none"
@@ -29,13 +23,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-84"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-84" fill="none" width="500" height="500">
           <g
             id="g-svg-85"
             fill="none"
@@ -43,21 +31,15 @@
             height="300"
             transform="matrix(1,0,0,1,150.399994,177)"
           >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-3"
                     fill="rgba(44,53,66,1)"
@@ -67,6 +49,8 @@
                     font-weight="bold"
                     font-size="12"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     <tspan x="0" dx="0.5" dy="0">
@@ -90,55 +74,40 @@
                 fill="none"
                 width="400"
                 height="250"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-7"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-81-7)"
                   >
-                    <g
-                      id="g-svg-8"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-66"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-8" fill="none" class="navigator-play-window">
+                      <g id="g-svg-66" fill="none" class="items-item-page">
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
-                          width="93.80000000000001"
+                          x="0"
+                          y="0"
+                          width="93.79999999999995"
                           height="23"
                         >
                           <g
                             id="g-svg-16"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-17"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 93.80000000000001,0 l 0,23 l-93.80000000000001 0 z"
-                                width="93.80000000000001"
+                                d="M 0,0 l 93.79999999999995,0 l 0,23 l-93.79999999999995 0 z"
+                                width="93.79999999999995"
                                 height="23"
                                 visibility="visible"
                               />
@@ -147,16 +116,13 @@
                           <g
                             id="g-svg-11"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-12"
                                 fill="rgba(160,174,198,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -166,10 +132,10 @@
                           <g
                             id="g-svg-13"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-14"
                                 fill="rgba(100,100,100,1)"
@@ -193,31 +159,31 @@
                           <g
                             id="g-svg-15"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(1,0,0,1,98.800003,0)"
                           class="items-item"
-                          width="87.07999999999998"
+                          x="98.79999999999995"
+                          y="0"
+                          width="87.08000000000004"
                           height="23"
+                          transform="matrix(1,0,0,1,98.800003,0)"
                         >
                           <g
                             id="g-svg-24"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-25"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 87.07999999999998,0 l 0,23 l-87.07999999999998 0 z"
-                                width="87.07999999999998"
+                                d="M 0,0 l 87.08000000000004,0 l 0,23 l-87.08000000000004 0 z"
+                                width="87.08000000000004"
                                 height="23"
                                 visibility="visible"
                               />
@@ -226,16 +192,13 @@
                           <g
                             id="g-svg-19"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-20"
                                 fill="rgba(144,143,169,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -245,10 +208,10 @@
                           <g
                             id="g-svg-21"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-22"
                                 fill="rgba(100,100,100,1)"
@@ -272,25 +235,25 @@
                           <g
                             id="g-svg-23"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="92.48000000000002"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-32"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-33"
                                 fill="none"
@@ -305,16 +268,13 @@
                           <g
                             id="g-svg-27"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-28"
                                 fill="rgba(127,113,140,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -324,10 +284,10 @@
                           <g
                             id="g-svg-29"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-30"
                                 fill="rgba(100,100,100,1)"
@@ -351,25 +311,25 @@
                           <g
                             id="g-svg-31"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.480003,23)"
                           class="items-item"
+                          x="97.48000000000002"
+                          y="23"
                           width="95"
                           height="23"
+                          transform="matrix(1,0,0,1,97.480003,23)"
                         >
                           <g
                             id="g-svg-40"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-41"
                                 fill="none"
@@ -384,16 +344,13 @@
                           <g
                             id="g-svg-35"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-36"
                                 fill="rgba(110,82,113,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -403,10 +360,10 @@
                           <g
                             id="g-svg-37"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-38"
                                 fill="rgba(100,100,100,1)"
@@ -430,31 +387,31 @@
                           <g
                             id="g-svg-39"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,46)"
                           class="items-item"
-                          width="96.92000000000002"
+                          x="0"
+                          y="46"
+                          width="96.91999999999996"
                           height="23"
+                          transform="matrix(1,0,0,1,0,46)"
                         >
                           <g
                             id="g-svg-48"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-49"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 96.92000000000002,0 l 0,23 l-96.92000000000002 0 z"
-                                width="96.92000000000002"
+                                d="M 0,0 l 96.91999999999996,0 l 0,23 l-96.91999999999996 0 z"
+                                width="96.91999999999996"
                                 height="23"
                                 visibility="visible"
                               />
@@ -463,16 +420,13 @@
                           <g
                             id="g-svg-43"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-44"
                                 fill="rgba(156,104,97,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -482,10 +436,10 @@
                           <g
                             id="g-svg-45"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-46"
                                 fill="rgba(100,100,100,1)"
@@ -509,25 +463,25 @@
                           <g
                             id="g-svg-47"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(1,0,0,1,101.919998,46)"
                           class="items-item"
+                          x="101.91999999999996"
+                          y="46"
                           width="97.27999999999997"
                           height="23"
+                          transform="matrix(1,0,0,1,101.919998,46)"
                         >
                           <g
                             id="g-svg-56"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-57"
                                 fill="none"
@@ -542,16 +496,13 @@
                           <g
                             id="g-svg-51"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-52"
                                 fill="rgba(198,127,81,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -561,10 +512,10 @@
                           <g
                             id="g-svg-53"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-54"
                                 fill="rgba(100,100,100,1)"
@@ -588,25 +539,25 @@
                           <g
                             id="g-svg-55"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,69)"
                           class="items-item"
+                          x="0"
+                          y="69"
                           width="118.75999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,0,69)"
                         >
                           <g
                             id="g-svg-64"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-65"
                                 fill="none"
@@ -621,16 +572,13 @@
                           <g
                             id="g-svg-59"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-60"
                                 fill="rgba(240,151,64,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -640,10 +588,10 @@
                           <g
                             id="g-svg-61"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-62"
                                 fill="rgba(100,100,100,1)"
@@ -667,26 +615,20 @@
                           <g
                             id="g-svg-63"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="navigator-controller"
-                  />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-9" fill="none" class="navigator-controller" />
+                  <g>
                     <path
                       id="g-svg-81"
                       fill="none"
-                      d="M 0,0 l 199.19999820868173,0 l 0,92 l-199.19999820868173 0 z"
+                      d="M 0,0 l 199.19999816894529,0 l 0,92 l-199.19999816894529 0 z"
                       class="navigator-clip-path"
-                      width="199.19999820868173"
+                      width="199.19999816894529"
                       height="92"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/LayoutLegend6.svg b/__tests__/integration/snapshots/LayoutLegend6.svg
index f81d95edc..21c8f26f4 100644
--- a/__tests__/integration/snapshots/LayoutLegend6.svg
+++ b/__tests__/integration/snapshots/LayoutLegend6.svg
@@ -10,16 +10,10 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,150.399994,404)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-82"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-83"
             fill="none"
@@ -29,13 +23,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-84"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-84" fill="none" width="500" height="500">
           <g
             id="g-svg-85"
             fill="none"
@@ -43,21 +31,15 @@
             height="300"
             transform="matrix(1,0,0,1,150.399994,354)"
           >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-3"
                     fill="rgba(44,53,66,1)"
@@ -67,6 +49,8 @@
                     font-weight="bold"
                     font-size="12"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     <tspan x="0" dx="0.5" dy="0">
@@ -90,55 +74,40 @@
                 fill="none"
                 width="400"
                 height="250"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-7"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-81-7)"
                   >
-                    <g
-                      id="g-svg-8"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-66"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-8" fill="none" class="navigator-play-window">
+                      <g id="g-svg-66" fill="none" class="items-item-page">
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
-                          width="93.80000000000001"
+                          x="0"
+                          y="0"
+                          width="93.79999999999995"
                           height="23"
                         >
                           <g
                             id="g-svg-16"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-17"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 93.80000000000001,0 l 0,23 l-93.80000000000001 0 z"
-                                width="93.80000000000001"
+                                d="M 0,0 l 93.79999999999995,0 l 0,23 l-93.79999999999995 0 z"
+                                width="93.79999999999995"
                                 height="23"
                                 visibility="visible"
                               />
@@ -147,16 +116,13 @@
                           <g
                             id="g-svg-11"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-12"
                                 fill="rgba(160,174,198,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -166,10 +132,10 @@
                           <g
                             id="g-svg-13"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-14"
                                 fill="rgba(100,100,100,1)"
@@ -193,31 +159,31 @@
                           <g
                             id="g-svg-15"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(1,0,0,1,98.800003,0)"
                           class="items-item"
-                          width="87.07999999999998"
+                          x="98.79999999999995"
+                          y="0"
+                          width="87.08000000000004"
                           height="23"
+                          transform="matrix(1,0,0,1,98.800003,0)"
                         >
                           <g
                             id="g-svg-24"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-25"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 87.07999999999998,0 l 0,23 l-87.07999999999998 0 z"
-                                width="87.07999999999998"
+                                d="M 0,0 l 87.08000000000004,0 l 0,23 l-87.08000000000004 0 z"
+                                width="87.08000000000004"
                                 height="23"
                                 visibility="visible"
                               />
@@ -226,16 +192,13 @@
                           <g
                             id="g-svg-19"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-20"
                                 fill="rgba(144,143,169,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -245,10 +208,10 @@
                           <g
                             id="g-svg-21"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-22"
                                 fill="rgba(100,100,100,1)"
@@ -272,25 +235,25 @@
                           <g
                             id="g-svg-23"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="92.48000000000002"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-32"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-33"
                                 fill="none"
@@ -305,16 +268,13 @@
                           <g
                             id="g-svg-27"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-28"
                                 fill="rgba(127,113,140,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -324,10 +284,10 @@
                           <g
                             id="g-svg-29"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-30"
                                 fill="rgba(100,100,100,1)"
@@ -351,25 +311,25 @@
                           <g
                             id="g-svg-31"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.480003,23)"
                           class="items-item"
+                          x="97.48000000000002"
+                          y="23"
                           width="95"
                           height="23"
+                          transform="matrix(1,0,0,1,97.480003,23)"
                         >
                           <g
                             id="g-svg-40"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-41"
                                 fill="none"
@@ -384,16 +344,13 @@
                           <g
                             id="g-svg-35"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-36"
                                 fill="rgba(110,82,113,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -403,10 +360,10 @@
                           <g
                             id="g-svg-37"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-38"
                                 fill="rgba(100,100,100,1)"
@@ -430,31 +387,31 @@
                           <g
                             id="g-svg-39"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,46)"
                           class="items-item"
-                          width="96.92000000000002"
+                          x="0"
+                          y="46"
+                          width="96.91999999999996"
                           height="23"
+                          transform="matrix(1,0,0,1,0,46)"
                         >
                           <g
                             id="g-svg-48"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-49"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 96.92000000000002,0 l 0,23 l-96.92000000000002 0 z"
-                                width="96.92000000000002"
+                                d="M 0,0 l 96.91999999999996,0 l 0,23 l-96.91999999999996 0 z"
+                                width="96.91999999999996"
                                 height="23"
                                 visibility="visible"
                               />
@@ -463,16 +420,13 @@
                           <g
                             id="g-svg-43"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-44"
                                 fill="rgba(156,104,97,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -482,10 +436,10 @@
                           <g
                             id="g-svg-45"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-46"
                                 fill="rgba(100,100,100,1)"
@@ -509,25 +463,25 @@
                           <g
                             id="g-svg-47"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(1,0,0,1,101.919998,46)"
                           class="items-item"
+                          x="101.91999999999996"
+                          y="46"
                           width="97.27999999999997"
                           height="23"
+                          transform="matrix(1,0,0,1,101.919998,46)"
                         >
                           <g
                             id="g-svg-56"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-57"
                                 fill="none"
@@ -542,16 +496,13 @@
                           <g
                             id="g-svg-51"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-52"
                                 fill="rgba(198,127,81,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -561,10 +512,10 @@
                           <g
                             id="g-svg-53"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-54"
                                 fill="rgba(100,100,100,1)"
@@ -588,25 +539,25 @@
                           <g
                             id="g-svg-55"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,69)"
                           class="items-item"
+                          x="0"
+                          y="69"
                           width="118.75999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,0,69)"
                         >
                           <g
                             id="g-svg-64"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-65"
                                 fill="none"
@@ -621,16 +572,13 @@
                           <g
                             id="g-svg-59"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-60"
                                 fill="rgba(240,151,64,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -640,10 +588,10 @@
                           <g
                             id="g-svg-61"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-62"
                                 fill="rgba(100,100,100,1)"
@@ -667,26 +615,20 @@
                           <g
                             id="g-svg-63"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="navigator-controller"
-                  />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-9" fill="none" class="navigator-controller" />
+                  <g>
                     <path
                       id="g-svg-81"
                       fill="none"
-                      d="M 0,0 l 199.19999820868173,0 l 0,92 l-199.19999820868173 0 z"
+                      d="M 0,0 l 199.19999816894529,0 l 0,92 l-199.19999816894529 0 z"
                       class="navigator-clip-path"
-                      width="199.19999820868173"
+                      width="199.19999816894529"
                       height="92"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/LayoutLegend7.svg b/__tests__/integration/snapshots/LayoutLegend7.svg
index 117b1a1bd..886d532dc 100644
--- a/__tests__/integration/snapshots/LayoutLegend7.svg
+++ b/__tests__/integration/snapshots/LayoutLegend7.svg
@@ -10,16 +10,10 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,300.799988,50)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-82"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-83"
             fill="none"
@@ -29,13 +23,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-84"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-84" fill="none" width="500" height="500">
           <g
             id="g-svg-85"
             fill="none"
@@ -43,21 +31,15 @@
             height="300"
             transform="matrix(1,0,0,1,300.799988,0)"
           >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-3"
                     fill="rgba(44,53,66,1)"
@@ -67,6 +49,8 @@
                     font-weight="bold"
                     font-size="12"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     <tspan x="0" dx="0.5" dy="0">
@@ -90,55 +74,40 @@
                 fill="none"
                 width="400"
                 height="250"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-7"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-81-7)"
                   >
-                    <g
-                      id="g-svg-8"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-66"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-8" fill="none" class="navigator-play-window">
+                      <g id="g-svg-66" fill="none" class="items-item-page">
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
-                          width="93.80000000000001"
+                          x="0"
+                          y="0"
+                          width="93.79999999999995"
                           height="23"
                         >
                           <g
                             id="g-svg-16"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-17"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 93.80000000000001,0 l 0,23 l-93.80000000000001 0 z"
-                                width="93.80000000000001"
+                                d="M 0,0 l 93.79999999999995,0 l 0,23 l-93.79999999999995 0 z"
+                                width="93.79999999999995"
                                 height="23"
                                 visibility="visible"
                               />
@@ -147,16 +116,13 @@
                           <g
                             id="g-svg-11"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-12"
                                 fill="rgba(160,174,198,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -166,10 +132,10 @@
                           <g
                             id="g-svg-13"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-14"
                                 fill="rgba(100,100,100,1)"
@@ -193,31 +159,31 @@
                           <g
                             id="g-svg-15"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(1,0,0,1,98.800003,0)"
                           class="items-item"
-                          width="87.07999999999998"
+                          x="98.79999999999995"
+                          y="0"
+                          width="87.08000000000004"
                           height="23"
+                          transform="matrix(1,0,0,1,98.800003,0)"
                         >
                           <g
                             id="g-svg-24"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-25"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 87.07999999999998,0 l 0,23 l-87.07999999999998 0 z"
-                                width="87.07999999999998"
+                                d="M 0,0 l 87.08000000000004,0 l 0,23 l-87.08000000000004 0 z"
+                                width="87.08000000000004"
                                 height="23"
                                 visibility="visible"
                               />
@@ -226,16 +192,13 @@
                           <g
                             id="g-svg-19"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-20"
                                 fill="rgba(144,143,169,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -245,10 +208,10 @@
                           <g
                             id="g-svg-21"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-22"
                                 fill="rgba(100,100,100,1)"
@@ -272,25 +235,25 @@
                           <g
                             id="g-svg-23"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="92.48000000000002"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-32"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-33"
                                 fill="none"
@@ -305,16 +268,13 @@
                           <g
                             id="g-svg-27"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-28"
                                 fill="rgba(127,113,140,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -324,10 +284,10 @@
                           <g
                             id="g-svg-29"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-30"
                                 fill="rgba(100,100,100,1)"
@@ -351,25 +311,25 @@
                           <g
                             id="g-svg-31"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.480003,23)"
                           class="items-item"
+                          x="97.48000000000002"
+                          y="23"
                           width="95"
                           height="23"
+                          transform="matrix(1,0,0,1,97.480003,23)"
                         >
                           <g
                             id="g-svg-40"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-41"
                                 fill="none"
@@ -384,16 +344,13 @@
                           <g
                             id="g-svg-35"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-36"
                                 fill="rgba(110,82,113,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -403,10 +360,10 @@
                           <g
                             id="g-svg-37"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-38"
                                 fill="rgba(100,100,100,1)"
@@ -430,31 +387,31 @@
                           <g
                             id="g-svg-39"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,46)"
                           class="items-item"
-                          width="96.92000000000002"
+                          x="0"
+                          y="46"
+                          width="96.91999999999996"
                           height="23"
+                          transform="matrix(1,0,0,1,0,46)"
                         >
                           <g
                             id="g-svg-48"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-49"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 96.92000000000002,0 l 0,23 l-96.92000000000002 0 z"
-                                width="96.92000000000002"
+                                d="M 0,0 l 96.91999999999996,0 l 0,23 l-96.91999999999996 0 z"
+                                width="96.91999999999996"
                                 height="23"
                                 visibility="visible"
                               />
@@ -463,16 +420,13 @@
                           <g
                             id="g-svg-43"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-44"
                                 fill="rgba(156,104,97,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -482,10 +436,10 @@
                           <g
                             id="g-svg-45"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-46"
                                 fill="rgba(100,100,100,1)"
@@ -509,25 +463,25 @@
                           <g
                             id="g-svg-47"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(1,0,0,1,101.919998,46)"
                           class="items-item"
+                          x="101.91999999999996"
+                          y="46"
                           width="97.27999999999997"
                           height="23"
+                          transform="matrix(1,0,0,1,101.919998,46)"
                         >
                           <g
                             id="g-svg-56"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-57"
                                 fill="none"
@@ -542,16 +496,13 @@
                           <g
                             id="g-svg-51"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-52"
                                 fill="rgba(198,127,81,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -561,10 +512,10 @@
                           <g
                             id="g-svg-53"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-54"
                                 fill="rgba(100,100,100,1)"
@@ -588,25 +539,25 @@
                           <g
                             id="g-svg-55"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,69)"
                           class="items-item"
+                          x="0"
+                          y="69"
                           width="118.75999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,0,69)"
                         >
                           <g
                             id="g-svg-64"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-65"
                                 fill="none"
@@ -621,16 +572,13 @@
                           <g
                             id="g-svg-59"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-60"
                                 fill="rgba(240,151,64,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -640,10 +588,10 @@
                           <g
                             id="g-svg-61"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-62"
                                 fill="rgba(100,100,100,1)"
@@ -667,26 +615,20 @@
                           <g
                             id="g-svg-63"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="navigator-controller"
-                  />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-9" fill="none" class="navigator-controller" />
+                  <g>
                     <path
                       id="g-svg-81"
                       fill="none"
-                      d="M 0,0 l 199.19999820868168,0 l 0,92 l-199.19999820868168 0 z"
+                      d="M 0,0 l 199.19999816894529,0 l 0,92 l-199.19999816894529 0 z"
                       class="navigator-clip-path"
-                      width="199.19999820868168"
+                      width="199.19999816894529"
                       height="92"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/LayoutLegend8.svg b/__tests__/integration/snapshots/LayoutLegend8.svg
index ceb261834..14426aaf8 100644
--- a/__tests__/integration/snapshots/LayoutLegend8.svg
+++ b/__tests__/integration/snapshots/LayoutLegend8.svg
@@ -10,16 +10,10 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,300.799988,227)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-82"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-83"
             fill="none"
@@ -29,13 +23,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-84"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-84" fill="none" width="500" height="500">
           <g
             id="g-svg-85"
             fill="none"
@@ -43,21 +31,15 @@
             height="300"
             transform="matrix(1,0,0,1,300.799988,177)"
           >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-3"
                     fill="rgba(44,53,66,1)"
@@ -67,6 +49,8 @@
                     font-weight="bold"
                     font-size="12"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     <tspan x="0" dx="0.5" dy="0">
@@ -90,55 +74,40 @@
                 fill="none"
                 width="400"
                 height="250"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-7"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-81-7)"
                   >
-                    <g
-                      id="g-svg-8"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-66"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-8" fill="none" class="navigator-play-window">
+                      <g id="g-svg-66" fill="none" class="items-item-page">
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
-                          width="93.80000000000001"
+                          x="0"
+                          y="0"
+                          width="93.79999999999995"
                           height="23"
                         >
                           <g
                             id="g-svg-16"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-17"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 93.80000000000001,0 l 0,23 l-93.80000000000001 0 z"
-                                width="93.80000000000001"
+                                d="M 0,0 l 93.79999999999995,0 l 0,23 l-93.79999999999995 0 z"
+                                width="93.79999999999995"
                                 height="23"
                                 visibility="visible"
                               />
@@ -147,16 +116,13 @@
                           <g
                             id="g-svg-11"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-12"
                                 fill="rgba(160,174,198,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -166,10 +132,10 @@
                           <g
                             id="g-svg-13"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-14"
                                 fill="rgba(100,100,100,1)"
@@ -193,31 +159,31 @@
                           <g
                             id="g-svg-15"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(1,0,0,1,98.800003,0)"
                           class="items-item"
-                          width="87.07999999999998"
+                          x="98.79999999999995"
+                          y="0"
+                          width="87.08000000000004"
                           height="23"
+                          transform="matrix(1,0,0,1,98.800003,0)"
                         >
                           <g
                             id="g-svg-24"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-25"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 87.07999999999998,0 l 0,23 l-87.07999999999998 0 z"
-                                width="87.07999999999998"
+                                d="M 0,0 l 87.08000000000004,0 l 0,23 l-87.08000000000004 0 z"
+                                width="87.08000000000004"
                                 height="23"
                                 visibility="visible"
                               />
@@ -226,16 +192,13 @@
                           <g
                             id="g-svg-19"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-20"
                                 fill="rgba(144,143,169,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -245,10 +208,10 @@
                           <g
                             id="g-svg-21"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-22"
                                 fill="rgba(100,100,100,1)"
@@ -272,25 +235,25 @@
                           <g
                             id="g-svg-23"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="92.48000000000002"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-32"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-33"
                                 fill="none"
@@ -305,16 +268,13 @@
                           <g
                             id="g-svg-27"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-28"
                                 fill="rgba(127,113,140,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -324,10 +284,10 @@
                           <g
                             id="g-svg-29"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-30"
                                 fill="rgba(100,100,100,1)"
@@ -351,25 +311,25 @@
                           <g
                             id="g-svg-31"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.480003,23)"
                           class="items-item"
+                          x="97.48000000000002"
+                          y="23"
                           width="95"
                           height="23"
+                          transform="matrix(1,0,0,1,97.480003,23)"
                         >
                           <g
                             id="g-svg-40"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-41"
                                 fill="none"
@@ -384,16 +344,13 @@
                           <g
                             id="g-svg-35"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-36"
                                 fill="rgba(110,82,113,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -403,10 +360,10 @@
                           <g
                             id="g-svg-37"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-38"
                                 fill="rgba(100,100,100,1)"
@@ -430,31 +387,31 @@
                           <g
                             id="g-svg-39"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,46)"
                           class="items-item"
-                          width="96.92000000000002"
+                          x="0"
+                          y="46"
+                          width="96.91999999999996"
                           height="23"
+                          transform="matrix(1,0,0,1,0,46)"
                         >
                           <g
                             id="g-svg-48"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-49"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 96.92000000000002,0 l 0,23 l-96.92000000000002 0 z"
-                                width="96.92000000000002"
+                                d="M 0,0 l 96.91999999999996,0 l 0,23 l-96.91999999999996 0 z"
+                                width="96.91999999999996"
                                 height="23"
                                 visibility="visible"
                               />
@@ -463,16 +420,13 @@
                           <g
                             id="g-svg-43"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-44"
                                 fill="rgba(156,104,97,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -482,10 +436,10 @@
                           <g
                             id="g-svg-45"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-46"
                                 fill="rgba(100,100,100,1)"
@@ -509,25 +463,25 @@
                           <g
                             id="g-svg-47"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(1,0,0,1,101.919998,46)"
                           class="items-item"
+                          x="101.91999999999996"
+                          y="46"
                           width="97.27999999999997"
                           height="23"
+                          transform="matrix(1,0,0,1,101.919998,46)"
                         >
                           <g
                             id="g-svg-56"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-57"
                                 fill="none"
@@ -542,16 +496,13 @@
                           <g
                             id="g-svg-51"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-52"
                                 fill="rgba(198,127,81,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -561,10 +512,10 @@
                           <g
                             id="g-svg-53"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-54"
                                 fill="rgba(100,100,100,1)"
@@ -588,25 +539,25 @@
                           <g
                             id="g-svg-55"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,69)"
                           class="items-item"
+                          x="0"
+                          y="69"
                           width="118.75999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,0,69)"
                         >
                           <g
                             id="g-svg-64"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-65"
                                 fill="none"
@@ -621,16 +572,13 @@
                           <g
                             id="g-svg-59"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-60"
                                 fill="rgba(240,151,64,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -640,10 +588,10 @@
                           <g
                             id="g-svg-61"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-62"
                                 fill="rgba(100,100,100,1)"
@@ -667,26 +615,20 @@
                           <g
                             id="g-svg-63"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="navigator-controller"
-                  />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-9" fill="none" class="navigator-controller" />
+                  <g>
                     <path
                       id="g-svg-81"
                       fill="none"
-                      d="M 0,0 l 199.19999820868168,0 l 0,92 l-199.19999820868168 0 z"
+                      d="M 0,0 l 199.19999816894529,0 l 0,92 l-199.19999816894529 0 z"
                       class="navigator-clip-path"
-                      width="199.19999820868168"
+                      width="199.19999816894529"
                       height="92"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/LayoutLegend9.svg b/__tests__/integration/snapshots/LayoutLegend9.svg
index e6143e966..afc2ece57 100644
--- a/__tests__/integration/snapshots/LayoutLegend9.svg
+++ b/__tests__/integration/snapshots/LayoutLegend9.svg
@@ -10,16 +10,10 @@
       <use href="#g-svg-81" transform="matrix(1,0,0,1,300.799988,404)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-82"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-82" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-83"
             fill="none"
@@ -29,13 +23,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-84"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-84" fill="none" width="500" height="500">
           <g
             id="g-svg-85"
             fill="none"
@@ -43,21 +31,15 @@
             height="300"
             transform="matrix(1,0,0,1,300.799988,354)"
           >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-3"
                     fill="rgba(44,53,66,1)"
@@ -67,6 +49,8 @@
                     font-weight="bold"
                     font-size="12"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     <tspan x="0" dx="0.5" dy="0">
@@ -90,55 +74,40 @@
                 fill="none"
                 width="400"
                 height="250"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-7"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-81-7)"
                   >
-                    <g
-                      id="g-svg-8"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-66"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-8" fill="none" class="navigator-play-window">
+                      <g id="g-svg-66" fill="none" class="items-item-page">
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
-                          width="93.80000000000001"
+                          x="0"
+                          y="0"
+                          width="93.79999999999995"
                           height="23"
                         >
                           <g
                             id="g-svg-16"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-17"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 93.80000000000001,0 l 0,23 l-93.80000000000001 0 z"
-                                width="93.80000000000001"
+                                d="M 0,0 l 93.79999999999995,0 l 0,23 l-93.79999999999995 0 z"
+                                width="93.79999999999995"
                                 height="23"
                                 visibility="visible"
                               />
@@ -147,16 +116,13 @@
                           <g
                             id="g-svg-11"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-12"
                                 fill="rgba(160,174,198,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -166,10 +132,10 @@
                           <g
                             id="g-svg-13"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-14"
                                 fill="rgba(100,100,100,1)"
@@ -193,31 +159,31 @@
                           <g
                             id="g-svg-15"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(1,0,0,1,98.800003,0)"
                           class="items-item"
-                          width="87.07999999999998"
+                          x="98.79999999999995"
+                          y="0"
+                          width="87.08000000000004"
                           height="23"
+                          transform="matrix(1,0,0,1,98.800003,0)"
                         >
                           <g
                             id="g-svg-24"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-25"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 87.07999999999998,0 l 0,23 l-87.07999999999998 0 z"
-                                width="87.07999999999998"
+                                d="M 0,0 l 87.08000000000004,0 l 0,23 l-87.08000000000004 0 z"
+                                width="87.08000000000004"
                                 height="23"
                                 visibility="visible"
                               />
@@ -226,16 +192,13 @@
                           <g
                             id="g-svg-19"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-20"
                                 fill="rgba(144,143,169,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -245,10 +208,10 @@
                           <g
                             id="g-svg-21"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-22"
                                 fill="rgba(100,100,100,1)"
@@ -272,25 +235,25 @@
                           <g
                             id="g-svg-23"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="92.48000000000002"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-32"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-33"
                                 fill="none"
@@ -305,16 +268,13 @@
                           <g
                             id="g-svg-27"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-28"
                                 fill="rgba(127,113,140,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -324,10 +284,10 @@
                           <g
                             id="g-svg-29"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-30"
                                 fill="rgba(100,100,100,1)"
@@ -351,25 +311,25 @@
                           <g
                             id="g-svg-31"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.480003,23)"
                           class="items-item"
+                          x="97.48000000000002"
+                          y="23"
                           width="95"
                           height="23"
+                          transform="matrix(1,0,0,1,97.480003,23)"
                         >
                           <g
                             id="g-svg-40"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-41"
                                 fill="none"
@@ -384,16 +344,13 @@
                           <g
                             id="g-svg-35"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-36"
                                 fill="rgba(110,82,113,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -403,10 +360,10 @@
                           <g
                             id="g-svg-37"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-38"
                                 fill="rgba(100,100,100,1)"
@@ -430,31 +387,31 @@
                           <g
                             id="g-svg-39"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,46)"
                           class="items-item"
-                          width="96.92000000000002"
+                          x="0"
+                          y="46"
+                          width="96.91999999999996"
                           height="23"
+                          transform="matrix(1,0,0,1,0,46)"
                         >
                           <g
                             id="g-svg-48"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-49"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 96.92000000000002,0 l 0,23 l-96.92000000000002 0 z"
-                                width="96.92000000000002"
+                                d="M 0,0 l 96.91999999999996,0 l 0,23 l-96.91999999999996 0 z"
+                                width="96.91999999999996"
                                 height="23"
                                 visibility="visible"
                               />
@@ -463,16 +420,13 @@
                           <g
                             id="g-svg-43"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-44"
                                 fill="rgba(156,104,97,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -482,10 +436,10 @@
                           <g
                             id="g-svg-45"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-46"
                                 fill="rgba(100,100,100,1)"
@@ -509,25 +463,25 @@
                           <g
                             id="g-svg-47"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(1,0,0,1,101.919998,46)"
                           class="items-item"
+                          x="101.91999999999996"
+                          y="46"
                           width="97.27999999999997"
                           height="23"
+                          transform="matrix(1,0,0,1,101.919998,46)"
                         >
                           <g
                             id="g-svg-56"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-57"
                                 fill="none"
@@ -542,16 +496,13 @@
                           <g
                             id="g-svg-51"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-52"
                                 fill="rgba(198,127,81,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -561,10 +512,10 @@
                           <g
                             id="g-svg-53"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-54"
                                 fill="rgba(100,100,100,1)"
@@ -588,25 +539,25 @@
                           <g
                             id="g-svg-55"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,69)"
                           class="items-item"
+                          x="0"
+                          y="69"
                           width="118.75999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,0,69)"
                         >
                           <g
                             id="g-svg-64"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-65"
                                 fill="none"
@@ -621,16 +572,13 @@
                           <g
                             id="g-svg-59"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-60"
                                 fill="rgba(240,151,64,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -640,10 +588,10 @@
                           <g
                             id="g-svg-61"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-62"
                                 fill="rgba(100,100,100,1)"
@@ -667,26 +615,20 @@
                           <g
                             id="g-svg-63"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="navigator-controller"
-                  />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-9" fill="none" class="navigator-controller" />
+                  <g>
                     <path
                       id="g-svg-81"
                       fill="none"
-                      d="M 0,0 l 199.19999820868168,0 l 0,92 l-199.19999820868168 0 z"
+                      d="M 0,0 l 199.19999816894529,0 l 0,92 l-199.19999816894529 0 z"
                       class="navigator-clip-path"
-                      width="199.19999820868168"
+                      width="199.19999816894529"
                       height="92"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/LayoutLegendMultiple.svg b/__tests__/integration/snapshots/LayoutLegendMultiple.svg
index f8aa6726a..02c06fd6d 100644
--- a/__tests__/integration/snapshots/LayoutLegendMultiple.svg
+++ b/__tests__/integration/snapshots/LayoutLegendMultiple.svg
@@ -16,16 +16,10 @@
       <use href="#g-svg-162" transform="matrix(1,0,0,1,150.399994,277)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-48"
-        fill="none"
-        width="500"
-        height="500"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-48" fill="none" width="500" height="500">
+        <g>
           <path
             id="g-svg-49"
             fill="none"
@@ -35,13 +29,7 @@
             stroke="rgba(255,0,0,1)"
           />
         </g>
-        <g
-          id="g-svg-50"
-          fill="none"
-          width="500"
-          height="500"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-50" fill="none" width="500" height="500">
           <g
             id="g-svg-51"
             fill="none"
@@ -49,21 +37,15 @@
             height="300"
             transform="matrix(1,0,0,1,150.399994,127)"
           >
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-1" fill="none" class="legend-title-group">
               <g
                 id="g-svg-2"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-3"
                     fill="rgba(44,53,66,1)"
@@ -75,6 +57,8 @@
                     font-weight="bold"
                     font-size="12"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     legend 1
@@ -93,49 +77,34 @@
                 fill="none"
                 width="400"
                 height="273"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
-                <g
-                  id="g-svg-6"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="items-navigator"
-                >
+                <g id="g-svg-6" fill="none" x="0" y="0" class="items-navigator">
                   <g
                     id="g-svg-7"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-81-7)"
                   >
-                    <g
-                      id="g-svg-8"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-66"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-8" fill="none" class="navigator-play-window">
+                      <g id="g-svg-66" fill="none" class="items-item-page">
                         <g
                           id="g-svg-10"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
+                          x="0"
+                          y="0"
                           width="93.8"
                           height="23"
                         >
                           <g
                             id="g-svg-16"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-17"
                                 fill="none"
@@ -150,16 +119,13 @@
                           <g
                             id="g-svg-11"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-12"
                                 fill="rgba(160,174,198,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -169,10 +135,10 @@
                           <g
                             id="g-svg-13"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-14"
                                 fill="rgba(100,100,100,1)"
@@ -196,25 +162,25 @@
                           <g
                             id="g-svg-15"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-18"
                           fill="none"
-                          transform="matrix(1,0,0,1,98.800003,0)"
                           class="items-item"
+                          x="98.8"
+                          y="0"
                           width="87.08"
                           height="23"
+                          transform="matrix(1,0,0,1,98.800003,0)"
                         >
                           <g
                             id="g-svg-24"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-25"
                                 fill="none"
@@ -229,16 +195,13 @@
                           <g
                             id="g-svg-19"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-20"
                                 fill="rgba(144,143,169,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -248,10 +211,10 @@
                           <g
                             id="g-svg-21"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-22"
                                 fill="rgba(100,100,100,1)"
@@ -275,25 +238,25 @@
                           <g
                             id="g-svg-23"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-26"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="92.48"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-32"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-33"
                                 fill="none"
@@ -308,16 +271,13 @@
                           <g
                             id="g-svg-27"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-28"
                                 fill="rgba(127,113,140,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -327,10 +287,10 @@
                           <g
                             id="g-svg-29"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-30"
                                 fill="rgba(100,100,100,1)"
@@ -354,25 +314,25 @@
                           <g
                             id="g-svg-31"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-34"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.480003,23)"
                           class="items-item"
+                          x="97.48"
+                          y="23"
                           width="94.99999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,97.480003,23)"
                         >
                           <g
                             id="g-svg-40"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-41"
                                 fill="none"
@@ -387,16 +347,13 @@
                           <g
                             id="g-svg-35"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-36"
                                 fill="rgba(110,82,113,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -406,10 +363,10 @@
                           <g
                             id="g-svg-37"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-38"
                                 fill="rgba(100,100,100,1)"
@@ -433,25 +390,25 @@
                           <g
                             id="g-svg-39"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-42"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,46)"
                           class="items-item"
+                          x="0"
+                          y="46"
                           width="96.92"
                           height="23"
+                          transform="matrix(1,0,0,1,0,46)"
                         >
                           <g
                             id="g-svg-48"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-49"
                                 fill="none"
@@ -466,16 +423,13 @@
                           <g
                             id="g-svg-43"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-44"
                                 fill="rgba(156,104,97,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -485,10 +439,10 @@
                           <g
                             id="g-svg-45"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-46"
                                 fill="rgba(100,100,100,1)"
@@ -512,25 +466,25 @@
                           <g
                             id="g-svg-47"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-50"
                           fill="none"
-                          transform="matrix(1,0,0,1,101.919998,46)"
                           class="items-item"
+                          x="101.92"
+                          y="46"
                           width="97.27999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,101.919998,46)"
                         >
                           <g
                             id="g-svg-56"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-57"
                                 fill="none"
@@ -545,16 +499,13 @@
                           <g
                             id="g-svg-51"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-52"
                                 fill="rgba(198,127,81,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -564,10 +515,10 @@
                           <g
                             id="g-svg-53"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-54"
                                 fill="rgba(100,100,100,1)"
@@ -591,25 +542,25 @@
                           <g
                             id="g-svg-55"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-58"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,69)"
                           class="items-item"
+                          x="0"
+                          y="69"
                           width="118.75999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,0,69)"
                         >
                           <g
                             id="g-svg-64"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-65"
                                 fill="none"
@@ -624,16 +575,13 @@
                           <g
                             id="g-svg-59"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-60"
                                 fill="rgba(240,151,64,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -643,10 +591,10 @@
                           <g
                             id="g-svg-61"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-62"
                                 fill="rgba(100,100,100,1)"
@@ -670,26 +618,20 @@
                           <g
                             id="g-svg-63"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-9"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="navigator-controller"
-                  />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-9" fill="none" class="navigator-controller" />
+                  <g>
                     <path
                       id="g-svg-81"
                       fill="none"
-                      d="M 0,0 l 199.19999820868173,0 l 0,92 l-199.19999820868173 0 z"
+                      d="M 0,0 l 199.19999816894529,0 l 0,92 l-199.19999816894529 0 z"
                       class="navigator-clip-path"
-                      width="199.19999820868173"
+                      width="199.19999816894529"
                       height="92"
                     />
                   </g>
@@ -704,21 +646,15 @@
             height="300"
             transform="matrix(1,0,0,1,150.399994,250)"
           >
-            <g
-              id="g-svg-82"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-82" fill="none" class="legend-title-group">
               <g
                 id="g-svg-83"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-84"
                     fill="rgba(44,53,66,1)"
@@ -730,6 +666,8 @@
                     font-weight="bold"
                     font-size="12"
                     font-family="sans-serif"
+                    x="0"
+                    y="0"
                     text-anchor="left"
                   >
                     legend 2
@@ -748,55 +686,46 @@
                 fill="none"
                 width="400"
                 height="273"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
                 <g
                   id="g-svg-87"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
+                  x="0"
+                  y="0"
                   class="items-navigator"
                 >
                   <g
                     id="g-svg-88"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-162-88)"
                   >
-                    <g
-                      id="g-svg-89"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-147"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-89" fill="none" class="navigator-play-window">
+                      <g id="g-svg-147" fill="none" class="items-item-page">
                         <g
                           id="g-svg-91"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
-                          width="93.80000000000001"
+                          x="0"
+                          y="0"
+                          width="93.79999999999995"
                           height="23"
                         >
                           <g
                             id="g-svg-97"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-98"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 93.80000000000001,0 l 0,23 l-93.80000000000001 0 z"
-                                width="93.80000000000001"
+                                d="M 0,0 l 93.79999999999995,0 l 0,23 l-93.79999999999995 0 z"
+                                width="93.79999999999995"
                                 height="23"
                                 visibility="visible"
                               />
@@ -805,16 +734,13 @@
                           <g
                             id="g-svg-92"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-93"
                                 fill="rgba(160,174,198,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -824,10 +750,10 @@
                           <g
                             id="g-svg-94"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-95"
                                 fill="rgba(100,100,100,1)"
@@ -851,31 +777,31 @@
                           <g
                             id="g-svg-96"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-99"
                           fill="none"
-                          transform="matrix(1,0,0,1,98.800003,0)"
                           class="items-item"
-                          width="87.07999999999998"
+                          x="98.79999999999995"
+                          y="0"
+                          width="87.08000000000004"
                           height="23"
+                          transform="matrix(1,0,0,1,98.800003,0)"
                         >
                           <g
                             id="g-svg-105"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-106"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 87.07999999999998,0 l 0,23 l-87.07999999999998 0 z"
-                                width="87.07999999999998"
+                                d="M 0,0 l 87.08000000000004,0 l 0,23 l-87.08000000000004 0 z"
+                                width="87.08000000000004"
                                 height="23"
                                 visibility="visible"
                               />
@@ -884,16 +810,13 @@
                           <g
                             id="g-svg-100"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-101"
                                 fill="rgba(144,143,169,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -903,10 +826,10 @@
                           <g
                             id="g-svg-102"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-103"
                                 fill="rgba(100,100,100,1)"
@@ -930,25 +853,25 @@
                           <g
                             id="g-svg-104"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-107"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
+                          x="0"
+                          y="23"
                           width="92.48000000000002"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-113"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-114"
                                 fill="none"
@@ -963,16 +886,13 @@
                           <g
                             id="g-svg-108"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-109"
                                 fill="rgba(127,113,140,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -982,10 +902,10 @@
                           <g
                             id="g-svg-110"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-111"
                                 fill="rgba(100,100,100,1)"
@@ -1009,25 +929,25 @@
                           <g
                             id="g-svg-112"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-115"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.480003,23)"
                           class="items-item"
+                          x="97.48000000000002"
+                          y="23"
                           width="95"
                           height="23"
+                          transform="matrix(1,0,0,1,97.480003,23)"
                         >
                           <g
                             id="g-svg-121"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-122"
                                 fill="none"
@@ -1042,16 +962,13 @@
                           <g
                             id="g-svg-116"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-117"
                                 fill="rgba(110,82,113,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -1061,10 +978,10 @@
                           <g
                             id="g-svg-118"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-119"
                                 fill="rgba(100,100,100,1)"
@@ -1088,31 +1005,31 @@
                           <g
                             id="g-svg-120"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-123"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,46)"
                           class="items-item"
-                          width="96.92000000000002"
+                          x="0"
+                          y="46"
+                          width="96.91999999999996"
                           height="23"
+                          transform="matrix(1,0,0,1,0,46)"
                         >
                           <g
                             id="g-svg-129"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-130"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 96.92000000000002,0 l 0,23 l-96.92000000000002 0 z"
-                                width="96.92000000000002"
+                                d="M 0,0 l 96.91999999999996,0 l 0,23 l-96.91999999999996 0 z"
+                                width="96.91999999999996"
                                 height="23"
                                 visibility="visible"
                               />
@@ -1121,16 +1038,13 @@
                           <g
                             id="g-svg-124"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-125"
                                 fill="rgba(156,104,97,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -1140,10 +1054,10 @@
                           <g
                             id="g-svg-126"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-127"
                                 fill="rgba(100,100,100,1)"
@@ -1167,25 +1081,25 @@
                           <g
                             id="g-svg-128"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-131"
                           fill="none"
-                          transform="matrix(1,0,0,1,101.919998,46)"
                           class="items-item"
+                          x="101.91999999999996"
+                          y="46"
                           width="97.27999999999997"
                           height="23"
+                          transform="matrix(1,0,0,1,101.919998,46)"
                         >
                           <g
                             id="g-svg-137"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-138"
                                 fill="none"
@@ -1200,16 +1114,13 @@
                           <g
                             id="g-svg-132"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-133"
                                 fill="rgba(198,127,81,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -1219,10 +1130,10 @@
                           <g
                             id="g-svg-134"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-135"
                                 fill="rgba(100,100,100,1)"
@@ -1246,25 +1157,25 @@
                           <g
                             id="g-svg-136"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-139"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,69)"
                           class="items-item"
+                          x="0"
+                          y="69"
                           width="118.75999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,0,69)"
                         >
                           <g
                             id="g-svg-145"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-146"
                                 fill="none"
@@ -1279,16 +1190,13 @@
                           <g
                             id="g-svg-140"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-141"
                                 fill="rgba(240,151,64,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -1298,10 +1206,10 @@
                           <g
                             id="g-svg-142"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-143"
                                 fill="rgba(100,100,100,1)"
@@ -1325,26 +1233,20 @@
                           <g
                             id="g-svg-144"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-90"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="navigator-controller"
-                  />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-90" fill="none" class="navigator-controller" />
+                  <g>
                     <path
                       id="g-svg-162"
                       fill="none"
-                      d="M 0,0 l 199.19999820868173,0 l 0,92 l-199.19999820868173 0 z"
+                      d="M 0,0 l 199.19999816894529,0 l 0,92 l-199.19999816894529 0 z"
                       class="navigator-clip-path"
-                      width="199.19999820868173"
+                      width="199.19999816894529"
                       height="92"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/LayoutUpdateAttr.svg b/__tests__/integration/snapshots/LayoutUpdateAttr.svg
index 78e33f366..fe3d5c742 100644
--- a/__tests__/integration/snapshots/LayoutUpdateAttr.svg
+++ b/__tests__/integration/snapshots/LayoutUpdateAttr.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-201" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-201" fill="none">
+        <g>
           <path
             id="g-svg-202"
             fill="rgba(255,255,255,1)"
@@ -18,26 +18,11 @@
             height="200"
           />
         </g>
-        <g id="g-svg-203" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-203" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -48,7 +33,7 @@
                     d="M 0,0 L 200,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -56,10 +41,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 0,20 L 200,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -67,10 +52,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 0,40 L 200,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -78,10 +63,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 0,60.00000000000001 L 200,60.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -89,10 +74,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 0,80 L 200,80"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,100)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -100,10 +85,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 0,100 L 200,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,120)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -111,10 +96,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 0,120.00000000000001 L 200,120.00000000000001"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,140)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -122,10 +107,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 0,140 L 200,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,160)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -133,10 +118,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 0,160 L 200,160"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,180)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -144,31 +129,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 200,0"
+                    d="M 0,180 L 200,180"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-15"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-16"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-15" fill="none" class="axis-main-group">
+            <g id="g-svg-16" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-17"
                   fill="none"
@@ -182,25 +152,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-18"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-19"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-18" fill="none" class="axis-tick-group" />
+            <g id="g-svg-19" fill="none" class="axis-label-group">
               <g
                 id="g-svg-20"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-30"
                     fill="rgba(0,0,0,1)"
@@ -223,10 +183,10 @@
               <g
                 id="g-svg-21"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-31"
                     fill="rgba(0,0,0,1)"
@@ -249,10 +209,10 @@
               <g
                 id="g-svg-22"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-32"
                     fill="rgba(0,0,0,1)"
@@ -275,10 +235,10 @@
               <g
                 id="g-svg-23"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-33"
                     fill="rgba(0,0,0,1)"
@@ -301,10 +261,10 @@
               <g
                 id="g-svg-24"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-34"
                     fill="rgba(0,0,0,1)"
@@ -327,10 +287,10 @@
               <g
                 id="g-svg-25"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,100)"
+                transform="matrix(1,0,0,1,-10,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-35"
                     fill="rgba(0,0,0,1)"
@@ -353,10 +313,10 @@
               <g
                 id="g-svg-26"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,120)"
+                transform="matrix(1,0,0,1,-10,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-36"
                     fill="rgba(0,0,0,1)"
@@ -379,10 +339,10 @@
               <g
                 id="g-svg-27"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,140)"
+                transform="matrix(1,0,0,1,-10,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-37"
                     fill="rgba(0,0,0,1)"
@@ -405,10 +365,10 @@
               <g
                 id="g-svg-28"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,160)"
+                transform="matrix(1,0,0,1,-10,160)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -431,10 +391,10 @@
               <g
                 id="g-svg-29"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,180)"
+                transform="matrix(1,0,0,1,-10,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-39"
                     fill="rgba(0,0,0,1)"
@@ -456,33 +416,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-40"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-40" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-204" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-42"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-43"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-204" fill="none">
+          <g id="g-svg-41" fill="none" class="axis-grid-group">
+            <g id="g-svg-42" fill="none" class="axis-grid">
+              <g id="g-svg-43" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-45"
                     fill="none"
@@ -493,7 +433,7 @@
                     d="M 0,0 L 0,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-46"
                     fill="none"
@@ -501,10 +441,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 20,0 L 20,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-47"
                     fill="none"
@@ -512,10 +452,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 40,0 L 40,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-48"
                     fill="none"
@@ -523,10 +463,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 60.00000000000001,0 L 60.00000000000001,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-49"
                     fill="none"
@@ -534,10 +474,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 80,0 L 80,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,0)">
+                <g>
                   <path
                     id="g-svg-50"
                     fill="none"
@@ -545,10 +485,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 100,0 L 100,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,120,0)">
+                <g>
                   <path
                     id="g-svg-51"
                     fill="none"
@@ -556,10 +496,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 120.00000000000001,0 L 120.00000000000001,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,140,0)">
+                <g>
                   <path
                     id="g-svg-52"
                     fill="none"
@@ -567,10 +507,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 140,0 L 140,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,160,0)">
+                <g>
                   <path
                     id="g-svg-53"
                     fill="none"
@@ -578,10 +518,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 160,0 L 160,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180,0)">
+                <g>
                   <path
                     id="g-svg-54"
                     fill="none"
@@ -589,31 +529,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,200"
+                    d="M 180,0 L 180,200"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-44"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-44" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-55"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-56"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-55" fill="none" class="axis-main-group">
+            <g id="g-svg-56" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-57"
                   fill="none"
@@ -627,25 +552,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-58"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-59"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-58" fill="none" class="axis-tick-group" />
+            <g id="g-svg-59" fill="none" class="axis-label-group">
               <g
                 id="g-svg-60"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -672,7 +587,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -699,7 +614,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-72"
                     fill="rgba(0,0,0,1)"
@@ -726,7 +641,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-73"
                     fill="rgba(0,0,0,1)"
@@ -753,7 +668,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-74"
                     fill="rgba(0,0,0,1)"
@@ -780,7 +695,7 @@
                 transform="matrix(1,0,0,1,100,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-75"
                     fill="rgba(0,0,0,1)"
@@ -807,7 +722,7 @@
                 transform="matrix(1,0,0,1,120,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-76"
                     fill="rgba(0,0,0,1)"
@@ -834,7 +749,7 @@
                 transform="matrix(1,0,0,1,140,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-77"
                     fill="rgba(0,0,0,1)"
@@ -861,7 +776,7 @@
                 transform="matrix(1,0,0,1,160,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-78"
                     fill="rgba(0,0,0,1)"
@@ -888,7 +803,7 @@
                 transform="matrix(1,0,0,1,180,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-79"
                     fill="rgba(0,0,0,1)"
@@ -911,20 +826,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-80"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-80" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-205"
-          fill="none"
-          width="100"
-          height="100"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-205" fill="none" width="100" height="100">
           <g transform="matrix(1,0,0,1,25,45)">
             <path
               id="g-svg-206"
diff --git a/__tests__/integration/snapshots/LayoutUpdateAttr2.svg b/__tests__/integration/snapshots/LayoutUpdateAttr2.svg
index d24a7139c..6b53b59bc 100644
--- a/__tests__/integration/snapshots/LayoutUpdateAttr2.svg
+++ b/__tests__/integration/snapshots/LayoutUpdateAttr2.svg
@@ -10,10 +10,10 @@
       <use href="#g-svg-250" transform="matrix(1,0,0,1,50.400002,0)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-81" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-81" fill="none">
+        <g>
           <path
             id="g-svg-82"
             fill="rgba(255,255,255,1)"
@@ -22,26 +22,11 @@
             height="500"
           />
         </g>
-        <g id="g-svg-83" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-3"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-83" fill="none">
+          <g id="g-svg-1" fill="none" class="axis-grid-group">
+            <g id="g-svg-2" fill="none" class="axis-grid">
+              <g id="g-svg-3" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="none"
@@ -52,7 +37,7 @@
                     d="M 0,0 L 500,0"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,20)">
+                <g>
                   <path
                     id="g-svg-6"
                     fill="none"
@@ -60,10 +45,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,20 L 500,20"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,40)">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="none"
@@ -71,10 +56,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,40 L 500,40"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,60)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="none"
@@ -82,10 +67,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,60 L 500,60"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,80)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="none"
@@ -93,10 +78,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,80 L 500,80"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,100)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="none"
@@ -104,10 +89,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,100 L 500,100"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,120)">
+                <g>
                   <path
                     id="g-svg-11"
                     fill="none"
@@ -115,10 +100,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,120 L 500,120"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,140)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="none"
@@ -126,10 +111,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,140 L 500,140"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,160)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="none"
@@ -137,10 +122,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,160 L 500,160"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,180)">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="none"
@@ -148,10 +133,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,180 L 500,180"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,200)">
+                <g>
                   <path
                     id="g-svg-15"
                     fill="none"
@@ -159,10 +144,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,200 L 500,200"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,220)">
+                <g>
                   <path
                     id="g-svg-16"
                     fill="none"
@@ -170,10 +155,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,220 L 500,220"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,240)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="none"
@@ -181,10 +166,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,240 L 500,240"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,260)">
+                <g>
                   <path
                     id="g-svg-18"
                     fill="none"
@@ -192,10 +177,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,260 L 500,260"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,280)">
+                <g>
                   <path
                     id="g-svg-19"
                     fill="none"
@@ -203,10 +188,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,280 L 500,280"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,300)">
+                <g>
                   <path
                     id="g-svg-20"
                     fill="none"
@@ -214,10 +199,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,300 L 500,300"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,320)">
+                <g>
                   <path
                     id="g-svg-21"
                     fill="none"
@@ -225,10 +210,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,320 L 500,320"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,340)">
+                <g>
                   <path
                     id="g-svg-22"
                     fill="none"
@@ -236,10 +221,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,340 L 500,340"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,360)">
+                <g>
                   <path
                     id="g-svg-23"
                     fill="none"
@@ -247,10 +232,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,360 L 500,360"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,380)">
+                <g>
                   <path
                     id="g-svg-24"
                     fill="none"
@@ -258,10 +243,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,380 L 500,380"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,400)">
+                <g>
                   <path
                     id="g-svg-25"
                     fill="none"
@@ -269,10 +254,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,400 L 500,400"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,420)">
+                <g>
                   <path
                     id="g-svg-26"
                     fill="none"
@@ -280,10 +265,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,420 L 500,420"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,440)">
+                <g>
                   <path
                     id="g-svg-27"
                     fill="none"
@@ -291,10 +276,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,440 L 500,440"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,460)">
+                <g>
                   <path
                     id="g-svg-28"
                     fill="none"
@@ -302,10 +287,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,460 L 500,460"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,0,480)">
+                <g>
                   <path
                     id="g-svg-29"
                     fill="none"
@@ -313,31 +298,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 500,0"
+                    d="M 0,480 L 500,480"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-4"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-4" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-30"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-31"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-30" fill="none" class="axis-main-group">
+            <g id="g-svg-31" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-32"
                   fill="none"
@@ -351,25 +321,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-33"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-34"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-33" fill="none" class="axis-tick-group" />
+            <g id="g-svg-34" fill="none" class="axis-label-group">
               <g
                 id="g-svg-35"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,0)"
+                transform="matrix(1,0,0,1,-10,0)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-60"
                     fill="rgba(0,0,0,1)"
@@ -392,10 +352,10 @@
               <g
                 id="g-svg-36"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,20)"
+                transform="matrix(1,0,0,1,-10,20)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-61"
                     fill="rgba(0,0,0,1)"
@@ -418,10 +378,10 @@
               <g
                 id="g-svg-37"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,40)"
+                transform="matrix(1,0,0,1,-10,40)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-62"
                     fill="rgba(0,0,0,1)"
@@ -444,10 +404,10 @@
               <g
                 id="g-svg-38"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,60)"
+                transform="matrix(1,0,0,1,-10,60)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-63"
                     fill="rgba(0,0,0,1)"
@@ -470,10 +430,10 @@
               <g
                 id="g-svg-39"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,80)"
+                transform="matrix(1,0,0,1,-10,80)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-64"
                     fill="rgba(0,0,0,1)"
@@ -496,10 +456,10 @@
               <g
                 id="g-svg-40"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,100)"
+                transform="matrix(1,0,0,1,-10,100)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-65"
                     fill="rgba(0,0,0,1)"
@@ -522,10 +482,10 @@
               <g
                 id="g-svg-41"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,120)"
+                transform="matrix(1,0,0,1,-10,120)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-66"
                     fill="rgba(0,0,0,1)"
@@ -548,10 +508,10 @@
               <g
                 id="g-svg-42"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,140)"
+                transform="matrix(1,0,0,1,-10,140)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-67"
                     fill="rgba(0,0,0,1)"
@@ -574,10 +534,10 @@
               <g
                 id="g-svg-43"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,160)"
+                transform="matrix(1,0,0,1,-10,160)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-68"
                     fill="rgba(0,0,0,1)"
@@ -600,10 +560,10 @@
               <g
                 id="g-svg-44"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,180)"
+                transform="matrix(1,0,0,1,-10,180)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-69"
                     fill="rgba(0,0,0,1)"
@@ -626,10 +586,10 @@
               <g
                 id="g-svg-45"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,200)"
+                transform="matrix(1,0,0,1,-10,200)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-70"
                     fill="rgba(0,0,0,1)"
@@ -652,10 +612,10 @@
               <g
                 id="g-svg-46"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,220)"
+                transform="matrix(1,0,0,1,-10,220)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-71"
                     fill="rgba(0,0,0,1)"
@@ -678,10 +638,10 @@
               <g
                 id="g-svg-47"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,240)"
+                transform="matrix(1,0,0,1,-10,240)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-72"
                     fill="rgba(0,0,0,1)"
@@ -704,10 +664,10 @@
               <g
                 id="g-svg-48"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,260)"
+                transform="matrix(1,0,0,1,-10,260)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-73"
                     fill="rgba(0,0,0,1)"
@@ -730,10 +690,10 @@
               <g
                 id="g-svg-49"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,280)"
+                transform="matrix(1,0,0,1,-10,280)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-74"
                     fill="rgba(0,0,0,1)"
@@ -756,10 +716,10 @@
               <g
                 id="g-svg-50"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,300)"
+                transform="matrix(1,0,0,1,-10,300)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-75"
                     fill="rgba(0,0,0,1)"
@@ -782,10 +742,10 @@
               <g
                 id="g-svg-51"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,320)"
+                transform="matrix(1,0,0,1,-10,320)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-76"
                     fill="rgba(0,0,0,1)"
@@ -808,10 +768,10 @@
               <g
                 id="g-svg-52"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,340)"
+                transform="matrix(1,0,0,1,-10,340)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-77"
                     fill="rgba(0,0,0,1)"
@@ -834,10 +794,10 @@
               <g
                 id="g-svg-53"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,360)"
+                transform="matrix(1,0,0,1,-10,360)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-78"
                     fill="rgba(0,0,0,1)"
@@ -860,10 +820,10 @@
               <g
                 id="g-svg-54"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,380)"
+                transform="matrix(1,0,0,1,-10,380)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-79"
                     fill="rgba(0,0,0,1)"
@@ -886,10 +846,10 @@
               <g
                 id="g-svg-55"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,400)"
+                transform="matrix(1,0,0,1,-10,400)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-80"
                     fill="rgba(0,0,0,1)"
@@ -912,10 +872,10 @@
               <g
                 id="g-svg-56"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,420)"
+                transform="matrix(1,0,0,1,-10,420)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-81"
                     fill="rgba(0,0,0,1)"
@@ -938,10 +898,10 @@
               <g
                 id="g-svg-57"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,440)"
+                transform="matrix(1,0,0,1,-10,440)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-82"
                     fill="rgba(0,0,0,1)"
@@ -964,10 +924,10 @@
               <g
                 id="g-svg-58"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,460)"
+                transform="matrix(1,0,0,1,-10,460)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-83"
                     fill="rgba(0,0,0,1)"
@@ -990,10 +950,10 @@
               <g
                 id="g-svg-59"
                 fill="none"
-                transform="matrix(-0,-1,1,-0,-10,480)"
+                transform="matrix(1,0,0,1,-10,480)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g transform="matrix(-0,-1,1,-0,0,0)">
                   <text
                     id="g-svg-84"
                     fill="rgba(0,0,0,1)"
@@ -1015,33 +975,13 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-85"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-85" fill="none" class="axis-title-group" />
         </g>
-        <g id="g-svg-84" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-86"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-grid-group"
-          >
-            <g
-              id="g-svg-87"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid"
-            >
-              <g
-                id="g-svg-88"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-84" fill="none">
+          <g id="g-svg-86" fill="none" class="axis-grid-group">
+            <g id="g-svg-87" fill="none" class="axis-grid">
+              <g id="g-svg-88" fill="none" class="grid-line-group">
+                <g>
                   <path
                     id="g-svg-90"
                     fill="none"
@@ -1052,7 +992,7 @@
                     d="M 0,0 L 0,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,20,0)">
+                <g>
                   <path
                     id="g-svg-91"
                     fill="none"
@@ -1060,10 +1000,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 20,0 L 20,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,40,0)">
+                <g>
                   <path
                     id="g-svg-92"
                     fill="none"
@@ -1071,10 +1011,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 40,0 L 40,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,60,0)">
+                <g>
                   <path
                     id="g-svg-93"
                     fill="none"
@@ -1082,10 +1022,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 60,0 L 60,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,80,0)">
+                <g>
                   <path
                     id="g-svg-94"
                     fill="none"
@@ -1093,10 +1033,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 80,0 L 80,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,100,0)">
+                <g>
                   <path
                     id="g-svg-95"
                     fill="none"
@@ -1104,10 +1044,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 100,0 L 100,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,120,0)">
+                <g>
                   <path
                     id="g-svg-96"
                     fill="none"
@@ -1115,10 +1055,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 120,0 L 120,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,140,0)">
+                <g>
                   <path
                     id="g-svg-97"
                     fill="none"
@@ -1126,10 +1066,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 140,0 L 140,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,160,0)">
+                <g>
                   <path
                     id="g-svg-98"
                     fill="none"
@@ -1137,10 +1077,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 160,0 L 160,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,180,0)">
+                <g>
                   <path
                     id="g-svg-99"
                     fill="none"
@@ -1148,10 +1088,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 180,0 L 180,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,200,0)">
+                <g>
                   <path
                     id="g-svg-100"
                     fill="none"
@@ -1159,10 +1099,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 200,0 L 200,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,220,0)">
+                <g>
                   <path
                     id="g-svg-101"
                     fill="none"
@@ -1170,10 +1110,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 220,0 L 220,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,240,0)">
+                <g>
                   <path
                     id="g-svg-102"
                     fill="none"
@@ -1181,10 +1121,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 240,0 L 240,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,260,0)">
+                <g>
                   <path
                     id="g-svg-103"
                     fill="none"
@@ -1192,10 +1132,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 260,0 L 260,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,280,0)">
+                <g>
                   <path
                     id="g-svg-104"
                     fill="none"
@@ -1203,10 +1143,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 280,0 L 280,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,300,0)">
+                <g>
                   <path
                     id="g-svg-105"
                     fill="none"
@@ -1214,10 +1154,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 300,0 L 300,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,320,0)">
+                <g>
                   <path
                     id="g-svg-106"
                     fill="none"
@@ -1225,10 +1165,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 320,0 L 320,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,340,0)">
+                <g>
                   <path
                     id="g-svg-107"
                     fill="none"
@@ -1236,10 +1176,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 340,0 L 340,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,360,0)">
+                <g>
                   <path
                     id="g-svg-108"
                     fill="none"
@@ -1247,10 +1187,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 360,0 L 360,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,380,0)">
+                <g>
                   <path
                     id="g-svg-109"
                     fill="none"
@@ -1258,10 +1198,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 380,0 L 380,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,400,0)">
+                <g>
                   <path
                     id="g-svg-110"
                     fill="none"
@@ -1269,10 +1209,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 400,0 L 400,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,420,0)">
+                <g>
                   <path
                     id="g-svg-111"
                     fill="none"
@@ -1280,10 +1220,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 420,0 L 420,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,440,0)">
+                <g>
                   <path
                     id="g-svg-112"
                     fill="none"
@@ -1291,10 +1231,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 440,0 L 440,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,460,0)">
+                <g>
                   <path
                     id="g-svg-113"
                     fill="none"
@@ -1302,10 +1242,10 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 460,0 L 460,500"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,480,0)">
+                <g>
                   <path
                     id="g-svg-114"
                     fill="none"
@@ -1313,31 +1253,16 @@
                     stroke="rgba(211,211,211,1)"
                     stroke-width="1"
                     stroke-dasharray="4,4"
-                    d="M 0,0 L 0,500"
+                    d="M 480,0 L 480,500"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-89"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="grid-region-group"
-              />
+              <g id="g-svg-89" fill="none" class="grid-region-group" />
             </g>
           </g>
-          <g
-            id="g-svg-115"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-main-group"
-          >
-            <g
-              id="g-svg-116"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-line-group"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-115" fill="none" class="axis-main-group">
+            <g id="g-svg-116" fill="none" class="axis-line-group">
+              <g>
                 <line
                   id="g-svg-117"
                   fill="none"
@@ -1351,25 +1276,15 @@
                 />
               </g>
             </g>
-            <g
-              id="g-svg-118"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-tick-group"
-            />
-            <g
-              id="g-svg-119"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-label-group"
-            >
+            <g id="g-svg-118" fill="none" class="axis-tick-group" />
+            <g id="g-svg-119" fill="none" class="axis-label-group">
               <g
                 id="g-svg-120"
                 fill="none"
                 transform="matrix(1,0,0,1,0,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-145"
                     fill="rgba(0,0,0,1)"
@@ -1396,7 +1311,7 @@
                 transform="matrix(1,0,0,1,20,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-146"
                     fill="rgba(0,0,0,1)"
@@ -1423,7 +1338,7 @@
                 transform="matrix(1,0,0,1,40,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-147"
                     fill="rgba(0,0,0,1)"
@@ -1450,7 +1365,7 @@
                 transform="matrix(1,0,0,1,60,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-148"
                     fill="rgba(0,0,0,1)"
@@ -1477,7 +1392,7 @@
                 transform="matrix(1,0,0,1,80,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-149"
                     fill="rgba(0,0,0,1)"
@@ -1504,7 +1419,7 @@
                 transform="matrix(1,0,0,1,100,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-150"
                     fill="rgba(0,0,0,1)"
@@ -1531,7 +1446,7 @@
                 transform="matrix(1,0,0,1,120,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-151"
                     fill="rgba(0,0,0,1)"
@@ -1558,7 +1473,7 @@
                 transform="matrix(1,0,0,1,140,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-152"
                     fill="rgba(0,0,0,1)"
@@ -1585,7 +1500,7 @@
                 transform="matrix(1,0,0,1,160,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-153"
                     fill="rgba(0,0,0,1)"
@@ -1612,7 +1527,7 @@
                 transform="matrix(1,0,0,1,180,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-154"
                     fill="rgba(0,0,0,1)"
@@ -1639,7 +1554,7 @@
                 transform="matrix(1,0,0,1,200,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-155"
                     fill="rgba(0,0,0,1)"
@@ -1666,7 +1581,7 @@
                 transform="matrix(1,0,0,1,220,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-156"
                     fill="rgba(0,0,0,1)"
@@ -1693,7 +1608,7 @@
                 transform="matrix(1,0,0,1,240,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-157"
                     fill="rgba(0,0,0,1)"
@@ -1720,7 +1635,7 @@
                 transform="matrix(1,0,0,1,260,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-158"
                     fill="rgba(0,0,0,1)"
@@ -1747,7 +1662,7 @@
                 transform="matrix(1,0,0,1,280,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-159"
                     fill="rgba(0,0,0,1)"
@@ -1774,7 +1689,7 @@
                 transform="matrix(1,0,0,1,300,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-160"
                     fill="rgba(0,0,0,1)"
@@ -1801,7 +1716,7 @@
                 transform="matrix(1,0,0,1,320,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-161"
                     fill="rgba(0,0,0,1)"
@@ -1828,7 +1743,7 @@
                 transform="matrix(1,0,0,1,340,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-162"
                     fill="rgba(0,0,0,1)"
@@ -1855,7 +1770,7 @@
                 transform="matrix(1,0,0,1,360,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-163"
                     fill="rgba(0,0,0,1)"
@@ -1882,7 +1797,7 @@
                 transform="matrix(1,0,0,1,380,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-164"
                     fill="rgba(0,0,0,1)"
@@ -1909,7 +1824,7 @@
                 transform="matrix(1,0,0,1,400,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-165"
                     fill="rgba(0,0,0,1)"
@@ -1936,7 +1851,7 @@
                 transform="matrix(1,0,0,1,420,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-166"
                     fill="rgba(0,0,0,1)"
@@ -1963,7 +1878,7 @@
                 transform="matrix(1,0,0,1,440,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-167"
                     fill="rgba(0,0,0,1)"
@@ -1990,7 +1905,7 @@
                 transform="matrix(1,0,0,1,460,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-168"
                     fill="rgba(0,0,0,1)"
@@ -2017,7 +1932,7 @@
                 transform="matrix(1,0,0,1,480,-10)"
                 class="axis-label"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <text
                     id="g-svg-169"
                     fill="rgba(0,0,0,1)"
@@ -2040,20 +1955,9 @@
               </g>
             </g>
           </g>
-          <g
-            id="g-svg-170"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="axis-title-group"
-          />
+          <g id="g-svg-170" fill="none" class="axis-title-group" />
         </g>
-        <g
-          id="g-svg-85"
-          fill="none"
-          width="300"
-          height="300"
-          transform="matrix(1,0,0,1,0,0)"
-        >
+        <g id="g-svg-85" fill="none" width="300" height="300">
           <g
             id="g-svg-86"
             fill="none"
@@ -2061,81 +1965,61 @@
             height="300"
             transform="matrix(1,0,0,1,50.400002,0)"
           >
-            <g
-              id="g-svg-171"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-title-group"
-            >
+            <g id="g-svg-171" fill="none" class="legend-title-group">
               <g
                 id="g-svg-172"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
                 class="legend-title"
               />
             </g>
-            <g
-              id="g-svg-173"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="legend-items-group"
-            >
+            <g id="g-svg-173" fill="none" class="legend-items-group">
               <g
                 id="g-svg-174"
                 fill="none"
                 width="400"
                 height="300"
-                transform="matrix(1,0,0,1,0,0)"
+                x="0"
+                y="0"
                 class="legend-items"
               >
                 <g
                   id="g-svg-175"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
+                  x="0"
+                  y="0"
                   class="items-navigator"
                 >
                   <g
                     id="g-svg-176"
                     fill="none"
                     class="navigator-content-group"
-                    transform="matrix(1,0,0,1,0,0)"
                     clip-path="url(#clip-path-250-176)"
                   >
-                    <g
-                      id="g-svg-177"
-                      fill="none"
-                      class="navigator-play-window"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g
-                        id="g-svg-235"
-                        fill="none"
-                        class="items-item-page"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
+                    <g id="g-svg-177" fill="none" class="navigator-play-window">
+                      <g id="g-svg-235" fill="none" class="items-item-page">
                         <g
                           id="g-svg-179"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,0)"
                           class="items-item"
-                          width="93.8"
+                          x="0"
+                          y="0"
+                          width="93.80000000000001"
                           height="23"
                         >
                           <g
                             id="g-svg-185"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-186"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 93.8,0 l 0,23 l-93.8 0 z"
-                                width="93.8"
+                                d="M 0,0 l 93.80000000000001,0 l 0,23 l-93.80000000000001 0 z"
+                                width="93.80000000000001"
                                 height="23"
                                 visibility="visible"
                               />
@@ -2144,16 +2028,13 @@
                           <g
                             id="g-svg-180"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-181"
                                 fill="rgba(160,174,198,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -2163,10 +2044,10 @@
                           <g
                             id="g-svg-182"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-183"
                                 fill="rgba(100,100,100,1)"
@@ -2190,31 +2071,31 @@
                           <g
                             id="g-svg-184"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-187"
                           fill="none"
-                          transform="matrix(1,0,0,1,98.800003,0)"
                           class="items-item"
-                          width="87.08"
+                          x="98.80000000000001"
+                          y="0"
+                          width="87.07999999999998"
                           height="23"
+                          transform="matrix(1,0,0,1,98.800003,0)"
                         >
                           <g
                             id="g-svg-193"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-194"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 87.08,0 l 0,23 l-87.08 0 z"
-                                width="87.08"
+                                d="M 0,0 l 87.07999999999998,0 l 0,23 l-87.07999999999998 0 z"
+                                width="87.07999999999998"
                                 height="23"
                                 visibility="visible"
                               />
@@ -2223,16 +2104,13 @@
                           <g
                             id="g-svg-188"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-189"
                                 fill="rgba(144,143,169,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -2242,10 +2120,10 @@
                           <g
                             id="g-svg-190"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-191"
                                 fill="rgba(100,100,100,1)"
@@ -2269,31 +2147,31 @@
                           <g
                             id="g-svg-192"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-195"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,23)"
                           class="items-item"
-                          width="92.48"
+                          x="0"
+                          y="23"
+                          width="92.48000000000002"
                           height="23"
+                          transform="matrix(1,0,0,1,0,23)"
                         >
                           <g
                             id="g-svg-201"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-202"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 92.48,0 l 0,23 l-92.48 0 z"
-                                width="92.48"
+                                d="M 0,0 l 92.48000000000002,0 l 0,23 l-92.48000000000002 0 z"
+                                width="92.48000000000002"
                                 height="23"
                                 visibility="visible"
                               />
@@ -2302,16 +2180,13 @@
                           <g
                             id="g-svg-196"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-197"
                                 fill="rgba(127,113,140,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -2321,10 +2196,10 @@
                           <g
                             id="g-svg-198"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-199"
                                 fill="rgba(100,100,100,1)"
@@ -2348,31 +2223,31 @@
                           <g
                             id="g-svg-200"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-203"
                           fill="none"
-                          transform="matrix(1,0,0,1,97.480003,23)"
                           class="items-item"
-                          width="94.99999999999999"
+                          x="97.48000000000002"
+                          y="23"
+                          width="95"
                           height="23"
+                          transform="matrix(1,0,0,1,97.480003,23)"
                         >
                           <g
                             id="g-svg-209"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-210"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 94.99999999999999,0 l 0,23 l-94.99999999999999 0 z"
-                                width="94.99999999999999"
+                                d="M 0,0 l 95,0 l 0,23 l-95 0 z"
+                                width="95"
                                 height="23"
                                 visibility="visible"
                               />
@@ -2381,16 +2256,13 @@
                           <g
                             id="g-svg-204"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-205"
                                 fill="rgba(110,82,113,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -2400,10 +2272,10 @@
                           <g
                             id="g-svg-206"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-207"
                                 fill="rgba(100,100,100,1)"
@@ -2427,31 +2299,31 @@
                           <g
                             id="g-svg-208"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-211"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,46)"
                           class="items-item"
-                          width="96.92"
+                          x="0"
+                          y="46"
+                          width="96.92000000000002"
                           height="23"
+                          transform="matrix(1,0,0,1,0,46)"
                         >
                           <g
                             id="g-svg-217"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-218"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 96.92,0 l 0,23 l-96.92 0 z"
-                                width="96.92"
+                                d="M 0,0 l 96.92000000000002,0 l 0,23 l-96.92000000000002 0 z"
+                                width="96.92000000000002"
                                 height="23"
                                 visibility="visible"
                               />
@@ -2460,16 +2332,13 @@
                           <g
                             id="g-svg-212"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-213"
                                 fill="rgba(156,104,97,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -2479,10 +2348,10 @@
                           <g
                             id="g-svg-214"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-215"
                                 fill="rgba(100,100,100,1)"
@@ -2506,31 +2375,31 @@
                           <g
                             id="g-svg-216"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-219"
                           fill="none"
-                          transform="matrix(1,0,0,1,101.919998,46)"
                           class="items-item"
-                          width="97.27999999999999"
+                          x="101.92000000000002"
+                          y="46"
+                          width="97.27999999999997"
                           height="23"
+                          transform="matrix(1,0,0,1,101.919998,46)"
                         >
                           <g
                             id="g-svg-225"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-226"
                                 fill="none"
                                 class="legend-category-item-background"
-                                d="M 0,0 l 97.27999999999999,0 l 0,23 l-97.27999999999999 0 z"
-                                width="97.27999999999999"
+                                d="M 0,0 l 97.27999999999997,0 l 0,23 l-97.27999999999997 0 z"
+                                width="97.27999999999997"
                                 height="23"
                                 visibility="visible"
                               />
@@ -2539,16 +2408,13 @@
                           <g
                             id="g-svg-220"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-221"
                                 fill="rgba(198,127,81,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -2558,10 +2424,10 @@
                           <g
                             id="g-svg-222"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-223"
                                 fill="rgba(100,100,100,1)"
@@ -2585,25 +2451,25 @@
                           <g
                             id="g-svg-224"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                         <g
                           id="g-svg-227"
                           fill="none"
-                          transform="matrix(1,0,0,1,0,69)"
                           class="items-item"
+                          x="0"
+                          y="69"
                           width="118.75999999999999"
                           height="23"
+                          transform="matrix(1,0,0,1,0,69)"
                         >
                           <g
                             id="g-svg-233"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-background-group"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <path
                                 id="g-svg-234"
                                 fill="none"
@@ -2618,16 +2484,13 @@
                           <g
                             id="g-svg-228"
                             fill="none"
-                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                             class="legend-category-item-marker-group"
+                            transform="matrix(0.833333,0,0,0.833333,5,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <circle
                                 id="g-svg-229"
                                 fill="rgba(240,151,64,1)"
-                                transform="translate(-6,-6)"
-                                cx="6"
-                                cy="6"
                                 r="6"
                                 class="legend-category-item-marker"
                                 visibility="visible"
@@ -2637,10 +2500,10 @@
                           <g
                             id="g-svg-230"
                             fill="none"
-                            transform="matrix(1,0,0,1,10,11.500000)"
                             class="legend-category-item-label-group"
+                            transform="matrix(1,0,0,1,10,11.500000)"
                           >
-                            <g transform="matrix(1,0,0,1,0,0)">
+                            <g>
                               <text
                                 id="g-svg-231"
                                 fill="rgba(100,100,100,1)"
@@ -2664,26 +2527,20 @@
                           <g
                             id="g-svg-232"
                             fill="none"
-                            transform="matrix(1,0,0,1,0,0)"
                             class="legend-category-item-value-group"
                           />
                         </g>
                       </g>
                     </g>
                   </g>
-                  <g
-                    id="g-svg-178"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="navigator-controller"
-                  />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-178" fill="none" class="navigator-controller" />
+                  <g>
                     <path
                       id="g-svg-250"
                       fill="none"
-                      d="M 0,0 l 199.19999820868173,0 l 0,92 l-199.19999820868173 0 z"
+                      d="M 0,0 l 199.19999816894529,0 l 0,92 l-199.19999816894529 0 z"
                       class="navigator-clip-path"
-                      width="199.19999820868173"
+                      width="199.19999816894529"
                       height="92"
                     />
                   </g>
diff --git a/__tests__/integration/snapshots/Marker1.svg b/__tests__/integration/snapshots/Marker1.svg
index 0b0cee194..ad327ef5f 100644
--- a/__tests__/integration/snapshots/Marker1.svg
+++ b/__tests__/integration/snapshots/Marker1.svg
@@ -6,280 +6,418 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-13" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,20,150)">
-          <g transform="matrix(1,0,0,1,-8,-8)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-13" fill="none">
+        <g
+          id="g-svg-14"
+          fill="none"
+          x="20"
+          y="150"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,111.923876,29.791846)"
+        >
+          <g>
             <path
               id="g-svg-1"
               fill="none"
               class="marker path-marker"
-              d="M 0,0 L 16,16 M 16,0 L 0,16"
+              d="M 12,142 L 28,158 M 28,142 L 12,158"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,70,150)">
-          <g transform="matrix(1,0,0,1,-8,0)">
+        <g
+          id="g-svg-15"
+          fill="none"
+          x="70"
+          y="150"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,126.568537,-5.563491)"
+        >
+          <g>
             <path
               id="g-svg-2"
               fill="none"
               class="marker path-marker"
-              d="M 0,0 L 16,0"
+              d="M 62,150 L 78,150"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-16" fill="none" transform="matrix(1,0,0,1,120,150)">
-          <g transform="matrix(1,0,0,1,0,-8)">
+        <g
+          id="g-svg-16"
+          fill="none"
+          x="120"
+          y="150"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,141.213197,-40.918828)"
+        >
+          <g>
             <path
               id="g-svg-3"
               fill="none"
               class="marker path-marker"
-              d="M 0,16 L 0,0"
+              d="M 120,158 L 120,142"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-17" fill="none" transform="matrix(1,0,0,1,170,150)">
-          <g transform="matrix(1,0,0,1,-8,-8)">
+        <g
+          id="g-svg-17"
+          fill="none"
+          x="170"
+          y="150"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,155.857858,-76.274166)"
+        >
+          <g>
             <path
               id="g-svg-4"
               fill="none"
               class="marker path-marker"
-              d="M 0,8 L 16,8 M 8,0 L 8,16"
+              d="M 162,150 L 178,150 M 170,142 L 170,158"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,220,150)">
-          <g transform="matrix(1,0,0,1,-4,-8)">
+        <g
+          id="g-svg-18"
+          fill="none"
+          x="220"
+          y="150"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,170.502518,-111.629503)"
+        >
+          <g>
             <path
               id="g-svg-5"
               fill="none"
               class="marker path-marker"
-              d="M 0,0 L 8,0 M 4,0 L 4,16 M 0,16 L 8,16"
+              d="M 216,142 L 224,142 M 220,142 L 220,158 M 216,158 L 224,158"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-19" fill="none" transform="matrix(1,0,0,1,270,150)">
-          <g transform="matrix(1,0,0,1,-8,-8)">
+        <g
+          id="g-svg-19"
+          fill="none"
+          x="270"
+          y="150"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,185.147179,-146.984841)"
+        >
+          <g>
             <path
               id="g-svg-6"
               fill="none"
               class="marker path-marker"
-              d="M 0,8 A 8 8 0 1 0 16 8 A 8 8 0 1 0 0 8 Z"
+              d="M 262,150 A 8 8 0 1 0 278 150 A 8 8 0 1 0 262 150 Z"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-20" fill="none" transform="matrix(1,0,0,1,320,150)">
-          <g transform="matrix(1,0,0,1,-8,-8)">
+        <g
+          id="g-svg-20"
+          fill="none"
+          x="320"
+          y="150"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,199.791839,-182.340178)"
+        >
+          <g>
             <path
               id="g-svg-7"
               fill="none"
               class="marker path-marker"
-              d="M 0,8 A 8 8 0 1 0 16 8 A 8 8 0 1 0 0 8 Z"
+              d="M 312,150 A 8 8 0 1 0 328 150 A 8 8 0 1 0 312 150 Z"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,370,150)">
-          <g transform="matrix(1,0,0,1,-8,-6.500000)">
+        <g
+          id="g-svg-21"
+          fill="none"
+          x="370"
+          y="150"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,214.436500,-217.695515)"
+        >
+          <g>
             <path
               id="g-svg-8"
               fill="none"
               class="marker path-marker"
-              d="M 0,0 L 16,13 L 16,0 L 0,13 Z"
+              d="M 362,143.5 L 378,156.5 L 378,143.5 L 362,156.5 Z"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-22" fill="none" transform="matrix(1,0,0,1,420,150)">
-          <g transform="matrix(1,0,0,1,-6.928203,-8)">
+        <g
+          id="g-svg-22"
+          fill="none"
+          x="420"
+          y="150"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,229.081160,-253.050853)"
+        >
+          <g>
             <path
               id="g-svg-9"
               fill="none"
               class="marker path-marker"
-              d="M 6.928203230275509,0 L 13.856406460551018,4 L 13.856406460551018,12 L 6.928203230275509,16 L 0,12 L 0,4 Z"
+              d="M 420,142 L 426.9282032302755,146 L 426.9282032302755,154 L 420,158 L 413.0717967697245,154 L 413.0717967697245,146 Z"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-23" fill="none" transform="matrix(1,0,0,1,470,150)">
-          <g transform="matrix(1,0,0,1,-8,-8)">
+        <g
+          id="g-svg-23"
+          fill="none"
+          x="470"
+          y="150"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,243.725821,-288.406190)"
+        >
+          <g>
             <path
               id="g-svg-10"
               fill="none"
               class="marker path-marker"
-              d="M 0,0 L 16,0 L 16,16 L 0,16 Z"
+              d="M 462,142 L 478,142 L 478,158 L 462,158 Z"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-24" fill="none" transform="matrix(1,0,0,1,20,200)">
-          <g transform="matrix(1,0,0,1,-8,-8)">
+        <g
+          id="g-svg-24"
+          fill="none"
+          x="20"
+          y="200"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,147.279214,44.436507)"
+        >
+          <g>
             <path
               id="g-svg-11"
               fill="none"
               class="marker path-marker"
-              d="M 0,8 L 8,0 L 16,8 L 8,16 Z"
+              d="M 12,200 L 20,192 L 28,200 L 20,208 Z"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-25" fill="none" transform="matrix(1,0,0,1,70,200)">
-          <g transform="matrix(1,0,0,1,-8,-6.928203)">
+        <g
+          id="g-svg-25"
+          fill="none"
+          x="70"
+          y="200"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,161.923874,9.081169)"
+        >
+          <g>
             <path
               id="g-svg-12"
               fill="none"
               class="marker path-marker"
-              d="M 0,13.856406460551018 L 8,0 L 16,13.856406460551018 Z"
+              d="M 62,206.9282032302755 L 70,193.0717967697245 L 78,206.9282032302755 Z"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,120,200)">
-          <g transform="matrix(1,0,0,1,-8,-6.928203)">
+        <g
+          id="g-svg-26"
+          fill="none"
+          x="120"
+          y="200"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,176.568535,-26.274168)"
+        >
+          <g>
             <path
               id="g-svg-13"
               fill="none"
               class="marker path-marker"
-              d="M 0,0 L 16,0 L 8,13.856406460551018 Z"
+              d="M 112,193.0717967697245 L 128,193.0717967697245 L 120,206.9282032302755 Z"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-27" fill="none" transform="matrix(1,0,0,1,170,200)">
-          <g transform="matrix(1,0,0,1,-8,0)">
+        <g
+          id="g-svg-27"
+          fill="none"
+          x="170"
+          y="200"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,191.213195,-61.629505)"
+        >
+          <g>
             <path
               id="g-svg-14"
               fill="none"
               class="marker path-marker"
-              d="M 0,0 L 16,0"
+              d="M 162,200 L 178,200"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-28" fill="none" transform="matrix(1,0,0,1,220,200)">
-          <g transform="matrix(1,0,0,1,-8,0)">
+        <g
+          id="g-svg-28"
+          fill="none"
+          x="220"
+          y="200"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,205.857856,-96.984843)"
+        >
+          <g>
             <path
               id="g-svg-15"
               fill="none"
               class="marker path-marker"
-              d="M 0,0 L 16,0"
+              d="M 212,200 L 228,200"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-29" fill="none" transform="matrix(1,0,0,1,270,200)">
-          <g transform="matrix(1,0,0,1,-8,-4)">
+        <g
+          id="g-svg-29"
+          fill="none"
+          x="270"
+          y="200"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,220.502516,-132.340180)"
+        >
+          <g>
             <path
               id="g-svg-16"
               fill="none"
               class="marker path-marker"
-              d="M 0,4 A 4 4 0 1 1 8 4 A 4 4 0 1 0 16 4"
+              d="M 262,200 A 4 4 0 1 1 270 200 A 4 4 0 1 0 278 200"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,320,200)">
-          <g transform="matrix(1,0,0,1,-9,-2.500000)">
+        <g
+          id="g-svg-30"
+          fill="none"
+          x="320"
+          y="200"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,235.147177,-167.695518)"
+        >
+          <g>
             <path
               id="g-svg-17"
               fill="none"
               class="marker path-marker"
-              d="M 0,0 L 9,0 L 9,5 L 18,5"
+              d="M 311,197.5 L 320,197.5 L 320,202.5 L 329,202.5"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,370,200)">
-          <g transform="matrix(1,0,0,1,-9,-2.500000)">
+        <g
+          id="g-svg-31"
+          fill="none"
+          x="370"
+          y="200"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,249.791837,-203.050855)"
+        >
+          <g>
             <path
               id="g-svg-18"
               fill="none"
               class="marker path-marker"
-              d="M 0,5 L 9,5 L 9,0 L 18,0"
+              d="M 361,202.5 L 370,202.5 L 370,197.5 L 379,197.5"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-32" fill="none" transform="matrix(1,0,0,1,420,200)">
-          <g transform="matrix(1,0,0,1,-9,-2.500000)">
+        <g
+          id="g-svg-32"
+          fill="none"
+          x="420"
+          y="200"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,264.436498,-238.406192)"
+        >
+          <g>
             <path
               id="g-svg-19"
               fill="none"
               class="marker path-marker"
-              d="M 0,5 L 5,5 L 5,0 L 13,0 L 13,5 L 18,5"
+              d="M 411,202.5 L 416,202.5 L 416,197.5 L 424,197.5 L 424,202.5 L 429,202.5"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-33" fill="none" transform="matrix(1,0,0,1,470,200)">
-          <g transform="matrix(1,0,0,1,-5,-3)">
+        <g
+          id="g-svg-33"
+          fill="none"
+          x="470"
+          y="200"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,279.081158,-273.761530)"
+        >
+          <g>
             <path
               id="g-svg-20"
               fill="none"
               class="marker path-marker"
-              d="M 0,5.5 L 0,3 L 5,3 L 5,0 L 5,6 L 11.5,6"
+              d="M 465,202.5 L 465,200 L 470,200 L 470,197 L 470,203 L 476.5,203"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-34" fill="none" transform="matrix(1,0,0,1,20,250)">
-          <g transform="matrix(1,0,0,1,-8,-11.200000)">
+        <g
+          id="g-svg-34"
+          fill="none"
+          x="20"
+          y="250"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,182.634551,59.081167)"
+        >
+          <g>
             <path
               id="g-svg-21"
               fill="none"
               class="marker path-marker"
-              d="M 0,0 L 16,0 L 16,22.4 L 0,22.4 Z"
+              d="M 12,238.8 L 28,238.8 L 28,261.2 L 12,261.2 Z"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-35" fill="none" transform="matrix(1,0,0,1,70,250)">
-          <g transform="matrix(1,0,0,1,0,-4)">
+        <g
+          id="g-svg-35"
+          fill="none"
+          x="70"
+          y="250"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,197.279212,23.725830)"
+        >
+          <g>
             <path
               id="g-svg-22"
               fill="none"
               class="marker path-marker"
-              d="M 0,4 L 4.4799999999999995,8 L 11.2,8 L 11.2,0 L 4.4799999999999995,0 Z M 4.4799999999999995,5.333333333333333 L 9.2,5.333333333333333 M 4.4799999999999995,2.666666666666667 L 9.2,2.666666666666667"
+              d="M 70,250 L 74.48,254 L 81.2,254 L 81.2,246 L 74.48,246 Z M 74.48,251.33333333333334 L 79.2,251.33333333333334 M 74.48,248.66666666666666 L 79.2,248.66666666666666"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
           </g>
         </g>
-        <g id="g-svg-36" fill="none" transform="matrix(1,0,0,1,120,250)">
-          <g transform="matrix(1,0,0,1,-4,0)">
+        <g
+          id="g-svg-36"
+          fill="none"
+          x="120"
+          y="250"
+          transform="matrix(0.707107,0.707107,-0.707107,0.707107,211.923872,-11.629507)"
+        >
+          <g>
             <path
               id="g-svg-23"
               fill="none"
               class="marker path-marker"
-              d="M 4,0 L 0,4.4799999999999995 L 0,11.2 L 8,11.2 L 8,4.4799999999999995 Z M 2.666666666666667,4.4799999999999995 L 2.666666666666667,9.2 M 5.333333333333333,4.4799999999999995 L 5.333333333333333,9.2"
+              d="M 120,250 L 116,254.48 L 116,261.2 L 124,261.2 L 124,254.48 Z M 118.66666666666667,254.48 L 118.66666666666667,259.2 M 121.33333333333333,254.48 L 121.33333333333333,259.2"
               stroke="rgba(0,0,255,1)"
               stroke-width="2"
             />
diff --git a/__tests__/integration/snapshots/NavigatorDemo.svg b/__tests__/integration/snapshots/NavigatorDemo.svg
index 99153bca8..41ecf09f5 100644
--- a/__tests__/integration/snapshots/NavigatorDemo.svg
+++ b/__tests__/integration/snapshots/NavigatorDemo.svg
@@ -28,31 +28,25 @@
       <use href="#g-svg-49" transform="matrix(1,0,0,1,500,250)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-20"
-        fill="none"
-        width="810"
-        height="350"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,100,100)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-20" fill="none" width="810" height="350">
+        <g
+          id="g-svg-21"
+          fill="none"
+          x="100"
+          y="100"
+          transform="matrix(1,0,0,1,100,100)"
+        >
           <g
             id="g-svg-22"
             fill="none"
             class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
             clip-path="url(#clip-path-1-22)"
           >
-            <g
-              id="g-svg-23"
-              fill="none"
-              class="navigator-play-window"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g id="g-svg-24" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-23" fill="none" class="navigator-play-window">
+              <g id="g-svg-24" fill="none">
+                <g>
                   <path
                     id="g-svg-25"
                     fill="rgba(247,247,247,1)"
@@ -62,12 +56,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-26"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -83,8 +79,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-27" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-27" fill="none">
+                <g>
                   <path
                     id="g-svg-28"
                     fill="rgba(247,247,247,1)"
@@ -94,12 +90,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-29"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -115,8 +113,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-30" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-30" fill="none">
+                <g>
                   <path
                     id="g-svg-31"
                     fill="rgba(247,247,247,1)"
@@ -126,12 +124,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-32"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -147,8 +147,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-33" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-33" fill="none">
+                <g>
                   <path
                     id="g-svg-34"
                     fill="rgba(247,247,247,1)"
@@ -158,12 +158,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-35"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -179,8 +181,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-36" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-36" fill="none">
+                <g>
                   <path
                     id="g-svg-37"
                     fill="rgba(247,247,247,1)"
@@ -190,12 +192,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-38"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -213,7 +217,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-1"
               fill="none"
@@ -232,30 +236,30 @@
             <g
               id="g-svg-3"
               fill="none"
-              transform="matrix(-1,-0,0,-1,0,0)"
               class="navigator-prev-btn-group"
+              transform="matrix(-1,-0,0,-1,0,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-4"
                   fill="rgba(0,0,0,1)"
                   class="navigator-prev-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
             <g
               id="g-svg-5"
               fill="none"
-              transform="matrix(1,0,0,1,40.160000,0)"
               class="navigator-next-btn-group"
+              transform="matrix(1,0,0,1,40.160000,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="rgba(0,0,0,1)"
                   class="navigator-next-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
@@ -265,7 +269,7 @@
               transform="matrix(1,0,0,1,11,0)"
               class="navigator-page-info-group"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-8"
                   fill="rgba(0,0,0,1)"
@@ -282,22 +286,22 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-39" fill="none" transform="matrix(1,0,0,1,300,100)">
+        <g
+          id="g-svg-39"
+          fill="none"
+          x="300"
+          y="100"
+          transform="matrix(1,0,0,1,300,100)"
+        >
           <g
             id="g-svg-40"
             fill="none"
             class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
             clip-path="url(#clip-path-9-40)"
           >
-            <g
-              id="g-svg-41"
-              fill="none"
-              class="navigator-play-window"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g id="g-svg-42" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-41" fill="none" class="navigator-play-window">
+              <g id="g-svg-42" fill="none">
+                <g>
                   <path
                     id="g-svg-43"
                     fill="rgba(247,247,247,1)"
@@ -307,12 +311,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-44"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -328,8 +334,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-45" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-45" fill="none">
+                <g>
                   <path
                     id="g-svg-46"
                     fill="rgba(247,247,247,1)"
@@ -339,12 +345,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-47"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -360,8 +368,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-48" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-48" fill="none">
+                <g>
                   <path
                     id="g-svg-49"
                     fill="rgba(247,247,247,1)"
@@ -371,12 +379,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-50"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -392,8 +402,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-51" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-51" fill="none">
+                <g>
                   <path
                     id="g-svg-52"
                     fill="rgba(247,247,247,1)"
@@ -403,12 +413,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-53"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -424,8 +436,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-54" fill="none">
+                <g>
                   <path
                     id="g-svg-55"
                     fill="rgba(247,247,247,1)"
@@ -435,12 +447,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-56"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -458,7 +472,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-9"
               fill="none"
@@ -477,30 +491,30 @@
             <g
               id="g-svg-11"
               fill="none"
-              transform="matrix(0,-1,1,0,9.080000,-17)"
               class="navigator-prev-btn-group"
+              transform="matrix(0,-1,1,0,9.080000,-17)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-12"
                   fill="rgba(0,0,0,1)"
                   class="navigator-prev-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
             <g
               id="g-svg-13"
               fill="none"
-              transform="matrix(0,1,-1,0,9.080000,17)"
               class="navigator-next-btn-group"
+              transform="matrix(0,1,-1,0,9.080000,17)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-14"
                   fill="rgba(0,0,0,1)"
                   class="navigator-next-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
@@ -510,7 +524,7 @@
               transform="matrix(1,0,0,1,9.080000,0)"
               class="navigator-page-info-group"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-16"
                   fill="rgba(0,0,0,1)"
@@ -527,22 +541,22 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-57" fill="none" transform="matrix(1,0,0,1,450,100)">
+        <g
+          id="g-svg-57"
+          fill="none"
+          x="450"
+          y="100"
+          transform="matrix(1,0,0,1,450,100)"
+        >
           <g
             id="g-svg-58"
             fill="none"
             class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
             clip-path="url(#clip-path-17-58)"
           >
-            <g
-              id="g-svg-59"
-              fill="none"
-              class="navigator-play-window"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g id="g-svg-60" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-59" fill="none" class="navigator-play-window">
+              <g id="g-svg-60" fill="none">
+                <g>
                   <path
                     id="g-svg-61"
                     fill="rgba(247,247,247,1)"
@@ -552,12 +566,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-62"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -573,8 +589,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-63" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-63" fill="none">
+                <g>
                   <path
                     id="g-svg-64"
                     fill="rgba(247,247,247,1)"
@@ -584,12 +600,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-65"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -605,8 +623,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-66" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-66" fill="none">
+                <g>
                   <path
                     id="g-svg-67"
                     fill="rgba(247,247,247,1)"
@@ -616,12 +634,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-68"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -637,8 +657,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-69" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-69" fill="none">
+                <g>
                   <path
                     id="g-svg-70"
                     fill="rgba(247,247,247,1)"
@@ -648,12 +668,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-71"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -669,8 +691,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-72" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-72" fill="none">
+                <g>
                   <path
                     id="g-svg-73"
                     fill="rgba(247,247,247,1)"
@@ -680,12 +702,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-74"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -703,7 +727,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-17"
               fill="none"
@@ -722,30 +746,30 @@
             <g
               id="g-svg-19"
               fill="none"
-              transform="matrix(-1,-0,0,-1,0,0)"
               class="navigator-prev-btn-group"
+              transform="matrix(-1,-0,0,-1,0,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="rgba(0,0,0,1)"
                   class="navigator-prev-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
             <g
               id="g-svg-21"
               fill="none"
-              transform="matrix(1,0,0,1,40.160000,0)"
               class="navigator-next-btn-group"
+              transform="matrix(1,0,0,1,40.160000,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-22"
                   fill="rgba(0,0,0,1)"
                   class="navigator-next-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
@@ -755,7 +779,7 @@
               transform="matrix(1,0,0,1,11,0)"
               class="navigator-page-info-group"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-24"
                   fill="rgba(0,0,0,1)"
@@ -772,12 +796,17 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-75" fill="none" transform="matrix(1,0,0,1,650,100)">
+        <g
+          id="g-svg-75"
+          fill="none"
+          x="650"
+          y="100"
+          transform="matrix(1,0,0,1,650,100)"
+        >
           <g
             id="g-svg-76"
             fill="none"
             class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
             clip-path="url(#clip-path-25-76)"
           >
             <g
@@ -786,8 +815,8 @@
               class="navigator-play-window"
               transform="matrix(1,0,0,1,0,-100)"
             >
-              <g id="g-svg-78" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-78" fill="none">
+                <g>
                   <path
                     id="g-svg-79"
                     fill="rgba(247,247,247,1)"
@@ -797,12 +826,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-80"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -818,8 +849,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-81" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-81" fill="none">
+                <g>
                   <path
                     id="g-svg-82"
                     fill="rgba(247,247,247,1)"
@@ -829,12 +860,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-83"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -850,8 +883,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-84" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-84" fill="none">
+                <g>
                   <path
                     id="g-svg-85"
                     fill="rgba(247,247,247,1)"
@@ -861,12 +894,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-86"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -883,7 +918,7 @@
                 </g>
               </g>
               <g id="g-svg-87" fill="none" transform="matrix(1,0,0,1,0,100)">
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-88"
                     fill="rgba(247,247,247,1)"
@@ -893,12 +928,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-89"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -914,8 +951,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-90" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-90" fill="none">
+                <g>
                   <path
                     id="g-svg-91"
                     fill="rgba(247,247,247,1)"
@@ -925,12 +962,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-92"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -948,7 +987,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-25"
               fill="none"
@@ -967,40 +1006,40 @@
             <g
               id="g-svg-27"
               fill="none"
-              transform="matrix(0,-1,1,0,10.160000,-17)"
               class="navigator-prev-btn-group"
+              transform="matrix(0,-1,1,0,10.160000,-17)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-28"
                   fill="rgba(0,0,0,1)"
                   class="navigator-prev-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
             <g
               id="g-svg-29"
               fill="none"
-              transform="matrix(0,1,-1,0,10.160000,17)"
               class="navigator-next-btn-group"
+              transform="matrix(0,1,-1,0,10.160000,17)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-30"
                   fill="rgba(0,0,0,1)"
                   class="navigator-next-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
             <g
               id="g-svg-31"
               fill="none"
-              transform="matrix(1,0,0,1,10.160000,0)"
               class="navigator-page-info-group"
+              transform="matrix(1,0,0,1,10.160000,0)"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-32"
                   fill="rgba(0,0,0,1)"
@@ -1017,12 +1056,17 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-93" fill="none" transform="matrix(1,0,0,1,100,250)">
+        <g
+          id="g-svg-93"
+          fill="none"
+          x="100"
+          y="250"
+          transform="matrix(1,0,0,1,100,250)"
+        >
           <g
             id="g-svg-94"
             fill="none"
             class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
             clip-path="url(#clip-path-33-94)"
           >
             <g
@@ -1031,8 +1075,8 @@
               class="navigator-play-window"
               transform="matrix(1,0,0,1,-100,0)"
             >
-              <g id="g-svg-96" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-96" fill="none">
+                <g>
                   <path
                     id="g-svg-97"
                     fill="rgba(247,247,247,1)"
@@ -1042,12 +1086,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-98"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1063,8 +1109,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-99" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-99" fill="none">
+                <g>
                   <path
                     id="g-svg-100"
                     fill="rgba(247,247,247,1)"
@@ -1074,12 +1120,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-101"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1095,8 +1143,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-102" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-102" fill="none">
+                <g>
                   <path
                     id="g-svg-103"
                     fill="rgba(247,247,247,1)"
@@ -1106,12 +1154,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-104"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1128,7 +1178,7 @@
                 </g>
               </g>
               <g id="g-svg-105" fill="none" transform="matrix(1,0,0,1,100,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-106"
                     fill="rgba(247,247,247,1)"
@@ -1138,12 +1188,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-107"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1159,8 +1211,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-108" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-108" fill="none">
+                <g>
                   <path
                     id="g-svg-109"
                     fill="rgba(247,247,247,1)"
@@ -1170,12 +1222,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-110"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1193,7 +1247,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-33"
               fill="none"
@@ -1212,30 +1266,30 @@
             <g
               id="g-svg-35"
               fill="none"
-              transform="matrix(-1,-0,0,-1,0,0)"
               class="navigator-prev-btn-group"
+              transform="matrix(-1,-0,0,-1,0,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-36"
                   fill="rgba(0,0,0,1)"
                   class="navigator-prev-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
             <g
               id="g-svg-37"
               fill="none"
-              transform="matrix(1,0,0,1,42.320000,0)"
               class="navigator-next-btn-group"
+              transform="matrix(1,0,0,1,42.320000,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-38"
                   fill="rgba(0,0,0,1)"
                   class="navigator-next-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
@@ -1245,7 +1299,7 @@
               transform="matrix(1,0,0,1,11,0)"
               class="navigator-page-info-group"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-40"
                   fill="rgba(0,0,0,1)"
@@ -1262,12 +1316,17 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-111" fill="none" transform="matrix(1,0,0,1,300,250)">
+        <g
+          id="g-svg-111"
+          fill="none"
+          x="300"
+          y="250"
+          transform="matrix(1,0,0,1,300,250)"
+        >
           <g
             id="g-svg-112"
             fill="none"
             class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
             clip-path="url(#clip-path-41-112)"
           >
             <g
@@ -1276,8 +1335,8 @@
               class="navigator-play-window"
               transform="matrix(1,0,0,1,-100,0)"
             >
-              <g id="g-svg-114" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-114" fill="none">
+                <g>
                   <path
                     id="g-svg-115"
                     fill="rgba(247,247,247,1)"
@@ -1287,12 +1346,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-116"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1308,8 +1369,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-117" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-117" fill="none">
+                <g>
                   <path
                     id="g-svg-118"
                     fill="rgba(247,247,247,1)"
@@ -1319,12 +1380,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-119"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1340,8 +1403,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-120" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-120" fill="none">
+                <g>
                   <path
                     id="g-svg-121"
                     fill="rgba(247,247,247,1)"
@@ -1351,12 +1414,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-122"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1373,7 +1438,7 @@
                 </g>
               </g>
               <g id="g-svg-123" fill="none" transform="matrix(1,0,0,1,100,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-124"
                     fill="rgba(247,247,247,1)"
@@ -1383,12 +1448,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-125"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1404,8 +1471,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-126" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-126" fill="none">
+                <g>
                   <path
                     id="g-svg-127"
                     fill="rgba(247,247,247,1)"
@@ -1415,12 +1482,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-128"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1436,8 +1505,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-129" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-129" fill="none">
+                <g>
                   <path
                     id="g-svg-130"
                     fill="rgba(247,247,247,1)"
@@ -1447,12 +1516,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-131"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1468,8 +1539,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-132" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-132" fill="none">
+                <g>
                   <path
                     id="g-svg-133"
                     fill="rgba(247,247,247,1)"
@@ -1479,12 +1550,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-134"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1500,8 +1573,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-135" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-135" fill="none">
+                <g>
                   <path
                     id="g-svg-136"
                     fill="rgba(247,247,247,1)"
@@ -1511,12 +1584,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-137"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1532,8 +1607,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-138" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-138" fill="none">
+                <g>
                   <path
                     id="g-svg-139"
                     fill="rgba(247,247,247,1)"
@@ -1543,12 +1618,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-140"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1564,8 +1641,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-141" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-141" fill="none">
+                <g>
                   <path
                     id="g-svg-142"
                     fill="rgba(247,247,247,1)"
@@ -1575,12 +1652,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-143"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1596,8 +1675,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-144" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-144" fill="none">
+                <g>
                   <path
                     id="g-svg-145"
                     fill="rgba(247,247,247,1)"
@@ -1607,12 +1686,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-146"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1628,8 +1709,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-147" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-147" fill="none">
+                <g>
                   <path
                     id="g-svg-148"
                     fill="rgba(247,247,247,1)"
@@ -1639,12 +1720,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-149"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1660,8 +1743,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-150" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-150" fill="none">
+                <g>
                   <path
                     id="g-svg-151"
                     fill="rgba(247,247,247,1)"
@@ -1671,12 +1754,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-152"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1692,8 +1777,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-153" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-153" fill="none">
+                <g>
                   <path
                     id="g-svg-154"
                     fill="rgba(247,247,247,1)"
@@ -1703,12 +1788,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-155"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1724,8 +1811,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-156" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-156" fill="none">
+                <g>
                   <path
                     id="g-svg-157"
                     fill="rgba(247,247,247,1)"
@@ -1735,12 +1822,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-158"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1756,8 +1845,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-159" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-159" fill="none">
+                <g>
                   <path
                     id="g-svg-160"
                     fill="rgba(247,247,247,1)"
@@ -1767,12 +1856,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-161"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1788,8 +1879,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-162" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-162" fill="none">
+                <g>
                   <path
                     id="g-svg-163"
                     fill="rgba(247,247,247,1)"
@@ -1799,12 +1890,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-164"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1820,8 +1913,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-165" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-165" fill="none">
+                <g>
                   <path
                     id="g-svg-166"
                     fill="rgba(247,247,247,1)"
@@ -1831,12 +1924,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-167"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1852,8 +1947,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-168" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-168" fill="none">
+                <g>
                   <path
                     id="g-svg-169"
                     fill="rgba(247,247,247,1)"
@@ -1863,12 +1958,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-170"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1884,8 +1981,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-171" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-171" fill="none">
+                <g>
                   <path
                     id="g-svg-172"
                     fill="rgba(247,247,247,1)"
@@ -1895,12 +1992,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-173"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -1918,7 +2017,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-41"
               fill="none"
@@ -1937,30 +2036,30 @@
             <g
               id="g-svg-43"
               fill="none"
-              transform="matrix(-0.800000,-0,0,-0.800000,0,0)"
               class="navigator-prev-btn-group"
+              transform="matrix(-0.800000,-0,0,-0.800000,0,0)"
             >
-              <g transform="matrix(1.250000,0,0,1.250000,-7.500000,-7.500000)">
+              <g transform="matrix(1.250000,0,0,1.250000,0,0)">
                 <path
                   id="g-svg-44"
                   fill="rgba(0,0,0,1)"
                   class="navigator-prev-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
             <g
               id="g-svg-45"
               fill="none"
-              transform="matrix(0.800000,0,0,0.800000,54.360001,0)"
               class="navigator-next-btn-group"
+              transform="matrix(0.800000,0,0,0.800000,54.360001,0)"
             >
-              <g transform="matrix(1.250000,0,0,1.250000,-7.500000,-7.500000)">
+              <g transform="matrix(1.250000,0,0,1.250000,0,0)">
                 <path
                   id="g-svg-46"
                   fill="rgba(0,0,0,1)"
                   class="navigator-next-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
@@ -1970,7 +2069,7 @@
               transform="matrix(1,0,0,1,11,0)"
               class="navigator-page-info-group"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-48"
                   fill="rgba(0,0,0,1)"
@@ -1987,22 +2086,22 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-174" fill="none" transform="matrix(1,0,0,1,500,250)">
+        <g
+          id="g-svg-174"
+          fill="none"
+          x="500"
+          y="250"
+          transform="matrix(1,0,0,1,500,250)"
+        >
           <g
             id="g-svg-175"
             fill="none"
             class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
             clip-path="url(#clip-path-49-175)"
           >
-            <g
-              id="g-svg-176"
-              fill="none"
-              class="navigator-play-window"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g id="g-svg-177" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-176" fill="none" class="navigator-play-window">
+              <g id="g-svg-177" fill="none">
+                <g>
                   <path
                     id="g-svg-178"
                     fill="rgba(247,247,247,1)"
@@ -2012,12 +2111,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-179"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -2035,7 +2136,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-49"
               fill="none"
@@ -2045,12 +2146,7 @@
               height="100"
             />
           </g>
-          <g
-            id="g-svg-50"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="navigator-controller"
-          />
+          <g id="g-svg-50" fill="none" class="navigator-controller" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/NavigatorNull.svg b/__tests__/integration/snapshots/NavigatorNull.svg
index 27dbeab40..eaa8efabe 100644
--- a/__tests__/integration/snapshots/NavigatorNull.svg
+++ b/__tests__/integration/snapshots/NavigatorNull.svg
@@ -6,29 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-4" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-5"
-            fill="none"
-            class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-6"
-              fill="none"
-              class="navigator-play-window"
-              transform="matrix(1,0,0,1,0,0)"
-            />
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-3" fill="none">
+        <g id="g-svg-4" fill="none" x="0" y="0">
+          <g id="g-svg-5" fill="none" class="navigator-content-group">
+            <g id="g-svg-6" fill="none" class="navigator-play-window" />
           </g>
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="navigator-controller"
-          />
+          <g id="g-svg-1" fill="none" class="navigator-controller" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/NavigatorOverPages.svg b/__tests__/integration/snapshots/NavigatorOverPages.svg
index ff21a3b68..3d6e5b219 100644
--- a/__tests__/integration/snapshots/NavigatorOverPages.svg
+++ b/__tests__/integration/snapshots/NavigatorOverPages.svg
@@ -10,21 +10,20 @@
       <use href="#g-svg-1" transform="matrix(1,0,0,1,100,100)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-2"
-        fill="none"
-        width="260"
-        height="200"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,100,100)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-2" fill="none" width="260" height="200">
+        <g
+          id="g-svg-3"
+          fill="none"
+          x="100"
+          y="100"
+          transform="matrix(1,0,0,1,100,100)"
+        >
           <g
             id="g-svg-4"
             fill="none"
             class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
             clip-path="url(#clip-path-1-4)"
           >
             <g
@@ -33,8 +32,8 @@
               class="navigator-play-window"
               transform="matrix(1,0,0,1,-100,0)"
             >
-              <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-6" fill="none">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="rgba(247,247,247,1)"
@@ -44,12 +43,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-8"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -66,7 +67,7 @@
                 </g>
               </g>
               <g id="g-svg-9" fill="none" transform="matrix(1,0,0,1,100,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-10"
                     fill="rgba(247,247,247,1)"
@@ -76,12 +77,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-11"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -99,7 +102,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-1"
               fill="none"
@@ -118,30 +121,30 @@
             <g
               id="g-svg-3"
               fill="none"
-              transform="matrix(-1,-0,0,-1,0,0)"
               class="navigator-prev-btn-group"
+              transform="matrix(-1,-0,0,-1,0,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-4"
                   fill="rgba(0,0,0,1)"
                   class="navigator-prev-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
             <g
               id="g-svg-5"
               fill="none"
-              transform="matrix(1,0,0,1,41.720001,0)"
               class="navigator-next-btn-group"
+              transform="matrix(1,0,0,1,41.720001,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="rgba(0,0,0,1)"
                   class="navigator-next-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
@@ -151,7 +154,7 @@
               transform="matrix(1,0,0,1,11,0)"
               class="navigator-page-info-group"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-8"
                   fill="rgba(0,0,0,1)"
diff --git a/__tests__/integration/snapshots/NavigatorSingle.svg b/__tests__/integration/snapshots/NavigatorSingle.svg
index 0af9a0a5f..99d7cadd4 100644
--- a/__tests__/integration/snapshots/NavigatorSingle.svg
+++ b/__tests__/integration/snapshots/NavigatorSingle.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="200"
-  height="200"
+  width="100"
+  height="100"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -10,25 +10,25 @@
       <use href="#g-svg-1" transform="matrix(1,0,0,1,100,100)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-2" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,100,100)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-2" fill="none">
+        <g
+          id="g-svg-3"
+          fill="none"
+          x="100"
+          y="100"
+          transform="matrix(1,0,0,1,100,100)"
+        >
           <g
             id="g-svg-4"
             fill="none"
             class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
             clip-path="url(#clip-path-1-4)"
           >
-            <g
-              id="g-svg-5"
-              fill="none"
-              class="navigator-play-window"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-5" fill="none" class="navigator-play-window">
+              <g id="g-svg-6" fill="none">
+                <g>
                   <path
                     id="g-svg-7"
                     fill="rgba(247,247,247,1)"
@@ -38,12 +38,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-8"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -61,7 +63,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-1"
               fill="none"
@@ -71,12 +73,7 @@
               height="100"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="navigator-controller"
-          />
+          <g id="g-svg-2" fill="none" class="navigator-controller" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/NavigatorStyle.svg b/__tests__/integration/snapshots/NavigatorStyle.svg
index ec808aec7..0ebe82aa6 100644
--- a/__tests__/integration/snapshots/NavigatorStyle.svg
+++ b/__tests__/integration/snapshots/NavigatorStyle.svg
@@ -6,35 +6,23 @@
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-19-11">
-      <use href="#g-svg-19" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-19-11">
+      <use href="#g-svg-19" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-9"
-        fill="none"
-        width="160"
-        height="100"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-9" fill="none" width="160" height="100">
+        <g id="g-svg-10" fill="none" x="0" y="0">
           <g
             id="g-svg-11"
             fill="none"
             class="navigator-content-group"
             clip-path="url(#clip-path-19-11)"
-            transform="matrix(1,0,0,1,0,0)"
           >
-            <g
-              id="g-svg-12"
-              fill="none"
-              class="navigator-play-window"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g id="g-svg-13" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-12" fill="none" class="navigator-play-window">
+              <g id="g-svg-13" fill="none">
+                <g>
                   <path
                     id="g-svg-14"
                     fill="rgba(247,247,247,1)"
@@ -44,12 +32,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-15"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -65,8 +55,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-16" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-16" fill="none">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="rgba(247,247,247,1)"
@@ -76,12 +66,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-18"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -99,7 +91,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-19"
               fill="none"
@@ -121,11 +113,11 @@
               class="navigator-prev-btn-group"
               transform="matrix(-1,-0,0,-1,0,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-22"
                   fill="rgba(0,0,0,1)"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                   class="navigator-prev-btn"
                   fill-opacity="0.5"
                   visibility="visible"
@@ -138,11 +130,11 @@
               class="navigator-next-btn-group"
               transform="matrix(1,0,0,1,40.040001,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-24"
                   fill="rgba(0,0,0,1)"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                   class="navigator-next-btn"
                   fill-opacity="0.5"
                   visibility="visible"
@@ -155,7 +147,7 @@
               class="navigator-page-info-group"
               transform="matrix(1,0,0,1,11,0)"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-26"
                   fill="rgba(0,0,0,1)"
diff --git a/__tests__/integration/snapshots/NavigatorUpdate.svg b/__tests__/integration/snapshots/NavigatorUpdate.svg
index 2d69a0ff3..085bb4792 100644
--- a/__tests__/integration/snapshots/NavigatorUpdate.svg
+++ b/__tests__/integration/snapshots/NavigatorUpdate.svg
@@ -6,29 +6,14 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-17" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-19"
-            fill="none"
-            class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-20"
-              fill="none"
-              class="navigator-play-window"
-              transform="matrix(1,0,0,1,0,0)"
-            />
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-17" fill="none">
+        <g id="g-svg-18" fill="none" x="0" y="0">
+          <g id="g-svg-19" fill="none" class="navigator-content-group">
+            <g id="g-svg-20" fill="none" class="navigator-play-window" />
           </g>
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="navigator-controller"
-          />
+          <g id="g-svg-1" fill="none" class="navigator-controller" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/NavigatorWithoutShape.svg b/__tests__/integration/snapshots/NavigatorWithoutShape.svg
index adee42469..d08d7abb1 100644
--- a/__tests__/integration/snapshots/NavigatorWithoutShape.svg
+++ b/__tests__/integration/snapshots/NavigatorWithoutShape.svg
@@ -6,7 +6,7 @@
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,-10,-230)" id="clip-path-106-89">
+    <clipPath id="clip-path-106-89" transform="matrix(1,0,0,1,-10,-230)">
       <use href="#g-svg-106" transform="matrix(1,0,0,1,10,230)" />
     </clipPath>
     <clipPath transform="matrix(1,0,0,1,-10,-10)" id="clip-path-1-53">
@@ -16,31 +16,25 @@
       <use href="#g-svg-9" transform="matrix(1,0,0,1,10,120)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-51"
-        fill="none"
-        width="160"
-        height="330"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-52" fill="none" transform="matrix(1,0,0,1,10,10)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none" width="160" height="330">
+        <g
+          id="g-svg-52"
+          fill="none"
+          x="10"
+          y="10"
+          transform="matrix(1,0,0,1,10,10)"
+        >
           <g
             id="g-svg-53"
             fill="none"
             class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
             clip-path="url(#clip-path-1-53)"
           >
-            <g
-              id="g-svg-54"
-              fill="none"
-              class="navigator-play-window"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g id="g-svg-55" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-54" fill="none" class="navigator-play-window">
+              <g id="g-svg-55" fill="none">
+                <g>
                   <path
                     id="g-svg-56"
                     fill="rgba(247,247,247,1)"
@@ -50,12 +44,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-57"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -71,8 +67,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-58" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-58" fill="none">
+                <g>
                   <path
                     id="g-svg-59"
                     fill="rgba(247,247,247,1)"
@@ -82,12 +78,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-60"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -103,8 +101,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-61" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-61" fill="none">
+                <g>
                   <path
                     id="g-svg-62"
                     fill="rgba(247,247,247,1)"
@@ -114,12 +112,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-63"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -135,8 +135,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-64" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-64" fill="none">
+                <g>
                   <path
                     id="g-svg-65"
                     fill="rgba(247,247,247,1)"
@@ -146,12 +146,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-66"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -167,8 +169,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-67" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-67" fill="none">
+                <g>
                   <path
                     id="g-svg-68"
                     fill="rgba(247,247,247,1)"
@@ -178,12 +180,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-69"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -201,7 +205,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-1"
               fill="none"
@@ -220,30 +224,30 @@
             <g
               id="g-svg-3"
               fill="none"
-              transform="matrix(-1,-0,0,-1,0,0)"
               class="navigator-prev-btn-group"
+              transform="matrix(-1,-0,0,-1,0,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-4"
                   fill="rgba(0,0,0,1)"
                   class="navigator-prev-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
             <g
               id="g-svg-5"
               fill="none"
-              transform="matrix(1,0,0,1,40.160000,0)"
               class="navigator-next-btn-group"
+              transform="matrix(1,0,0,1,40.160000,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="rgba(0,0,0,1)"
                   class="navigator-next-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
@@ -253,7 +257,7 @@
               transform="matrix(1,0,0,1,11,0)"
               class="navigator-page-info-group"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-8"
                   fill="rgba(0,0,0,1)"
@@ -270,22 +274,22 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-70" fill="none" transform="matrix(1,0,0,1,10,120)">
+        <g
+          id="g-svg-70"
+          fill="none"
+          x="10"
+          y="120"
+          transform="matrix(1,0,0,1,10,120)"
+        >
           <g
             id="g-svg-71"
             fill="none"
             class="navigator-content-group"
-            transform="matrix(1,0,0,1,0,0)"
             clip-path="url(#clip-path-9-71)"
           >
-            <g
-              id="g-svg-72"
-              fill="none"
-              class="navigator-play-window"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-72" fill="none" class="navigator-play-window">
+              <g id="g-svg-73" fill="none">
+                <g>
                   <path
                     id="g-svg-74"
                     fill="rgba(247,247,247,1)"
@@ -295,12 +299,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-75"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -316,8 +322,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-76" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-76" fill="none">
+                <g>
                   <path
                     id="g-svg-77"
                     fill="rgba(247,247,247,1)"
@@ -327,12 +333,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-78"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -348,8 +356,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-79" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-79" fill="none">
+                <g>
                   <path
                     id="g-svg-80"
                     fill="rgba(247,247,247,1)"
@@ -359,12 +367,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-81"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -380,8 +390,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-82" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-82" fill="none">
+                <g>
                   <path
                     id="g-svg-83"
                     fill="rgba(247,247,247,1)"
@@ -391,12 +401,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-84"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -412,8 +424,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-85" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-85" fill="none">
+                <g>
                   <path
                     id="g-svg-86"
                     fill="rgba(247,247,247,1)"
@@ -423,12 +435,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-87"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -446,7 +460,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-9"
               fill="none"
@@ -465,30 +479,30 @@
             <g
               id="g-svg-11"
               fill="none"
-              transform="matrix(-1,-0,0,-1,0,0)"
               class="navigator-prev-btn-group"
+              transform="matrix(-1,-0,0,-1,0,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-12"
                   fill="rgba(0,0,0,1)"
                   class="navigator-prev-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
             <g
               id="g-svg-13"
               fill="none"
-              transform="matrix(1,0,0,1,40.160000,0)"
               class="navigator-next-btn-group"
+              transform="matrix(1,0,0,1,40.160000,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-14"
                   fill="rgba(0,0,0,1)"
                   class="navigator-next-btn"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                 />
               </g>
             </g>
@@ -498,7 +512,7 @@
               transform="matrix(1,0,0,1,11,0)"
               class="navigator-page-info-group"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-16"
                   fill="rgba(0,0,0,1)"
@@ -515,22 +529,22 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,10,230)">
+        <g
+          id="g-svg-88"
+          fill="none"
+          x="10"
+          y="230"
+          transform="matrix(1,0,0,1,10,230)"
+        >
           <g
             id="g-svg-89"
             fill="none"
             class="navigator-content-group"
             clip-path="url(#clip-path-106-89)"
-            transform="matrix(1,0,0,1,0,0)"
           >
-            <g
-              id="g-svg-90"
-              fill="none"
-              class="navigator-play-window"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g id="g-svg-91" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-90" fill="none" class="navigator-play-window">
+              <g id="g-svg-91" fill="none">
+                <g>
                   <path
                     id="g-svg-92"
                     fill="rgba(247,247,247,1)"
@@ -540,12 +554,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="visible"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-93"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -561,8 +577,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-94" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-94" fill="none">
+                <g>
                   <path
                     id="g-svg-95"
                     fill="rgba(247,247,247,1)"
@@ -572,12 +588,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-96"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -593,8 +611,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-97" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-97" fill="none">
+                <g>
                   <path
                     id="g-svg-98"
                     fill="rgba(247,247,247,1)"
@@ -604,12 +622,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-99"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -625,8 +645,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-100" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-100" fill="none">
+                <g>
                   <path
                     id="g-svg-101"
                     fill="rgba(247,247,247,1)"
@@ -636,12 +656,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-102"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -657,8 +679,8 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-103" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-103" fill="none">
+                <g>
                   <path
                     id="g-svg-104"
                     fill="rgba(247,247,247,1)"
@@ -668,12 +690,14 @@
                     stroke="rgba(255,0,0,1)"
                     visibility="hidden"
                   />
-                  <g transform="matrix(1,0,0,1,50,50)">
+                  <g>
                     <text
                       id="g-svg-105"
                       fill="rgba(0,0,0,1)"
                       dominant-baseline="central"
                       paint-order="stroke"
+                      x="50"
+                      y="50"
                       dx="0.5"
                       font-family="sans-serif"
                       font-size="16"
@@ -691,7 +715,7 @@
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-106"
               fill="none"
@@ -713,11 +737,11 @@
               class="navigator-prev-btn-group"
               transform="matrix(-1,-0,0,-1,0,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-109"
                   fill="rgba(0,0,0,1)"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                   class="navigator-prev-btn"
                   visibility="visible"
                 />
@@ -729,11 +753,11 @@
               class="navigator-next-btn-group"
               transform="matrix(1,0,0,1,40.160000,0)"
             >
-              <g transform="matrix(1,0,0,1,-6,-6)">
+              <g>
                 <path
                   id="g-svg-111"
                   fill="rgba(0,0,0,1)"
-                  d="M 0,0 L 12,6 L 0,12 Z"
+                  d="M -6,-6 L 6,0 L -6,6 Z"
                   class="navigator-next-btn"
                   visibility="visible"
                 />
@@ -745,7 +769,7 @@
               class="navigator-page-info-group"
               transform="matrix(1,0,0,1,11,0)"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-113"
                   fill="rgba(0,0,0,1)"
diff --git a/__tests__/integration/snapshots/RibbonColor.svg b/__tests__/integration/snapshots/RibbonColor.svg
index 4e034d9ec..428a606ce 100644
--- a/__tests__/integration/snapshots/RibbonColor.svg
+++ b/__tests__/integration/snapshots/RibbonColor.svg
@@ -18,8 +18,8 @@
       <stop offset="0.5" stop-color="rgba(0,255,0,1)" />
       <stop offset="1" stop-color="rgba(0,0,255,1)" />
     </linearGradient>
-    <clipPath transform="matrix(1,0,0,1,0,0)" id="clip-path-5-4">
-      <use href="#g-svg-5" transform="matrix(1,0,0,1,0,0)" />
+    <clipPath id="clip-path-5-4">
+      <use href="#g-svg-5" />
     </clipPath>
     <linearGradient
       gradientUnits="userSpaceOnUse"
@@ -143,23 +143,12 @@
       <use href="#g-svg-70" transform="matrix(1,0,0,1,380,0)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-51"
-        fill="none"
-        width="410"
-        height="210"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-52" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-51" fill="none" width="410" height="210">
+        <g id="g-svg-52" fill="none">
+          <g id="g-svg-1" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-2"
                 fill="rgba(229,229,229,1)"
@@ -168,20 +157,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-path-5-4)">
+          <g id="g-svg-3" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-5-4)">
               <path
                 id="g-svg-4"
                 fill="url(#g-pattern-0)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 0,0 L 200,0 L 200,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="none"
@@ -192,14 +176,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,0,30)">
-          <g
-            id="g-svg-6"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-53"
+          fill="none"
+          x="0"
+          y="30"
+          transform="matrix(1,0,0,1,0,30)"
+        >
+          <g id="g-svg-6" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-7"
                 fill="rgba(229,229,229,1)"
@@ -208,20 +193,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-8"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-path-10-9)">
+          <g id="g-svg-8" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-10-9)">
               <path
                 id="g-svg-9"
                 fill="url(#g-pattern-1)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 0,0 L 200,0 L 200,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="none"
@@ -232,14 +212,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,60)">
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-54"
+          fill="none"
+          x="0"
+          y="60"
+          transform="matrix(1,0,0,1,0,60)"
+        >
+          <g id="g-svg-11" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-12"
                 fill="rgba(229,229,229,1)"
@@ -248,23 +229,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-15-14)"
-            >
+          <g id="g-svg-13" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-15-14)">
               <path
                 id="g-svg-14"
                 fill="url(#g-pattern-2)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 0,0 L 200,0 L 200,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
@@ -275,14 +248,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-55" fill="none" transform="matrix(1,0,0,1,0,90)">
-          <g
-            id="g-svg-16"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-55"
+          fill="none"
+          x="0"
+          y="90"
+          transform="matrix(1,0,0,1,0,90)"
+        >
+          <g id="g-svg-16" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-17"
                 fill="rgba(229,229,229,1)"
@@ -291,23 +265,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-18"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-20-19)"
-            >
+          <g id="g-svg-18" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-20-19)">
               <path
                 id="g-svg-19"
                 fill="rgba(255,192,203,1)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 0,0 L 200,0 L 200,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="none"
@@ -318,14 +284,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-56" fill="none" transform="matrix(1,0,0,1,0,120)">
-          <g
-            id="g-svg-21"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-56"
+          fill="none"
+          x="0"
+          y="120"
+          transform="matrix(1,0,0,1,0,120)"
+        >
+          <g id="g-svg-21" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-22"
                 fill="rgba(229,229,229,1)"
@@ -334,23 +301,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-23"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-25-24)"
-            >
+          <g id="g-svg-23" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-25-24)">
               <path
                 id="g-svg-24"
                 fill="url(#g-pattern-0)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 0,0 L 200,0 L 200,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-25"
                   fill="none"
@@ -361,14 +320,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-57" fill="none" transform="matrix(1,0,0,1,0,150)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-57"
+          fill="none"
+          x="0"
+          y="150"
+          transform="matrix(1,0,0,1,0,150)"
+        >
+          <g id="g-svg-26" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-27"
                 fill="rgba(229,229,229,1)"
@@ -377,23 +337,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-28"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-30-29)"
-            >
+          <g id="g-svg-28" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-30-29)">
               <path
                 id="g-svg-29"
                 fill="url(#g-pattern-0)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 0,0 L 200,0 L 200,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-30"
                   fill="none"
@@ -404,14 +356,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-58" fill="none" transform="matrix(1,0,0,1,0,180)">
-          <g
-            id="g-svg-31"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-58"
+          fill="none"
+          x="0"
+          y="180"
+          transform="matrix(1,0,0,1,0,180)"
+        >
+          <g id="g-svg-31" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-32"
                 fill="rgba(229,229,229,1)"
@@ -420,23 +373,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-33"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-35-34)"
-            >
+          <g id="g-svg-33" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-35-34)">
               <path
                 id="g-svg-34"
                 fill="url(#g-pattern-3)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 0,0 L 200,0 L 200,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-35"
                   fill="none"
@@ -447,14 +392,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-59" fill="none" transform="matrix(1,0,0,1,200,0)">
-          <g
-            id="g-svg-36"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-59"
+          fill="none"
+          x="200"
+          y="0"
+          transform="matrix(1,0,0,1,200,0)"
+        >
+          <g id="g-svg-36" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-37"
                 fill="rgba(229,229,229,1)"
@@ -463,23 +409,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-38"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-40-39)"
-            >
+          <g id="g-svg-38" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-40-39)">
               <path
                 id="g-svg-39"
                 fill="url(#g-pattern-4)"
                 class="ribbon-ribbon"
                 d="M 0,210 L 0,0 L 30,0 L 30,210 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-40"
                   fill="none"
@@ -490,14 +428,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-60" fill="none" transform="matrix(1,0,0,1,230,0)">
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-60"
+          fill="none"
+          x="230"
+          y="0"
+          transform="matrix(1,0,0,1,230,0)"
+        >
+          <g id="g-svg-41" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-42"
                 fill="rgba(229,229,229,1)"
@@ -506,23 +445,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-43"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-45-44)"
-            >
+          <g id="g-svg-43" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-45-44)">
               <path
                 id="g-svg-44"
                 fill="url(#g-pattern-5)"
                 class="ribbon-ribbon"
                 d="M 0,210 L 0,0 L 30,0 L 30,210 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-45"
                   fill="none"
@@ -533,14 +464,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-61" fill="none" transform="matrix(1,0,0,1,260,0)">
-          <g
-            id="g-svg-46"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-61"
+          fill="none"
+          x="260"
+          y="0"
+          transform="matrix(1,0,0,1,260,0)"
+        >
+          <g id="g-svg-46" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-47"
                 fill="rgba(229,229,229,1)"
@@ -549,23 +481,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-48"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-50-49)"
-            >
+          <g id="g-svg-48" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-50-49)">
               <path
                 id="g-svg-49"
                 fill="url(#g-pattern-6)"
                 class="ribbon-ribbon"
                 d="M 0,210 L 0,0 L 30,0 L 30,210 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-50"
                   fill="none"
@@ -576,14 +500,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-62" fill="none" transform="matrix(1,0,0,1,290,0)">
-          <g
-            id="g-svg-51"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-62"
+          fill="none"
+          x="290"
+          y="0"
+          transform="matrix(1,0,0,1,290,0)"
+        >
+          <g id="g-svg-51" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-52"
                 fill="rgba(229,229,229,1)"
@@ -592,23 +517,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-53"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-55-54)"
-            >
+          <g id="g-svg-53" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-55-54)">
               <path
                 id="g-svg-54"
                 fill="rgba(255,192,203,1)"
                 class="ribbon-ribbon"
                 d="M 0,210 L 0,0 L 30,0 L 30,210 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-55"
                   fill="none"
@@ -619,14 +536,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-63" fill="none" transform="matrix(1,0,0,1,320,0)">
-          <g
-            id="g-svg-56"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-63"
+          fill="none"
+          x="320"
+          y="0"
+          transform="matrix(1,0,0,1,320,0)"
+        >
+          <g id="g-svg-56" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-57"
                 fill="rgba(229,229,229,1)"
@@ -635,23 +553,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-58"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-60-59)"
-            >
+          <g id="g-svg-58" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-60-59)">
               <path
                 id="g-svg-59"
                 fill="url(#g-pattern-4)"
                 class="ribbon-ribbon"
                 d="M 0,210 L 0,0 L 30,0 L 30,210 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-60"
                   fill="none"
@@ -662,14 +572,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-64" fill="none" transform="matrix(1,0,0,1,350,0)">
-          <g
-            id="g-svg-61"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-64"
+          fill="none"
+          x="350"
+          y="0"
+          transform="matrix(1,0,0,1,350,0)"
+        >
+          <g id="g-svg-61" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-62"
                 fill="rgba(229,229,229,1)"
@@ -678,23 +589,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-63"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-65-64)"
-            >
+          <g id="g-svg-63" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-65-64)">
               <path
                 id="g-svg-64"
                 fill="url(#g-pattern-4)"
                 class="ribbon-ribbon"
                 d="M 0,210 L 0,0 L 30,0 L 30,210 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-65"
                   fill="none"
@@ -705,14 +608,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-65" fill="none" transform="matrix(1,0,0,1,380,0)">
-          <g
-            id="g-svg-66"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-65"
+          fill="none"
+          x="380"
+          y="0"
+          transform="matrix(1,0,0,1,380,0)"
+        >
+          <g id="g-svg-66" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-67"
                 fill="rgba(229,229,229,1)"
@@ -721,23 +625,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-68"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-70-69)"
-            >
+          <g id="g-svg-68" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-70-69)">
               <path
                 id="g-svg-69"
                 fill="url(#g-pattern-7)"
                 class="ribbon-ribbon"
                 d="M 0,210 L 0,0 L 30,0 L 30,210 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-70"
                   fill="none"
diff --git a/__tests__/integration/snapshots/RibbonDemo.svg b/__tests__/integration/snapshots/RibbonDemo.svg
index d8ce58080..0f498c255 100644
--- a/__tests__/integration/snapshots/RibbonDemo.svg
+++ b/__tests__/integration/snapshots/RibbonDemo.svg
@@ -6,8 +6,8 @@
   color-interpolation-filters="sRGB"
 >
   <defs>
-    <clipPath transform="matrix(1,0,0,1,-350,-350)" id="clip-path-365-364">
-      <use href="#g-svg-365" transform="matrix(1,0,0,1,510,350)" />
+    <clipPath id="clip-path-365-364" transform="matrix(1,0,0,1,-350,-350)">
+      <use href="#g-svg-365" transform="matrix(1,0,0,1,350,350)" />
     </clipPath>
     <linearGradient
       gradientUnits="userSpaceOnUse"
@@ -155,7 +155,7 @@
       <stop offset="1" stop-color="rgba(231,101,91,1)" />
     </linearGradient>
     <clipPath transform="matrix(1,0,0,1,-150,-200)" id="clip-path-20-19">
-      <use href="#g-svg-20" transform="matrix(1,0,0,1,150,240)" />
+      <use href="#g-svg-20" transform="matrix(1,0,0,1,150,200)" />
     </clipPath>
     <linearGradient
       gradientUnits="userSpaceOnUse"
@@ -178,7 +178,7 @@
       <stop offset="1" stop-color="rgba(231,101,91,1)" />
     </linearGradient>
     <clipPath transform="matrix(1,0,0,1,-300,-200)" id="clip-path-25-24">
-      <use href="#g-svg-25" transform="matrix(1,0,0,1,300,240)" />
+      <use href="#g-svg-25" transform="matrix(1,0,0,1,300,200)" />
     </clipPath>
     <clipPath transform="matrix(1,0,0,1,-350,-100)" id="clip-path-30-29">
       <use href="#g-svg-30" transform="matrix(1,0,0,1,350,100)" />
@@ -193,26 +193,15 @@
       <use href="#g-svg-45" transform="matrix(1,0,0,1,350,250)" />
     </clipPath>
     <clipPath transform="matrix(1,0,0,1,-350,-300)" id="clip-path-50-49">
-      <use href="#g-svg-50" transform="matrix(1,0,0,1,430,300)" />
+      <use href="#g-svg-50" transform="matrix(1,0,0,1,350,300)" />
     </clipPath>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-349"
-        fill="none"
-        width="750"
-        height="400"
-        transform="matrix(1,0,0,1,0,0)"
-      >
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-349" fill="none" width="750" height="400">
         <g id="g-svg-350" fill="none" transform="matrix(1,0,0,1,100,100)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-1" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-2"
                 fill="rgba(229,229,229,1)"
@@ -221,20 +210,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-3"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-path-5-4)">
+          <g id="g-svg-3" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-5-4)">
               <path
                 id="g-svg-4"
                 fill="url(#g-pattern-1)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 0,0 L 200,0 L 200,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="none"
@@ -245,14 +229,14 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-351" fill="none" transform="matrix(1,0,0,1,100,150)">
-          <g
-            id="g-svg-6"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-351"
+          fill="none"
+          y="150"
+          transform="matrix(1,0,0,1,100,150)"
+        >
+          <g id="g-svg-6" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-7"
                 fill="rgba(229,229,229,1)"
@@ -261,20 +245,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-8"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)" clip-path="url(#clip-path-10-9)">
+          <g id="g-svg-8" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-10-9)">
               <path
                 id="g-svg-9"
                 fill="url(#g-pattern-1)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 200,0 L 200,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="none"
@@ -285,14 +264,14 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-352" fill="none" transform="matrix(1,0,0,1,100,200)">
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-352"
+          fill="none"
+          y="200"
+          transform="matrix(1,0,0,1,100,200)"
+        >
+          <g id="g-svg-11" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-12"
                 fill="rgba(229,229,229,1)"
@@ -301,23 +280,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-15-14)"
-            >
+          <g id="g-svg-13" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-15-14)">
               <path
                 id="g-svg-14"
                 fill="url(#g-pattern-2)"
                 class="ribbon-ribbon"
                 d="M 0,200 L 0,0 L 30,0 L 30,200 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
@@ -328,14 +299,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-353" fill="none" transform="matrix(1,0,0,1,150,200)">
-          <g
-            id="g-svg-16"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-353"
+          fill="none"
+          x="150"
+          y="200"
+          transform="matrix(1,0,0,1,150,200)"
+        >
+          <g id="g-svg-16" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-17"
                 fill="rgba(229,229,229,1)"
@@ -344,41 +316,34 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-18"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-20-19)"
-            >
+          <g id="g-svg-18" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-20-19)">
               <path
                 id="g-svg-19"
                 fill="url(#g-pattern-3)"
                 class="ribbon-ribbon"
                 d="M 0,200 L 30,0 L 30,200 Z"
               />
-              <g transform="matrix(1,0,0,1,0,40)">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="none"
-                  d="M 0,0 L 0,120 L 30,120 L 30,0 Z"
+                  d="M 0,40 L 0,160 L 30,160 L 30,40 Z"
                   class="ribbon-clip-path"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g id="g-svg-354" fill="none" transform="matrix(1,0,0,1,300,200)">
-          <g
-            id="g-svg-21"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-354"
+          fill="none"
+          x="300"
+          y="200"
+          transform="matrix(1,0,0,1,300,200)"
+        >
+          <g id="g-svg-21" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-22"
                 fill="rgba(229,229,229,1)"
@@ -387,41 +352,34 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-23"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-25-24)"
-            >
+          <g id="g-svg-23" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-25-24)">
               <path
                 id="g-svg-24"
                 fill="url(#g-pattern-4)"
                 class="ribbon-ribbon"
                 d="M 0,200 L 30,0 L 30,200 Z"
               />
-              <g transform="matrix(1,0,0,1,0,40)">
+              <g>
                 <path
                   id="g-svg-25"
                   fill="none"
-                  d="M 0,0 L 0,120 L 30,120 L 30,0 Z"
+                  d="M 0,40 L 0,160 L 30,160 L 30,40 Z"
                   class="ribbon-clip-path"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g id="g-svg-355" fill="none" transform="matrix(1,0,0,1,350,100)">
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-355"
+          fill="none"
+          x="350"
+          y="100"
+          transform="matrix(1,0,0,1,350,100)"
+        >
+          <g id="g-svg-26" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-27"
                 fill="rgba(229,229,229,1)"
@@ -430,23 +388,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-28"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-30-29)"
-            >
+          <g id="g-svg-28" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-30-29)">
               <path
                 id="g-svg-29"
                 fill="url(#g-pattern-5)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 0,0 L 400,0 L 400,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-30"
                   fill="none"
@@ -457,14 +407,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-356" fill="none" transform="matrix(1,0,0,1,350,150)">
-          <g
-            id="g-svg-31"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-356"
+          fill="none"
+          x="350"
+          y="150"
+          transform="matrix(1,0,0,1,350,150)"
+        >
+          <g id="g-svg-31" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-32"
                 fill="rgba(229,229,229,1)"
@@ -473,23 +424,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-33"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-35-34)"
-            >
+          <g id="g-svg-33" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-35-34)">
               <path
                 id="g-svg-34"
                 fill="url(#g-pattern-6)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 0,0 L 400,0 L 400,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-35"
                   fill="none"
@@ -500,14 +443,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-357" fill="none" transform="matrix(1,0,0,1,350,200)">
-          <g
-            id="g-svg-36"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-357"
+          fill="none"
+          x="350"
+          y="200"
+          transform="matrix(1,0,0,1,350,200)"
+        >
+          <g id="g-svg-36" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-37"
                 fill="rgba(229,229,229,1)"
@@ -516,23 +460,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-38"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-40-39)"
-            >
+          <g id="g-svg-38" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-40-39)">
               <path
                 id="g-svg-39"
                 fill="url(#g-pattern-5)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 400,0 L 400,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-40"
                   fill="none"
@@ -543,14 +479,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-358" fill="none" transform="matrix(1,0,0,1,350,250)">
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-358"
+          fill="none"
+          x="350"
+          y="250"
+          transform="matrix(1,0,0,1,350,250)"
+        >
+          <g id="g-svg-41" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-42"
                 fill="rgba(229,229,229,1)"
@@ -559,23 +496,15 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-43"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-45-44)"
-            >
+          <g id="g-svg-43" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-45-44)">
               <path
                 id="g-svg-44"
                 fill="url(#g-pattern-6)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 400,0 L 400,30 Z"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-45"
                   fill="none"
@@ -586,14 +515,15 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-359" fill="none" transform="matrix(1,0,0,1,350,300)">
-          <g
-            id="g-svg-46"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-background-group"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-359"
+          fill="none"
+          x="350"
+          y="300"
+          transform="matrix(1,0,0,1,350,300)"
+        >
+          <g id="g-svg-46" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-47"
                 fill="rgba(229,229,229,1)"
@@ -602,41 +532,34 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-48"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="ribbon-ribbon-group"
-          >
-            <g
-              transform="matrix(1,0,0,1,0,0)"
-              clip-path="url(#clip-path-50-49)"
-            >
+          <g id="g-svg-48" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-50-49)">
               <path
                 id="g-svg-49"
                 fill="url(#g-pattern-5)"
                 class="ribbon-ribbon"
                 d="M 0,30 L 0,0 L 400,0 L 400,30 Z"
               />
-              <g transform="matrix(1,0,0,1,80,0)">
+              <g>
                 <path
                   id="g-svg-50"
                   fill="none"
-                  d="M 0,0 L 0,30 L 240,30 L 240,0 Z"
+                  d="M 80,0 L 80,30 L 320,30 L 320,0 Z"
                   class="ribbon-clip-path"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g id="g-svg-360" fill="none" transform="matrix(1,0,0,1,350,350)">
-          <g
-            id="g-svg-361"
-            fill="none"
-            class="ribbon-background-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-360"
+          fill="none"
+          x="350"
+          y="350"
+          transform="matrix(1,0,0,1,350,350)"
+        >
+          <g id="g-svg-361" fill="none" class="ribbon-background-group">
+            <g>
               <path
                 id="g-svg-362"
                 fill="rgba(229,229,229,1)"
@@ -645,27 +568,19 @@
               />
             </g>
           </g>
-          <g
-            id="g-svg-363"
-            fill="none"
-            class="ribbon-ribbon-group"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              clip-path="url(#clip-path-365-364)"
-              transform="matrix(1,0,0,1,0,0)"
-            >
+          <g id="g-svg-363" fill="none" class="ribbon-ribbon-group">
+            <g clip-path="url(#clip-path-365-364)">
               <path
                 id="g-svg-364"
                 fill="url(#g-pattern-0)"
                 d="M 0,30 L 0,0 L 400,0 L 400,30 Z"
                 class="ribbon-ribbon"
               />
-              <g transform="matrix(1,0,0,1,160,0)">
+              <g>
                 <path
                   id="g-svg-365"
                   fill="none"
-                  d="M 0,0 L 0,30 L 160,30 L 160,0 Z"
+                  d="M 160,0 L 160,30 L 320,30 L 320,0 Z"
                   class="ribbon-clip-path"
                 />
               </g>
diff --git a/__tests__/integration/snapshots/Scrollbar1.svg b/__tests__/integration/snapshots/Scrollbar1.svg
index ab7262acc..315a0a0b3 100644
--- a/__tests__/integration/snapshots/Scrollbar1.svg
+++ b/__tests__/integration/snapshots/Scrollbar1.svg
@@ -6,82 +6,77 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-67" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-68" fill="none" transform="matrix(1,0,0,1,20,20)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="scrollbar"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-67" fill="none">
+        <g id="g-svg-68" fill="none" x="20" y="20">
+          <g id="g-svg-1" fill="none" x="20" y="20" class="scrollbar">
+            <g>
               <path
                 id="g-svg-2"
                 fill="rgba(65,97,128,1)"
                 class="slider-track"
-                d="M 5,0 l 0,0 a 5,5,0,0,1,5,5 l 0,290 a 5,5,0,0,1,-5,5 l 0,0 a 5,5,0,0,1,-5,-5 l 0,-290 a 5,5,0,0,1,5,-5 z"
+                d="M 25,20 l 0,0 a 5,5,0,0,1,5,5 l 0,290 a 5,5,0,0,1,-5,5 l 0,0 a 5,5,0,0,1,-5,-5 l 0,-290 a 5,5,0,0,1,5,-5 z"
+                x="20"
+                y="20"
                 width="10"
                 height="300"
                 opacity="0.05"
               />
             </g>
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-sparkline-group"
-            />
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-3" fill="none" class="slider-sparkline-group" />
+            <g>
               <path
                 id="g-svg-4"
                 fill="rgba(0,0,0,0)"
                 class="slider-brush-area"
-                d="M 0,0 l 10,0 l 0,300 l-10 0 z"
+                d="M 20,20 l 10,0 l 0,300 l-10 0 z"
+                x="20"
+                y="20"
                 width="10"
                 height="300"
               />
             </g>
-            <g
-              id="g-svg-5"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-foreground"
-            >
-              <g transform="matrix(1,0,0,1,2,2)">
+            <g id="g-svg-5" fill="none" class="slider-foreground">
+              <g transform="matrix(1,0,0,1,20,20)">
                 <path
                   id="g-svg-6"
                   fill="rgba(91,143,249,1)"
                   class="slider-selection"
                   visibility="hidden"
                   fill-opacity="0.45"
-                  d="M 3,0 l 0,0 a 3,3,0,0,1,3,3 l 0,97.6 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-97.6 a 3,3,0,0,1,3,-3 z"
+                  d="M 5,2 l 0,0 a 3,3,0,0,1,3,3 l 0,97.6 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-97.6 a 3,3,0,0,1,3,-3 z"
+                  x="2"
                   width="6"
+                  y="2"
                   height="103.6"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,2,105.599998)">
+              <g transform="matrix(1,0,0,1,20,20)">
                 <path
                   id="g-svg-7"
                   fill="rgba(91,143,249,1)"
                   class="slider-selection"
                   visibility="visible"
                   fill-opacity="0.45"
-                  d="M 3,0 l 0,0 a 3,3,0,0,1,3,3 l 0,82.80000000000001 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-82.80000000000001 a 3,3,0,0,1,3,-3 z"
+                  d="M 5,105.6 l 0,0 a 3,3,0,0,1,3,3 l 0,82.80000000000001 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-82.80000000000001 a 3,3,0,0,1,3,-3 z"
+                  x="2"
                   width="6"
+                  y="105.6"
                   height="88.80000000000001"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,2,192.399994)">
+              <g transform="matrix(1,0,0,1,20,20)">
                 <path
                   id="g-svg-8"
                   fill="rgba(91,143,249,1)"
                   class="slider-selection"
                   visibility="hidden"
                   fill-opacity="0.45"
-                  d="M 3,0 l 0,0 a 3,3,0,0,1,3,3 l 0,97.6 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-97.6 a 3,3,0,0,1,3,-3 z"
+                  d="M 5,192.4 l 0,0 a 3,3,0,0,1,3,3 l 0,97.6 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-97.6 a 3,3,0,0,1,3,-3 z"
+                  x="2"
                   width="6"
+                  y="192.4"
                   height="103.6"
                 />
               </g>
diff --git a/__tests__/integration/snapshots/Scrollbar2.svg b/__tests__/integration/snapshots/Scrollbar2.svg
index fa5e96d0f..0d26a4fb5 100644
--- a/__tests__/integration/snapshots/Scrollbar2.svg
+++ b/__tests__/integration/snapshots/Scrollbar2.svg
@@ -6,104 +6,102 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-9" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,20,20)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="scrollbar"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-9" fill="none">
+        <g id="g-svg-10" fill="none" x="20" y="20">
+          <g id="g-svg-1" fill="none" x="20" y="20" class="scrollbar">
+            <g>
               <path
                 id="g-svg-2"
                 fill="rgba(65,97,128,1)"
                 class="slider-track"
-                d="M 5,0 l 290,0 a 5,5,0,0,1,5,5 l 0,0 a 5,5,0,0,1,-5,5 l -290,0 a 5,5,0,0,1,-5,-5 l 0,0 a 5,5,0,0,1,5,-5 z"
+                d="M 25,20 l 290,0 a 5,5,0,0,1,5,5 l 0,0 a 5,5,0,0,1,-5,5 l -290,0 a 5,5,0,0,1,-5,-5 l 0,0 a 5,5,0,0,1,5,-5 z"
+                x="20"
+                y="20"
                 width="300"
                 height="10"
                 opacity="0.05"
               />
             </g>
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-sparkline-group"
-            >
+            <g id="g-svg-3" fill="none" class="slider-sparkline-group">
               <g
                 id="g-svg-4"
                 fill="none"
+                x="20"
+                y="20"
                 width="296"
                 height="6"
-                transform="matrix(1,0,0,1,2,2)"
                 class="slider-sparkline"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path id="g-svg-5" fill="none" class="container" />
                 </g>
                 <g
                   id="g-svg-6"
                   fill="none"
                   class="spark sparkline"
-                  transform="matrix(1,0,0,1,0,0)"
+                  x="20"
+                  y="20"
+                  transform="matrix(1,0,0,1,20,20)"
                 >
-                  <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
-                  <g id="g-svg-8" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                  <g id="g-svg-7" fill="none" />
+                  <g id="g-svg-8" fill="none" />
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-9"
                 fill="rgba(0,0,0,0)"
                 class="slider-brush-area"
-                d="M 0,0 l 300,0 l 0,10 l-300 0 z"
+                d="M 20,20 l 300,0 l 0,10 l-300 0 z"
+                x="20"
+                y="20"
                 width="300"
                 height="10"
               />
             </g>
-            <g
-              id="g-svg-10"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-foreground"
-            >
-              <g transform="matrix(1,0,0,1,2,2)">
+            <g id="g-svg-10" fill="none" class="slider-foreground">
+              <g transform="matrix(1,0,0,1,20,20)">
                 <path
                   id="g-svg-11"
                   fill="rgba(91,143,249,1)"
                   class="slider-selection"
                   visibility="hidden"
                   fill-opacity="0.45"
-                  d="M 3,0 l 97.6,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -97.6,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+                  d="M 5,2 l 97.6,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -97.6,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+                  y="2"
                   height="6"
+                  x="2"
                   width="103.6"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,105.599998,2)">
+              <g transform="matrix(1,0,0,1,20,20)">
                 <path
                   id="g-svg-12"
                   fill="rgba(91,143,249,1)"
                   class="slider-selection"
                   visibility="visible"
                   fill-opacity="0.45"
-                  d="M 3,0 l 82.80000000000001,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -82.80000000000001,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+                  d="M 108.6,2 l 82.80000000000001,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -82.80000000000001,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+                  y="2"
                   height="6"
+                  x="105.6"
                   width="88.80000000000001"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,192.399994,2)">
+              <g transform="matrix(1,0,0,1,20,20)">
                 <path
                   id="g-svg-13"
                   fill="rgba(91,143,249,1)"
                   class="slider-selection"
                   visibility="hidden"
                   fill-opacity="0.45"
-                  d="M 3,0 l 97.6,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -97.6,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+                  d="M 195.4,2 l 97.6,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -97.6,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+                  y="2"
                   height="6"
+                  x="192.4"
                   width="103.6"
                 />
               </g>
diff --git a/__tests__/integration/snapshots/Scrollbar3.svg b/__tests__/integration/snapshots/Scrollbar3.svg
index 7bcf2e209..533530aad 100644
--- a/__tests__/integration/snapshots/Scrollbar3.svg
+++ b/__tests__/integration/snapshots/Scrollbar3.svg
@@ -6,82 +6,77 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,20,20)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="scrollbar"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-14" fill="none">
+        <g id="g-svg-15" fill="none" x="20" y="20">
+          <g id="g-svg-1" fill="none" x="20" y="20" class="scrollbar">
+            <g>
               <path
                 id="g-svg-2"
                 fill="rgba(65,97,128,1)"
                 class="slider-track"
-                d="M 0,0 l 10,0 l 0,300 l-10 0 z"
+                d="M 20,20 l 10,0 l 0,300 l-10 0 z"
+                x="20"
+                y="20"
                 width="10"
                 height="300"
                 opacity="0.05"
               />
             </g>
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-sparkline-group"
-            />
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-3" fill="none" class="slider-sparkline-group" />
+            <g>
               <path
                 id="g-svg-4"
                 fill="rgba(0,0,0,0)"
                 class="slider-brush-area"
-                d="M 0,0 l 10,0 l 0,300 l-10 0 z"
+                d="M 20,20 l 10,0 l 0,300 l-10 0 z"
+                x="20"
+                y="20"
                 width="10"
                 height="300"
               />
             </g>
-            <g
-              id="g-svg-5"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-foreground"
-            >
-              <g transform="matrix(1,0,0,1,2,2)">
+            <g id="g-svg-5" fill="none" class="slider-foreground">
+              <g transform="matrix(1,0,0,1,20,20)">
                 <path
                   id="g-svg-6"
                   fill="rgba(91,143,249,1)"
                   class="slider-selection"
                   visibility="hidden"
                   fill-opacity="0.45"
-                  d="M 0,0 l 6,0 l 0,103.6 l-6 0 z"
+                  d="M 2,2 l 6,0 l 0,103.6 l-6 0 z"
+                  x="2"
                   width="6"
+                  y="2"
                   height="103.6"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,2,105.599998)">
+              <g transform="matrix(1,0,0,1,20,20)">
                 <path
                   id="g-svg-7"
                   fill="rgba(91,143,249,1)"
                   class="slider-selection"
                   visibility="visible"
                   fill-opacity="0.45"
-                  d="M 0,0 l 6,0 l 0,88.80000000000001 l-6 0 z"
+                  d="M 2,105.6 l 6,0 l 0,88.80000000000001 l-6 0 z"
+                  x="2"
                   width="6"
+                  y="105.6"
                   height="88.80000000000001"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,2,192.399994)">
+              <g transform="matrix(1,0,0,1,20,20)">
                 <path
                   id="g-svg-8"
                   fill="rgba(91,143,249,1)"
                   class="slider-selection"
                   visibility="hidden"
                   fill-opacity="0.45"
-                  d="M 0,0 l 6,0 l 0,103.6 l-6 0 z"
+                  d="M 2,192.4 l 6,0 l 0,103.6 l-6 0 z"
+                  x="2"
                   width="6"
+                  y="192.4"
                   height="103.6"
                 />
               </g>
diff --git a/__tests__/integration/snapshots/SelectBasic.svg b/__tests__/integration/snapshots/SelectBasic.svg
index 7153fa74a..83b8e491f 100644
--- a/__tests__/integration/snapshots/SelectBasic.svg
+++ b/__tests__/integration/snapshots/SelectBasic.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="150"
-  height="42"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -19,43 +19,40 @@
       />
     </filter>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1361" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-1362"
-          fill="none"
-          width="140"
-          height="32"
-          transform="matrix(1,0,0,1,10,10)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1361" fill="none">
+        <g id="g-svg-1362" fill="none" x="10" y="10" width="140" height="32">
+          <g>
             <path
               id="g-svg-1363"
               fill="rgba(255,255,255,1)"
-              d="M 8,0 l 124,0 a 8,8,0,0,1,8,8 l 0,16 a 8,8,0,0,1,-8,8 l -124,0 a 8,8,0,0,1,-8,-8 l 0,-16 a 8,8,0,0,1,8,-8 z"
+              d="M 18,10 l 124,0 a 8,8,0,0,1,8,8 l 0,16 a 8,8,0,0,1,-8,8 l -124,0 a 8,8,0,0,1,-8,-8 l 0,-16 a 8,8,0,0,1,8,-8 z"
               class="select"
               width="140"
               height="32"
+              x="10"
+              y="10"
               stroke="rgba(217,217,217,1)"
-              stroke-width="1"
             />
-            <g transform="matrix(1,0,0,1,109,12.500000)">
+            <g transform="matrix(1,0,0,1,124,26)">
               <path
                 id="g-svg-1"
                 fill="none"
-                d="M 0,0 L 5,7 L 10,0"
+                d="M -5,-3.5 L 0,3.5 L 5,-3.5"
                 stroke-width="1"
                 stroke="rgba(217,217,217,1)"
               />
             </g>
-            <g transform="matrix(1,0,0,1,8,4.500000)">
+            <g>
               <text
                 id="g-svg-2"
                 fill="rgba(194,194,194,1)"
                 class="placeholder"
+                x="18"
                 dominant-baseline="central"
                 paint-order="stroke"
+                y="14.5"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
@@ -64,7 +61,7 @@
               </text>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,42)">
+          <g transform="matrix(1,0,0,1,10,52)">
             <path
               id="g-svg-1364"
               fill="rgba(255,255,255,1)"
@@ -76,12 +73,7 @@
               filter="url(#g-filter-dropshadow-1364)"
               visibility="hidden"
             />
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="dropdown-container"
-            >
+            <g id="g-svg-3" fill="none" class="dropdown-container">
               <g
                 id="g-svg-4"
                 fill="none"
@@ -89,7 +81,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,8)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="rgba(255,255,255,1)"
@@ -99,7 +91,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-7"
                         fill="rgba(0,0,0,1)"
@@ -130,7 +122,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,47)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="rgba(255,255,255,1)"
@@ -140,7 +132,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-11"
                         fill="rgba(0,0,0,1)"
@@ -171,7 +163,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,86)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="rgba(255,255,255,1)"
@@ -181,7 +173,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-15"
                         fill="rgba(247,84,97,1)"
@@ -203,7 +195,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,142)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="rgba(255,255,255,1)"
@@ -213,7 +205,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-19"
                         fill="rgba(15,88,218,1)"
diff --git a/__tests__/integration/snapshots/SelectDefaultValue.svg b/__tests__/integration/snapshots/SelectDefaultValue.svg
index ecbdfb8d7..d1af4f422 100644
--- a/__tests__/integration/snapshots/SelectDefaultValue.svg
+++ b/__tests__/integration/snapshots/SelectDefaultValue.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="150"
-  height="42"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -19,37 +19,32 @@
       />
     </filter>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-20" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-21"
-          fill="none"
-          width="140"
-          height="32"
-          transform="matrix(1,0,0,1,10,10)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-20" fill="none">
+        <g id="g-svg-21" fill="none" x="10" y="10" width="140" height="32">
+          <g>
             <path
               id="g-svg-22"
               fill="rgba(255,255,255,1)"
-              d="M 8,0 l 124,0 a 8,8,0,0,1,8,8 l 0,16 a 8,8,0,0,1,-8,8 l -124,0 a 8,8,0,0,1,-8,-8 l 0,-16 a 8,8,0,0,1,8,-8 z"
+              d="M 18,10 l 124,0 a 8,8,0,0,1,8,8 l 0,16 a 8,8,0,0,1,-8,8 l -124,0 a 8,8,0,0,1,-8,-8 l 0,-16 a 8,8,0,0,1,8,-8 z"
               class="select"
               width="140"
               height="32"
+              x="10"
+              y="10"
               stroke="rgba(217,217,217,1)"
-              stroke-width="1"
             />
-            <g transform="matrix(1,0,0,1,109,12.500000)">
+            <g transform="matrix(1,0,0,1,124,26)">
               <path
                 id="g-svg-1"
                 fill="none"
-                d="M 0,0 L 5,7 L 10,0"
+                d="M -5,-3.5 L 0,3.5 L 5,-3.5"
                 stroke-width="1"
                 stroke="rgba(217,217,217,1)"
               />
             </g>
-            <g transform="matrix(1,0,0,1,8,4.500000)">
+            <g>
               <text
                 id="g-svg-2"
                 fill="rgba(0,0,0,1)"
@@ -64,13 +59,15 @@
                 stroke-width="1"
                 text-anchor="left"
                 class="value"
+                x="18"
+                y="14.5"
                 dy="11.5px"
               >
                 选项2
               </text>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,42)">
+          <g transform="matrix(1,0,0,1,10,52)">
             <path
               id="g-svg-23"
               fill="rgba(255,255,255,1)"
@@ -82,12 +79,7 @@
               filter="url(#g-filter-dropshadow-23)"
               visibility="hidden"
             />
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="dropdown-container"
-            >
+            <g id="g-svg-3" fill="none" class="dropdown-container">
               <g
                 id="g-svg-4"
                 fill="none"
@@ -95,7 +87,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,8)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="rgba(255,255,255,1)"
@@ -105,7 +97,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-7"
                         fill="rgba(0,0,0,1)"
@@ -136,7 +128,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,47)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="rgba(230,247,255,1)"
@@ -146,7 +138,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-11"
                         fill="rgba(0,0,0,1)"
@@ -177,7 +169,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,86)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="rgba(255,255,255,1)"
@@ -187,7 +179,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-15"
                         fill="rgba(247,84,97,1)"
@@ -209,7 +201,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,142)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="rgba(255,255,255,1)"
@@ -219,7 +211,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-19"
                         fill="rgba(15,88,218,1)"
diff --git a/__tests__/integration/snapshots/SelectDemoSpeed.svg b/__tests__/integration/snapshots/SelectDemoSpeed.svg
index fa5754731..0c309b78b 100644
--- a/__tests__/integration/snapshots/SelectDemoSpeed.svg
+++ b/__tests__/integration/snapshots/SelectDemoSpeed.svg
@@ -19,34 +19,23 @@
       />
     </filter>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-20"
-        fill="none"
-        width="50"
-        height="100"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-21"
-          fill="none"
-          width="30"
-          height="20"
-          transform="matrix(1,0,0,1,10,10)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-20" fill="none" width="50" height="100">
+        <g id="g-svg-21" fill="none" x="10" y="10" width="30" height="20">
+          <g>
             <path
               id="g-svg-22"
               fill="rgba(255,255,255,1)"
-              d="M 2,0 l 26,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -26,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+              d="M 12,10 l 26,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -26,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
               class="select"
               width="30"
               height="20"
+              x="10"
+              y="10"
               stroke="rgba(217,217,217,1)"
-              stroke-width="0"
             />
-            <g transform="matrix(1,0,0,1,2,-1.500000)">
+            <g>
               <text
                 id="g-svg-1"
                 fill="rgba(0,0,0,1)"
@@ -61,13 +50,15 @@
                 stroke-width="1"
                 text-anchor="left"
                 class="value"
+                x="12"
+                y="8.5"
                 dy="11.5px"
               >
                 1x
               </text>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,30)">
+          <g transform="matrix(1,0,0,1,10,40)">
             <path
               id="g-svg-23"
               fill="rgba(255,255,255,1)"
@@ -78,12 +69,7 @@
               stroke="rgba(217,217,217,1)"
               filter="url(#g-filter-dropshadow-23)"
             />
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="dropdown-container"
-            >
+            <g id="g-svg-2" fill="none" class="dropdown-container">
               <g
                 id="g-svg-3"
                 fill="none"
@@ -91,7 +77,7 @@
                 width="26"
                 transform="matrix(1,0,0,1,2,2)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-4"
                     fill="rgba(230,247,255,1)"
@@ -99,8 +85,8 @@
                     width="26"
                     height="23"
                   />
-                  <g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-5" fill="none">
+                    <g>
                       <text
                         id="g-svg-6"
                         fill="rgba(0,0,0,1)"
@@ -130,7 +116,7 @@
                 width="26"
                 transform="matrix(1,0,0,1,2,25)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-8"
                     fill="rgba(255,255,255,1)"
@@ -138,8 +124,8 @@
                     width="26"
                     height="23"
                   />
-                  <g id="g-svg-9" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-9" fill="none">
+                    <g>
                       <text
                         id="g-svg-10"
                         fill="rgba(0,0,0,1)"
@@ -169,7 +155,7 @@
                 width="26"
                 transform="matrix(1,0,0,1,2,48)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-12"
                     fill="rgba(255,255,255,1)"
@@ -177,8 +163,8 @@
                     width="26"
                     height="23"
                   />
-                  <g id="g-svg-13" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                  <g id="g-svg-13" fill="none">
+                    <g>
                       <text
                         id="g-svg-14"
                         fill="rgba(0,0,0,1)"
diff --git a/__tests__/integration/snapshots/SelectEvents.svg b/__tests__/integration/snapshots/SelectEvents.svg
index b2a4685b6..181c7265b 100644
--- a/__tests__/integration/snapshots/SelectEvents.svg
+++ b/__tests__/integration/snapshots/SelectEvents.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="150"
-  height="42"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -19,43 +19,40 @@
       />
     </filter>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-20" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-21"
-          fill="none"
-          width="140"
-          height="32"
-          transform="matrix(1,0,0,1,10,10)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-20" fill="none">
+        <g id="g-svg-21" fill="none" x="10" y="10" width="140" height="32">
+          <g>
             <path
               id="g-svg-22"
               fill="rgba(255,255,255,1)"
-              d="M 8,0 l 124,0 a 8,8,0,0,1,8,8 l 0,16 a 8,8,0,0,1,-8,8 l -124,0 a 8,8,0,0,1,-8,-8 l 0,-16 a 8,8,0,0,1,8,-8 z"
+              d="M 18,10 l 124,0 a 8,8,0,0,1,8,8 l 0,16 a 8,8,0,0,1,-8,8 l -124,0 a 8,8,0,0,1,-8,-8 l 0,-16 a 8,8,0,0,1,8,-8 z"
               class="select"
               width="140"
               height="32"
+              x="10"
+              y="10"
               stroke="rgba(217,217,217,1)"
-              stroke-width="1"
             />
-            <g transform="matrix(1,0,0,1,109,12.500000)">
+            <g transform="matrix(1,0,0,1,124,26)">
               <path
                 id="g-svg-1"
                 fill="none"
-                d="M 0,0 L 5,7 L 10,0"
+                d="M -5,-3.5 L 0,3.5 L 5,-3.5"
                 stroke-width="1"
                 stroke="rgba(217,217,217,1)"
               />
             </g>
-            <g transform="matrix(1,0,0,1,8,4.500000)">
+            <g>
               <text
                 id="g-svg-2"
                 fill="rgba(194,194,194,1)"
                 class="placeholder"
+                x="18"
                 dominant-baseline="central"
                 paint-order="stroke"
+                y="14.5"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
@@ -64,7 +61,7 @@
               </text>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,42)">
+          <g transform="matrix(1,0,0,1,10,52)">
             <path
               id="g-svg-23"
               fill="rgba(255,255,255,1)"
@@ -76,12 +73,7 @@
               filter="url(#g-filter-dropshadow-23)"
               visibility="hidden"
             />
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="dropdown-container"
-            >
+            <g id="g-svg-3" fill="none" class="dropdown-container">
               <g
                 id="g-svg-4"
                 fill="none"
@@ -89,7 +81,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,8)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="rgba(255,255,255,1)"
@@ -99,7 +91,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-7"
                         fill="rgba(0,0,0,1)"
@@ -130,7 +122,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,47)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="rgba(255,255,255,1)"
@@ -140,7 +132,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-11"
                         fill="rgba(0,0,0,1)"
@@ -171,7 +163,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,86)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="rgba(255,255,255,1)"
@@ -181,7 +173,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-15"
                         fill="rgba(247,84,97,1)"
@@ -203,7 +195,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,142)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="rgba(255,255,255,1)"
@@ -213,7 +205,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-19"
                         fill="rgba(15,88,218,1)"
diff --git a/__tests__/integration/snapshots/SelectInvalidDefaultValue.svg b/__tests__/integration/snapshots/SelectInvalidDefaultValue.svg
index b2a4685b6..181c7265b 100644
--- a/__tests__/integration/snapshots/SelectInvalidDefaultValue.svg
+++ b/__tests__/integration/snapshots/SelectInvalidDefaultValue.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="150"
-  height="42"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -19,43 +19,40 @@
       />
     </filter>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-20" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-21"
-          fill="none"
-          width="140"
-          height="32"
-          transform="matrix(1,0,0,1,10,10)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-20" fill="none">
+        <g id="g-svg-21" fill="none" x="10" y="10" width="140" height="32">
+          <g>
             <path
               id="g-svg-22"
               fill="rgba(255,255,255,1)"
-              d="M 8,0 l 124,0 a 8,8,0,0,1,8,8 l 0,16 a 8,8,0,0,1,-8,8 l -124,0 a 8,8,0,0,1,-8,-8 l 0,-16 a 8,8,0,0,1,8,-8 z"
+              d="M 18,10 l 124,0 a 8,8,0,0,1,8,8 l 0,16 a 8,8,0,0,1,-8,8 l -124,0 a 8,8,0,0,1,-8,-8 l 0,-16 a 8,8,0,0,1,8,-8 z"
               class="select"
               width="140"
               height="32"
+              x="10"
+              y="10"
               stroke="rgba(217,217,217,1)"
-              stroke-width="1"
             />
-            <g transform="matrix(1,0,0,1,109,12.500000)">
+            <g transform="matrix(1,0,0,1,124,26)">
               <path
                 id="g-svg-1"
                 fill="none"
-                d="M 0,0 L 5,7 L 10,0"
+                d="M -5,-3.5 L 0,3.5 L 5,-3.5"
                 stroke-width="1"
                 stroke="rgba(217,217,217,1)"
               />
             </g>
-            <g transform="matrix(1,0,0,1,8,4.500000)">
+            <g>
               <text
                 id="g-svg-2"
                 fill="rgba(194,194,194,1)"
                 class="placeholder"
+                x="18"
                 dominant-baseline="central"
                 paint-order="stroke"
+                y="14.5"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
@@ -64,7 +61,7 @@
               </text>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,42)">
+          <g transform="matrix(1,0,0,1,10,52)">
             <path
               id="g-svg-23"
               fill="rgba(255,255,255,1)"
@@ -76,12 +73,7 @@
               filter="url(#g-filter-dropshadow-23)"
               visibility="hidden"
             />
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="dropdown-container"
-            >
+            <g id="g-svg-3" fill="none" class="dropdown-container">
               <g
                 id="g-svg-4"
                 fill="none"
@@ -89,7 +81,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,8)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="rgba(255,255,255,1)"
@@ -99,7 +91,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-7"
                         fill="rgba(0,0,0,1)"
@@ -130,7 +122,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,47)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="rgba(255,255,255,1)"
@@ -140,7 +132,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-11"
                         fill="rgba(0,0,0,1)"
@@ -171,7 +163,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,86)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="rgba(255,255,255,1)"
@@ -181,7 +173,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-15"
                         fill="rgba(247,84,97,1)"
@@ -203,7 +195,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,142)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="rgba(255,255,255,1)"
@@ -213,7 +205,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-19"
                         fill="rgba(15,88,218,1)"
diff --git a/__tests__/integration/snapshots/SelectNoBorder.svg b/__tests__/integration/snapshots/SelectNoBorder.svg
index c3efe101c..181c7265b 100644
--- a/__tests__/integration/snapshots/SelectNoBorder.svg
+++ b/__tests__/integration/snapshots/SelectNoBorder.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="150"
-  height="42"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -19,43 +19,40 @@
       />
     </filter>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-20" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-21"
-          fill="none"
-          width="140"
-          height="32"
-          transform="matrix(1,0,0,1,10,10)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-20" fill="none">
+        <g id="g-svg-21" fill="none" x="10" y="10" width="140" height="32">
+          <g>
             <path
               id="g-svg-22"
               fill="rgba(255,255,255,1)"
-              d="M 8,0 l 124,0 a 8,8,0,0,1,8,8 l 0,16 a 8,8,0,0,1,-8,8 l -124,0 a 8,8,0,0,1,-8,-8 l 0,-16 a 8,8,0,0,1,8,-8 z"
+              d="M 18,10 l 124,0 a 8,8,0,0,1,8,8 l 0,16 a 8,8,0,0,1,-8,8 l -124,0 a 8,8,0,0,1,-8,-8 l 0,-16 a 8,8,0,0,1,8,-8 z"
               class="select"
               width="140"
               height="32"
+              x="10"
+              y="10"
               stroke="rgba(217,217,217,1)"
-              stroke-width="0"
             />
-            <g transform="matrix(1,0,0,1,109,12.500000)">
+            <g transform="matrix(1,0,0,1,124,26)">
               <path
                 id="g-svg-1"
                 fill="none"
-                d="M 0,0 L 5,7 L 10,0"
+                d="M -5,-3.5 L 0,3.5 L 5,-3.5"
                 stroke-width="1"
                 stroke="rgba(217,217,217,1)"
               />
             </g>
-            <g transform="matrix(1,0,0,1,8,4.500000)">
+            <g>
               <text
                 id="g-svg-2"
                 fill="rgba(194,194,194,1)"
                 class="placeholder"
+                x="18"
                 dominant-baseline="central"
                 paint-order="stroke"
+                y="14.5"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
@@ -64,7 +61,7 @@
               </text>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,42)">
+          <g transform="matrix(1,0,0,1,10,52)">
             <path
               id="g-svg-23"
               fill="rgba(255,255,255,1)"
@@ -76,12 +73,7 @@
               filter="url(#g-filter-dropshadow-23)"
               visibility="hidden"
             />
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="dropdown-container"
-            >
+            <g id="g-svg-3" fill="none" class="dropdown-container">
               <g
                 id="g-svg-4"
                 fill="none"
@@ -89,7 +81,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,8)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="rgba(255,255,255,1)"
@@ -99,7 +91,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-7"
                         fill="rgba(0,0,0,1)"
@@ -130,7 +122,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,47)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="rgba(255,255,255,1)"
@@ -140,7 +132,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-11"
                         fill="rgba(0,0,0,1)"
@@ -171,7 +163,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,86)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="rgba(255,255,255,1)"
@@ -181,7 +173,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-15"
                         fill="rgba(247,84,97,1)"
@@ -203,7 +195,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,142)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="rgba(255,255,255,1)"
@@ -213,7 +205,7 @@
                     visibility="hidden"
                   />
                   <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-19"
                         fill="rgba(15,88,218,1)"
diff --git a/__tests__/integration/snapshots/SelectOpen.svg b/__tests__/integration/snapshots/SelectOpen.svg
index fdd6665e8..408942852 100644
--- a/__tests__/integration/snapshots/SelectOpen.svg
+++ b/__tests__/integration/snapshots/SelectOpen.svg
@@ -19,49 +19,40 @@
       />
     </filter>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-20"
-        fill="none"
-        width="160"
-        height="250"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-21"
-          fill="none"
-          width="140"
-          height="32"
-          transform="matrix(1,0,0,1,10,10)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-20" fill="none" width="160" height="250">
+        <g id="g-svg-21" fill="none" x="10" y="10" width="140" height="32">
+          <g>
             <path
               id="g-svg-22"
               fill="rgba(255,255,255,1)"
-              d="M 8,0 l 124,0 a 8,8,0,0,1,8,8 l 0,16 a 8,8,0,0,1,-8,8 l -124,0 a 8,8,0,0,1,-8,-8 l 0,-16 a 8,8,0,0,1,8,-8 z"
+              d="M 18,10 l 124,0 a 8,8,0,0,1,8,8 l 0,16 a 8,8,0,0,1,-8,8 l -124,0 a 8,8,0,0,1,-8,-8 l 0,-16 a 8,8,0,0,1,8,-8 z"
               class="select"
               width="140"
               height="32"
+              x="10"
+              y="10"
               stroke="rgba(217,217,217,1)"
-              stroke-width="1"
             />
-            <g transform="matrix(1,0,0,1,109,12.500000)">
+            <g transform="matrix(1,0,0,1,124,26)">
               <path
                 id="g-svg-1"
                 fill="none"
-                d="M 0,0 L 5,7 L 10,0"
+                d="M -5,-3.5 L 0,3.5 L 5,-3.5"
                 stroke-width="1"
                 stroke="rgba(217,217,217,1)"
               />
             </g>
-            <g transform="matrix(1,0,0,1,8,4.500000)">
+            <g>
               <text
                 id="g-svg-2"
                 fill="rgba(194,194,194,1)"
                 class="placeholder"
+                x="18"
                 dominant-baseline="central"
                 paint-order="stroke"
+                y="14.5"
                 dx="0.5"
                 dy="11.5px"
                 font-size="12"
@@ -70,7 +61,7 @@
               </text>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,42)">
+          <g transform="matrix(1,0,0,1,10,52)">
             <path
               id="g-svg-23"
               fill="rgba(255,255,255,1)"
@@ -81,12 +72,7 @@
               stroke="rgba(217,217,217,1)"
               filter="url(#g-filter-dropshadow-23)"
             />
-            <g
-              id="g-svg-3"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="dropdown-container"
-            >
+            <g id="g-svg-3" fill="none" class="dropdown-container">
               <g
                 id="g-svg-4"
                 fill="none"
@@ -94,7 +80,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,8)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-5"
                     fill="rgba(255,255,255,1)"
@@ -103,7 +89,7 @@
                     height="39"
                   />
                   <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-7"
                         fill="rgba(0,0,0,1)"
@@ -133,7 +119,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,47)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-9"
                     fill="rgba(255,255,255,1)"
@@ -142,7 +128,7 @@
                     height="39"
                   />
                   <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <text
                         id="g-svg-11"
                         fill="rgba(0,0,0,1)"
@@ -172,7 +158,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,86)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-13"
                     fill="rgba(255,255,255,1)"
@@ -181,7 +167,7 @@
                     height="56"
                   />
                   <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-15"
                         fill="rgba(247,84,97,1)"
@@ -202,7 +188,7 @@
                 width="124"
                 transform="matrix(1,0,0,1,8,142)"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path
                     id="g-svg-17"
                     fill="rgba(255,255,255,1)"
@@ -211,7 +197,7 @@
                     height="36"
                   />
                   <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,12,8)">
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-19"
                         fill="rgba(15,88,218,1)"
diff --git a/__tests__/integration/snapshots/Slider1.svg b/__tests__/integration/snapshots/Slider1.svg
index 02f8f6574..f50e97230 100644
--- a/__tests__/integration/snapshots/Slider1.svg
+++ b/__tests__/integration/snapshots/Slider1.svg
@@ -6,66 +6,63 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-61" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-62" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-61" fill="none">
+        <g id="g-svg-62" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(65,97,128,1)"
               class="slider-track"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
               opacity="0.05"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-3"
               fill="none"
+              x="10"
+              y="10"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-4" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-5"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="10"
+                transform="matrix(1,0,0,1,10,10)"
               >
-                <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)" />
-                <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-6" fill="none" />
+                <g id="g-svg-7" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-8"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
             />
           </g>
-          <g
-            id="g-svg-9"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-9" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-10"
                 fill="rgba(91,143,249,1)"
@@ -75,7 +72,7 @@
                 height="50"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-11"
                 fill="rgba(91,143,249,1)"
@@ -87,7 +84,7 @@
                 width="300"
               />
             </g>
-            <g transform="matrix(1,0,0,1,300,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-12"
                 fill="rgba(91,143,249,1)"
@@ -95,58 +92,53 @@
                 visibility="hidden"
                 fill-opacity="0.45"
                 height="50"
+                x="300"
               />
             </g>
             <g
               id="g-svg-15"
               fill="none"
-              transform="matrix(1,0,0,1,0,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,10,35)"
               class="slider-handle start-handle"
             >
-              <g
-                id="g-svg-16"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-17"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-16" fill="none" class="handle-icon-group">
+                <g id="g-svg-17" fill="none" x="0" y="0" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-18"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-19"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-20"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -155,13 +147,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-21"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,16.340000,0)">
+              <g id="g-svg-21" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -169,9 +156,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="16.34"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
+                    y="0"
                   >
                     0
                   </text>
@@ -181,53 +170,47 @@
             <g
               id="g-svg-25"
               fill="none"
-              transform="matrix(1,0,0,1,300,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,310,35)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-26"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-27"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-26" fill="none" class="handle-icon-group">
+                <g id="g-svg-27" fill="none" x="0" y="0" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-28"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-29"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-30"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -236,13 +219,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-31"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,-15.380000,0)">
+              <g id="g-svg-31" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-32"
                     fill="rgba(0,0,0,1)"
@@ -250,9 +228,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="-15.379999999999999"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
+                    y="0"
                   >
                     1
                   </text>
diff --git a/__tests__/integration/snapshots/Slider10.svg b/__tests__/integration/snapshots/Slider10.svg
index 05334ba69..71a224dc4 100644
--- a/__tests__/integration/snapshots/Slider10.svg
+++ b/__tests__/integration/snapshots/Slider10.svg
@@ -6,98 +6,101 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-25" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-25" fill="none">
+        <g id="g-svg-26" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(216,232,251,1)"
               class="slider-track"
-              d="M 5,0 l 290,0 a 5,5,0,0,1,5,5 l 0,0 a 5,5,0,0,1,-5,5 l -290,0 a 5,5,0,0,1,-5,-5 l 0,0 a 5,5,0,0,1,5,-5 z"
+              d="M 15,10 l 290,0 a 5,5,0,0,1,5,5 l 0,0 a 5,5,0,0,1,-5,5 l -290,0 a 5,5,0,0,1,-5,-5 l 0,0 a 5,5,0,0,1,5,-5 z"
+              x="10"
+              y="10"
               width="300"
               height="10"
               opacity="0.5"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-3"
               fill="none"
+              x="10"
+              y="10"
               width="296"
               height="6"
-              transform="matrix(1,0,0,1,2,2)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-4" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-5"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="10"
+                transform="matrix(1,0,0,1,10,10)"
               >
-                <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)" />
-                <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-6" fill="none" />
+                <g id="g-svg-7" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-8"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 300,0 l 0,10 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,10 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="10"
             />
           </g>
-          <g
-            id="g-svg-9"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,2,2)">
+          <g id="g-svg-9" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-10"
                 fill="rgba(91,143,249,1)"
                 class="slider-selection"
                 visibility="hidden"
                 fill-opacity="0.45"
-                d="M 3,0 l 68,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -68,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+                d="M 5,2 l 68,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -68,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+                y="2"
                 height="6"
+                x="2"
                 width="74"
               />
             </g>
-            <g transform="matrix(1,0,0,1,76,2)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-11"
                 fill="rgba(91,143,249,1)"
                 class="slider-selection"
                 visibility="visible"
                 fill-opacity="0.45"
-                d="M 3,0 l 142,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -142,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+                d="M 79,2 l 142,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -142,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+                y="2"
                 height="6"
+                x="76"
                 width="148"
               />
             </g>
-            <g transform="matrix(1,0,0,1,222,2)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-12"
                 fill="rgba(91,143,249,1)"
                 class="slider-selection"
                 visibility="hidden"
                 fill-opacity="0.45"
-                d="M 3,0 l 68,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -68,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+                d="M 225,2 l 68,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -68,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+                y="2"
                 height="6"
+                x="222"
                 width="74"
               />
             </g>
diff --git a/__tests__/integration/snapshots/Slider11.svg b/__tests__/integration/snapshots/Slider11.svg
index 085511491..bb1856042 100644
--- a/__tests__/integration/snapshots/Slider11.svg
+++ b/__tests__/integration/snapshots/Slider11.svg
@@ -6,76 +6,76 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-13" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-13" fill="none">
+        <g id="g-svg-14" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(216,232,251,1)"
               class="slider-track"
-              d="M 5,0 l 0,0 a 5,5,0,0,1,5,5 l 0,290 a 5,5,0,0,1,-5,5 l 0,0 a 5,5,0,0,1,-5,-5 l 0,-290 a 5,5,0,0,1,5,-5 z"
+              d="M 15,10 l 0,0 a 5,5,0,0,1,5,5 l 0,290 a 5,5,0,0,1,-5,5 l 0,0 a 5,5,0,0,1,-5,-5 l 0,-290 a 5,5,0,0,1,5,-5 z"
+              x="10"
+              y="10"
               width="10"
               height="300"
               opacity="0.5"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          />
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group" />
+          <g>
             <path
               id="g-svg-3"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 10,0 l 0,300 l-10 0 z"
+              d="M 10,10 l 10,0 l 0,300 l-10 0 z"
+              x="10"
+              y="10"
               width="10"
               height="300"
             />
           </g>
-          <g
-            id="g-svg-4"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,2,2)">
+          <g id="g-svg-4" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-5"
                 fill="rgba(91,143,249,1)"
                 class="slider-selection"
                 visibility="hidden"
                 fill-opacity="0.45"
-                d="M 3,0 l 0,0 a 3,3,0,0,1,3,3 l 0,68 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-68 a 3,3,0,0,1,3,-3 z"
+                d="M 5,2 l 0,0 a 3,3,0,0,1,3,3 l 0,68 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-68 a 3,3,0,0,1,3,-3 z"
+                x="2"
                 width="6"
+                y="2"
                 height="74"
               />
             </g>
-            <g transform="matrix(1,0,0,1,2,76)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-6"
                 fill="rgba(91,143,249,1)"
                 class="slider-selection"
                 visibility="visible"
                 fill-opacity="0.45"
-                d="M 3,0 l 0,0 a 3,3,0,0,1,3,3 l 0,142 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-142 a 3,3,0,0,1,3,-3 z"
+                d="M 5,76 l 0,0 a 3,3,0,0,1,3,3 l 0,142 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-142 a 3,3,0,0,1,3,-3 z"
+                x="2"
                 width="6"
+                y="76"
                 height="148"
               />
             </g>
-            <g transform="matrix(1,0,0,1,2,222)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-7"
                 fill="rgba(91,143,249,1)"
                 class="slider-selection"
                 visibility="hidden"
                 fill-opacity="0.45"
-                d="M 3,0 l 0,0 a 3,3,0,0,1,3,3 l 0,68 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-68 a 3,3,0,0,1,3,-3 z"
+                d="M 5,222 l 0,0 a 3,3,0,0,1,3,3 l 0,68 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-68 a 3,3,0,0,1,3,-3 z"
+                x="2"
                 width="6"
+                y="222"
                 height="74"
               />
             </g>
diff --git a/__tests__/integration/snapshots/Slider12.svg b/__tests__/integration/snapshots/Slider12.svg
index ef8289858..fa1260431 100644
--- a/__tests__/integration/snapshots/Slider12.svg
+++ b/__tests__/integration/snapshots/Slider12.svg
@@ -6,72 +6,63 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-8"
-        fill="none"
-        width="550"
-        height="50"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-9" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-8" fill="none" width="550" height="50">
+        <g id="g-svg-9" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(65,97,128,1)"
               class="slider-track"
-              d="M 0,0 l 510,0 l 0,16 l-510 0 z"
+              d="M 10,10 l 510,0 l 0,16 l-510 0 z"
+              x="10"
+              y="10"
               width="510"
               height="16"
               opacity="0.05"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-3"
               fill="none"
+              x="10"
+              y="10"
               width="510"
               height="16"
-              transform="matrix(1,0,0,1,0,0)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-4" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-5"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="10"
+                transform="matrix(1,0,0,1,10,10)"
               >
-                <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)" />
-                <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-6" fill="none" />
+                <g id="g-svg-7" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-8"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 510,0 l 0,16 l-510 0 z"
+              d="M 10,10 l 510,0 l 0,16 l-510 0 z"
+              x="10"
+              y="10"
               width="510"
               height="16"
             />
           </g>
-          <g
-            id="g-svg-9"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-9" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-10"
                 fill="rgba(91,143,249,1)"
@@ -81,7 +72,7 @@
                 height="16"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-11"
                 fill="rgba(91,143,249,1)"
@@ -93,7 +84,7 @@
                 width="510"
               />
             </g>
-            <g transform="matrix(1,0,0,1,510,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-12"
                 fill="rgba(91,143,249,1)"
@@ -101,27 +92,20 @@
                 visibility="hidden"
                 fill-opacity="0.15"
                 height="16"
+                x="510"
               />
             </g>
             <g
               id="g-svg-15"
               fill="none"
-              transform="matrix(1,0,0,1,0,8)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,10,18)"
               class="slider-handle start-handle"
             >
-              <g
-                id="g-svg-16"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-17"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-16" fill="none" class="handle-icon-group">
+                <g id="g-svg-17" fill="none" x="0" y="0" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-18"
                       fill="rgba(247,247,247,1)"
@@ -129,32 +113,34 @@
                       stroke-width="1"
                       stroke="rgba(0,0,0,1)"
                       stroke-opacity="0.25"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-19"
                         fill="rgba(247,247,247,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(0,0,0,1)"
                         stroke-opacity="0.25"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-20"
                         fill="rgba(247,247,247,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(0,0,0,1)"
@@ -164,13 +150,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-21"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,16.340000,0)">
+              <g id="g-svg-21" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -178,10 +159,12 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="16.34"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
                     font-weight="normal"
+                    y="0"
                   >
                     0
                   </text>
@@ -191,22 +174,14 @@
             <g
               id="g-svg-25"
               fill="none"
-              transform="matrix(1,0,0,1,510,8)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,520,18)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-26"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-27"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-26" fill="none" class="handle-icon-group">
+                <g id="g-svg-27" fill="none" x="0" y="0" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-28"
                       fill="rgba(247,247,247,1)"
@@ -214,32 +189,34 @@
                       stroke-width="1"
                       stroke="rgba(0,0,0,1)"
                       stroke-opacity="0.25"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-29"
                         fill="rgba(247,247,247,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(0,0,0,1)"
                         stroke-opacity="0.25"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-30"
                         fill="rgba(247,247,247,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(0,0,0,1)"
@@ -249,13 +226,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-31"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,-15.380000,0)">
+              <g id="g-svg-31" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-32"
                     fill="rgba(0,0,0,1)"
@@ -263,10 +235,12 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="-15.379999999999999"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
                     font-weight="normal"
+                    y="0"
                   >
                     1
                   </text>
diff --git a/__tests__/integration/snapshots/Slider2.svg b/__tests__/integration/snapshots/Slider2.svg
index 992b885d6..839d60cef 100644
--- a/__tests__/integration/snapshots/Slider2.svg
+++ b/__tests__/integration/snapshots/Slider2.svg
@@ -6,44 +6,38 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-33" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-34" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-33" fill="none">
+        <g id="g-svg-34" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(65,97,128,1)"
               class="slider-track"
-              d="M 0,0 l 50,0 l 0,300 l-50 0 z"
+              d="M 10,10 l 50,0 l 0,300 l-50 0 z"
+              x="10"
+              y="10"
               width="50"
               height="300"
               opacity="0.05"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          />
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group" />
+          <g>
             <path
               id="g-svg-3"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 50,0 l 0,300 l-50 0 z"
+              d="M 10,10 l 50,0 l 0,300 l-50 0 z"
+              x="10"
+              y="10"
               width="50"
               height="300"
             />
           </g>
-          <g
-            id="g-svg-4"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-4" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-5"
                 fill="rgba(91,143,249,1)"
@@ -53,7 +47,7 @@
                 width="50"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-6"
                 fill="rgba(91,143,249,1)"
@@ -65,7 +59,7 @@
                 height="300"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,300)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-7"
                 fill="rgba(91,143,249,1)"
@@ -73,58 +67,53 @@
                 visibility="hidden"
                 fill-opacity="0.45"
                 width="50"
+                y="300"
               />
             </g>
             <g
               id="g-svg-10"
               fill="none"
-              transform="matrix(1,0,0,1,25,0)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,35,10)"
               class="slider-handle start-handle"
             >
-              <g
-                id="g-svg-11"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-12"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-11" fill="none" class="handle-icon-group">
+                <g id="g-svg-12" fill="none" x="0" y="0" class="handle-icon">
+                  <g transform="matrix(0,1,-1,0,0,0)">
                     <path
                       id="g-svg-13"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-14"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-15"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -133,13 +122,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-16"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(0,1,-1,0,0,12)">
+              <g id="g-svg-16" fill="none" class="handle-label-group">
+                <g transform="matrix(0,1,-1,0,12,12)">
                   <text
                     id="g-svg-17"
                     fill="rgba(0,0,0,1)"
@@ -147,9 +131,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    y="12"
                     dx="0.5"
                     font-size="12"
                     text-anchor="left"
+                    x="0"
                   >
                     0
                   </text>
@@ -159,53 +145,47 @@
             <g
               id="g-svg-20"
               fill="none"
-              transform="matrix(1,0,0,1,25,300)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,35,310)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-21"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-22"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-21" fill="none" class="handle-icon-group">
+                <g id="g-svg-22" fill="none" x="0" y="0" class="handle-icon">
+                  <g transform="matrix(0,1,-1,0,0,0)">
                     <path
                       id="g-svg-23"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-24"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-25"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -214,13 +194,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-26"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(0,1,-1,0,0,-12)">
+              <g id="g-svg-26" fill="none" class="handle-label-group">
+                <g transform="matrix(0,1,-1,0,-11,-13)">
                   <text
                     id="g-svg-27"
                     fill="rgba(0,0,0,1)"
@@ -228,9 +203,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    y="-12"
                     dx="0.5"
                     font-size="12"
                     text-anchor="end"
+                    x="0"
                   >
                     1
                   </text>
diff --git a/__tests__/integration/snapshots/Slider3.svg b/__tests__/integration/snapshots/Slider3.svg
index 765602a0c..8e0e13eb5 100644
--- a/__tests__/integration/snapshots/Slider3.svg
+++ b/__tests__/integration/snapshots/Slider3.svg
@@ -6,66 +6,63 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-28" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-29" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-28" fill="none">
+        <g id="g-svg-29" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(65,97,128,1)"
               class="slider-track"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
               opacity="0.05"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-3"
               fill="none"
+              x="10"
+              y="10"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-4" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-5"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="10"
+                transform="matrix(1,0,0,1,10,10)"
               >
-                <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)" />
-                <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-6" fill="none" />
+                <g id="g-svg-7" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-8"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
             />
           </g>
-          <g
-            id="g-svg-9"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-9" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-10"
                 fill="rgba(91,143,249,1)"
@@ -77,80 +74,76 @@
                 width="75"
               />
             </g>
-            <g transform="matrix(1,0,0,1,75,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-11"
                 fill="rgba(91,143,249,1)"
                 class="slider-selection"
                 visibility="visible"
                 fill-opacity="0.45"
-                d="M 0,0 l 150,0 l 0,50 l-150 0 z"
+                d="M 75,0 l 150,0 l 0,50 l-150 0 z"
                 height="50"
+                x="75"
                 width="150"
               />
             </g>
-            <g transform="matrix(1,0,0,1,225,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-12"
                 fill="rgba(91,143,249,1)"
                 class="slider-selection"
                 visibility="hidden"
                 fill-opacity="0.45"
-                d="M 0,0 l 75,0 l 0,50 l-75 0 z"
+                d="M 225,0 l 75,0 l 0,50 l-75 0 z"
                 height="50"
+                x="225"
                 width="75"
               />
             </g>
             <g
               id="g-svg-15"
               fill="none"
-              transform="matrix(1,0,0,1,75,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,85,35)"
               class="slider-handle start-handle"
             >
-              <g
-                id="g-svg-16"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-17"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-16" fill="none" class="handle-icon-group">
+                <g id="g-svg-17" fill="none" x="0" y="0" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-18"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-19"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-20"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -159,13 +152,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-21"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,-25.700001,0)">
+              <g id="g-svg-21" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -173,9 +161,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="-25.7"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
+                    y="0"
                   >
                     0.25
                   </text>
@@ -185,53 +175,47 @@
             <g
               id="g-svg-25"
               fill="none"
-              transform="matrix(1,0,0,1,225,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,235,35)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-26"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-27"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-26" fill="none" class="handle-icon-group">
+                <g id="g-svg-27" fill="none" x="0" y="0" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-28"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-29"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-30"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -240,13 +224,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-31"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,25.459999,0)">
+              <g id="g-svg-31" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-32"
                     fill="rgba(0,0,0,1)"
@@ -254,9 +233,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="25.46"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
+                    y="0"
                   >
                     0.75
                   </text>
diff --git a/__tests__/integration/snapshots/Slider4.svg b/__tests__/integration/snapshots/Slider4.svg
index aea96e0a2..6f255fe66 100644
--- a/__tests__/integration/snapshots/Slider4.svg
+++ b/__tests__/integration/snapshots/Slider4.svg
@@ -6,66 +6,63 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-33" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-34" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-33" fill="none">
+        <g id="g-svg-34" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(65,97,128,1)"
               class="slider-track"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
               opacity="0.05"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-3"
               fill="none"
+              x="10"
+              y="10"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-4" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-5"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="10"
+                transform="matrix(1,0,0,1,10,10)"
               >
-                <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)" />
-                <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-6" fill="none" />
+                <g id="g-svg-7" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-8"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
             />
           </g>
-          <g
-            id="g-svg-9"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-9" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-10"
                 fill="rgba(91,143,249,1)"
@@ -75,7 +72,7 @@
                 height="50"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-11"
                 fill="rgba(91,143,249,1)"
@@ -87,7 +84,7 @@
                 width="300"
               />
             </g>
-            <g transform="matrix(1,0,0,1,300,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-12"
                 fill="rgba(91,143,249,1)"
@@ -95,58 +92,53 @@
                 visibility="hidden"
                 fill-opacity="0.45"
                 height="50"
+                x="300"
               />
             </g>
             <g
               id="g-svg-15"
               fill="none"
-              transform="matrix(1,0,0,1,0,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,10,35)"
               class="slider-handle start-handle"
             >
-              <g
-                id="g-svg-16"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-17"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-16" fill="none" class="handle-icon-group">
+                <g id="g-svg-17" fill="none" x="0" y="0" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-18"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-19"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-20"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -155,13 +147,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-21"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,16.340000,0)">
+              <g id="g-svg-21" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-22"
                     fill="rgba(0,0,0,1)"
@@ -169,9 +156,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="16.34"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
+                    y="0"
                   >
                     0
                   </text>
@@ -181,53 +170,47 @@
             <g
               id="g-svg-25"
               fill="none"
-              transform="matrix(1,0,0,1,300,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,310,35)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-26"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-27"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-26" fill="none" class="handle-icon-group">
+                <g id="g-svg-27" fill="none" x="0" y="0" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-28"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-29"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-30"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -236,13 +219,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-31"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,-15.380000,0)">
+              <g id="g-svg-31" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-32"
                     fill="rgba(0,0,0,1)"
@@ -250,9 +228,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="-15.379999999999999"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
+                    y="0"
                   >
                     1
                   </text>
diff --git a/__tests__/integration/snapshots/Slider5.svg b/__tests__/integration/snapshots/Slider5.svg
index 0a5cd3654..5f7fcb68c 100644
--- a/__tests__/integration/snapshots/Slider5.svg
+++ b/__tests__/integration/snapshots/Slider5.svg
@@ -6,66 +6,66 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-33" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-34" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-33" fill="none">
+        <g id="g-svg-34" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(65,97,128,1)"
               class="slider-track"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
               opacity="0.05"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-3"
               fill="none"
+              x="10"
+              y="10"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-4" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-5"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="10"
+                transform="matrix(1,0,0,1,10,10)"
               >
-                <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,31.250000)">
+                <g id="g-svg-6" fill="none">
+                  <g>
                     <path
                       id="g-svg-14"
                       fill="none"
                       class="line"
                       stroke="rgba(131,218,173,1)"
-                      d="M 0,6.25 L 33.33333333333333,16.25 L 66.66666666666666,15 L 100,13.75 L 133.33333333333331,0 L 166.66666666666669,6.25 L 200,12.5 L 233.33333333333334,18.75 L 266.66666666666663,15 L 300,17.5"
+                      d="M 0,37.5 L 33.33333333333333,47.5 L 66.66666666666666,46.25 L 100,45 L 133.33333333333331,31.25 L 166.66666666666669,37.5 L 200,43.75 L 233.33333333333334,50 L 266.66666666666663,46.25 L 300,48.75"
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,18.750000)">
+                  <g>
                     <path
                       id="g-svg-15"
                       fill="none"
                       class="line"
                       stroke="rgba(237,191,69,1)"
-                      d="M 0,12.5 L 33.33333333333333,20 L 66.66666666666666,15 L 100,22.5 L 133.33333333333331,0 L 166.66666666666669,11.25 L 200,12.5 L 233.33333333333334,30 L 266.66666666666663,21.25 L 300,30"
+                      d="M 0,31.25 L 33.33333333333333,38.75 L 66.66666666666666,33.75 L 100,41.25 L 133.33333333333331,18.75 L 166.66666666666669,30 L 200,31.25 L 233.33333333333334,48.75 L 266.66666666666663,40 L 300,48.75"
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-16"
                       fill="none"
@@ -75,7 +75,7 @@
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-17"
                       fill="rgba(131,218,173,1)"
@@ -84,46 +84,43 @@
                       opacity="0"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,18.750000)">
+                  <g>
                     <path
                       id="g-svg-18"
                       fill="rgba(237,191,69,1)"
                       class="area"
-                      d="M 0,12.5 L 33.33333333333333,20 L 66.66666666666666,15 L 100,22.5 L 133.33333333333331,0 L 166.66666666666669,11.25 L 200,12.5 L 233.33333333333334,30 L 266.66666666666663,21.25 L 300,30 L 300,30 L 266.66666666666663,27.5 L 233.33333333333334,31.25 L 200,25 L 166.66666666666669,18.75 L 133.33333333333331,12.5 L 100,26.25 L 66.66666666666666,27.5 L 33.33333333333333,28.75 L 0,18.75 Z"
+                      d="M 0,31.25 L 33.33333333333333,38.75 L 66.66666666666666,33.75 L 100,41.25 L 133.33333333333331,18.75 L 166.66666666666669,30 L 200,31.25 L 233.33333333333334,48.75 L 266.66666666666663,40 L 300,48.75 L 300,48.75 L 266.66666666666663,46.25 L 233.33333333333334,50 L 200,43.75 L 166.66666666666669,37.5 L 133.33333333333331,31.25 L 100,45 L 66.66666666666666,46.25 L 33.33333333333333,47.5 L 0,37.5 Z"
                       opacity="0"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,31.250000)">
+                  <g>
                     <path
                       id="g-svg-19"
                       fill="rgba(210,206,249,1)"
                       class="area"
-                      d="M 0,6.25 L 33.33333333333333,16.25 L 66.66666666666666,15 L 100,13.75 L 133.33333333333331,0 L 166.66666666666669,6.25 L 200,12.5 L 233.33333333333334,18.75 L 266.66666666666663,15 L 300,17.5 L 300,18.75 L 0,18.75 Z"
+                      d="M 0,37.5 L 33.33333333333333,47.5 L 66.66666666666666,46.25 L 100,45 L 133.33333333333331,31.25 L 166.66666666666669,37.5 L 200,43.75 L 233.33333333333334,50 L 266.66666666666663,46.25 L 300,48.75 L 300,50 L 0,50 Z"
                       opacity="0"
                     />
                   </g>
                 </g>
-                <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-7" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-20"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
             />
           </g>
-          <g
-            id="g-svg-21"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-21" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-22"
                 fill="rgba(91,143,249,1)"
@@ -133,7 +130,7 @@
                 height="50"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-23"
                 fill="rgba(91,143,249,1)"
@@ -145,7 +142,7 @@
                 width="300"
               />
             </g>
-            <g transform="matrix(1,0,0,1,300,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-24"
                 fill="rgba(91,143,249,1)"
@@ -153,58 +150,53 @@
                 visibility="hidden"
                 fill-opacity="0.45"
                 height="50"
+                x="300"
               />
             </g>
             <g
               id="g-svg-27"
               fill="none"
-              transform="matrix(1,0,0,1,0,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,10,35)"
               class="slider-handle start-handle"
             >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-29"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-28" fill="none" class="handle-icon-group">
+                <g id="g-svg-29" fill="none" x="0" y="0" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-30"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-31"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-32"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -213,13 +205,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-33"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,16.340000,0)">
+              <g id="g-svg-33" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-34"
                     fill="rgba(0,0,0,1)"
@@ -227,9 +214,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="16.34"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
+                    y="0"
                   >
                     0
                   </text>
@@ -239,53 +228,47 @@
             <g
               id="g-svg-37"
               fill="none"
-              transform="matrix(1,0,0,1,300,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,310,35)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-38"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-39"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-38" fill="none" class="handle-icon-group">
+                <g id="g-svg-39" fill="none" x="0" y="0" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-40"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-41"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-42"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -294,13 +277,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-43"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,-15.380000,0)">
+              <g id="g-svg-43" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -308,9 +286,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="-15.379999999999999"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
+                    y="0"
                   >
                     1
                   </text>
diff --git a/__tests__/integration/snapshots/Slider6.svg b/__tests__/integration/snapshots/Slider6.svg
index 98b0c68cd..4037a0c74 100644
--- a/__tests__/integration/snapshots/Slider6.svg
+++ b/__tests__/integration/snapshots/Slider6.svg
@@ -6,66 +6,66 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-45" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-46" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-45" fill="none">
+        <g id="g-svg-46" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(65,97,128,1)"
               class="slider-track"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
               opacity="0.05"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-3"
               fill="none"
+              x="10"
+              y="10"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-4" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-5"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="10"
+                transform="matrix(1,0,0,1,10,10)"
               >
-                <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,31.250000)">
+                <g id="g-svg-6" fill="none">
+                  <g>
                     <path
                       id="g-svg-14"
                       fill="none"
                       class="line"
                       stroke="rgba(131,218,173,1)"
-                      d="M 0,6.25 L 33.33333333333333,16.25 L 66.66666666666666,15 L 100,13.75 L 133.33333333333331,0 L 166.66666666666669,6.25 L 200,12.5 L 233.33333333333334,18.75 L 266.66666666666663,15 L 300,17.5"
+                      d="M 0,37.5 L 33.33333333333333,47.5 L 66.66666666666666,46.25 L 100,45 L 133.33333333333331,31.25 L 166.66666666666669,37.5 L 200,43.75 L 233.33333333333334,50 L 266.66666666666663,46.25 L 300,48.75"
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,18.750000)">
+                  <g>
                     <path
                       id="g-svg-15"
                       fill="none"
                       class="line"
                       stroke="rgba(237,191,69,1)"
-                      d="M 0,12.5 L 33.33333333333333,20 L 66.66666666666666,15 L 100,22.5 L 133.33333333333331,0 L 166.66666666666669,11.25 L 200,12.5 L 233.33333333333334,30 L 266.66666666666663,21.25 L 300,30"
+                      d="M 0,31.25 L 33.33333333333333,38.75 L 66.66666666666666,33.75 L 100,41.25 L 133.33333333333331,18.75 L 166.66666666666669,30 L 200,31.25 L 233.33333333333334,48.75 L 266.66666666666663,40 L 300,48.75"
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-16"
                       fill="none"
@@ -75,7 +75,7 @@
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-17"
                       fill="rgba(131,218,173,1)"
@@ -84,46 +84,43 @@
                       opacity="0"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,18.750000)">
+                  <g>
                     <path
                       id="g-svg-18"
                       fill="rgba(237,191,69,1)"
                       class="area"
-                      d="M 0,12.5 L 33.33333333333333,20 L 66.66666666666666,15 L 100,22.5 L 133.33333333333331,0 L 166.66666666666669,11.25 L 200,12.5 L 233.33333333333334,30 L 266.66666666666663,21.25 L 300,30 L 300,30 L 266.66666666666663,27.5 L 233.33333333333334,31.25 L 200,25 L 166.66666666666669,18.75 L 133.33333333333331,12.5 L 100,26.25 L 66.66666666666666,27.5 L 33.33333333333333,28.75 L 0,18.75 Z"
+                      d="M 0,31.25 L 33.33333333333333,38.75 L 66.66666666666666,33.75 L 100,41.25 L 133.33333333333331,18.75 L 166.66666666666669,30 L 200,31.25 L 233.33333333333334,48.75 L 266.66666666666663,40 L 300,48.75 L 300,48.75 L 266.66666666666663,46.25 L 233.33333333333334,50 L 200,43.75 L 166.66666666666669,37.5 L 133.33333333333331,31.25 L 100,45 L 66.66666666666666,46.25 L 33.33333333333333,47.5 L 0,37.5 Z"
                       opacity="0"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,31.250000)">
+                  <g>
                     <path
                       id="g-svg-19"
                       fill="rgba(210,206,249,1)"
                       class="area"
-                      d="M 0,6.25 L 33.33333333333333,16.25 L 66.66666666666666,15 L 100,13.75 L 133.33333333333331,0 L 166.66666666666669,6.25 L 200,12.5 L 233.33333333333334,18.75 L 266.66666666666663,15 L 300,17.5 L 300,18.75 L 0,18.75 Z"
+                      d="M 0,37.5 L 33.33333333333333,47.5 L 66.66666666666666,46.25 L 100,45 L 133.33333333333331,31.25 L 166.66666666666669,37.5 L 200,43.75 L 233.33333333333334,50 L 266.66666666666663,46.25 L 300,48.75 L 300,50 L 0,50 Z"
                       opacity="0"
                     />
                   </g>
                 </g>
-                <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-7" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-20"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
             />
           </g>
-          <g
-            id="g-svg-21"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-21" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-22"
                 fill="rgba(91,143,249,1)"
@@ -133,7 +130,7 @@
                 height="50"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-23"
                 fill="rgba(91,143,249,1)"
@@ -145,7 +142,7 @@
                 width="300"
               />
             </g>
-            <g transform="matrix(1,0,0,1,300,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-24"
                 fill="rgba(91,143,249,1)"
@@ -153,58 +150,53 @@
                 visibility="hidden"
                 fill-opacity="0.45"
                 height="50"
+                x="300"
               />
             </g>
             <g
               id="g-svg-27"
               fill="none"
-              transform="matrix(1,0,0,1,0,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,10,35)"
               class="slider-handle start-handle"
             >
-              <g
-                id="g-svg-28"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-29"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-28" fill="none" class="handle-icon-group">
+                <g id="g-svg-29" fill="none" x="0" y="0" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-30"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-31"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-32"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -213,13 +205,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-33"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,26.719999,0)">
+              <g id="g-svg-33" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-34"
                     fill="rgba(0,0,0,1)"
@@ -227,9 +214,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="26.72"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
+                    y="0"
                   >
                     0°C
                   </text>
@@ -239,53 +228,47 @@
             <g
               id="g-svg-37"
               fill="none"
-              transform="matrix(1,0,0,1,300,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,310,35)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-38"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-39"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-38" fill="none" class="handle-icon-group">
+                <g id="g-svg-39" fill="none" x="0" y="0" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-40"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-41"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-42"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -294,13 +277,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-43"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,-25.760000,0)">
+              <g id="g-svg-43" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-44"
                     fill="rgba(0,0,0,1)"
@@ -308,9 +286,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="-25.759999999999998"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
+                    y="0"
                   >
                     1°C
                   </text>
diff --git a/__tests__/integration/snapshots/Slider7.svg b/__tests__/integration/snapshots/Slider7.svg
index 5463c0ac9..7344f1082 100644
--- a/__tests__/integration/snapshots/Slider7.svg
+++ b/__tests__/integration/snapshots/Slider7.svg
@@ -6,44 +6,38 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-45" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-46" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-45" fill="none">
+        <g id="g-svg-46" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(65,97,128,1)"
               class="slider-track"
-              d="M 0,0 l 50,0 l 0,300 l-50 0 z"
+              d="M 10,10 l 50,0 l 0,300 l-50 0 z"
+              x="10"
+              y="10"
               width="50"
               height="300"
               opacity="0.05"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          />
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group" />
+          <g>
             <path
               id="g-svg-3"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 50,0 l 0,300 l-50 0 z"
+              d="M 10,10 l 50,0 l 0,300 l-50 0 z"
+              x="10"
+              y="10"
               width="50"
               height="300"
             />
           </g>
-          <g
-            id="g-svg-4"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-4" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-5"
                 fill="rgba(91,143,249,1)"
@@ -53,7 +47,7 @@
                 width="50"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-6"
                 fill="rgba(91,143,249,1)"
@@ -65,7 +59,7 @@
                 height="300"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,300)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-7"
                 fill="rgba(91,143,249,1)"
@@ -73,58 +67,53 @@
                 visibility="hidden"
                 fill-opacity="0.45"
                 width="50"
+                y="300"
               />
             </g>
             <g
               id="g-svg-10"
               fill="none"
-              transform="matrix(1,0,0,1,25,0)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,35,10)"
               class="slider-handle start-handle"
             >
-              <g
-                id="g-svg-11"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-12"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-11" fill="none" class="handle-icon-group">
+                <g id="g-svg-12" fill="none" x="0" y="0" class="handle-icon">
+                  <g transform="matrix(0,1,-1,0,0,0)">
                     <path
                       id="g-svg-13"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-14"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-15"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -133,13 +122,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-16"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(0,1,-1,0,0,12)">
+              <g id="g-svg-16" fill="none" class="handle-label-group">
+                <g transform="matrix(0,1,-1,0,12,12)">
                   <text
                     id="g-svg-17"
                     fill="rgba(0,0,0,1)"
@@ -147,9 +131,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    y="12"
                     dx="0.5"
                     font-size="12"
                     text-anchor="left"
+                    x="0"
                   >
                     0°C
                   </text>
@@ -159,53 +145,47 @@
             <g
               id="g-svg-20"
               fill="none"
-              transform="matrix(1,0,0,1,25,300)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,35,310)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-21"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-22"
-                  fill="none"
-                  transform="matrix(0,1,-1,0,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-12)">
+              <g id="g-svg-21" fill="none" class="handle-icon-group">
+                <g id="g-svg-22" fill="none" x="0" y="0" class="handle-icon">
+                  <g transform="matrix(0,1,-1,0,0,0)">
                     <path
                       id="g-svg-23"
                       fill="rgba(255,255,255,1)"
                       class="handle-icon-rect"
                       stroke-width="1"
                       stroke="rgba(191,191,191,1)"
-                      d="M 2,0 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
+                      d="M -3,-12 l 6,0 a 2,2,0,0,1,2,2 l 0,20 a 2,2,0,0,1,-2,2 l -6,0 a 2,2,0,0,1,-2,-2 l 0,-20 a 2,2,0,0,1,2,-2 z"
                       width="10"
                       height="24"
+                      x="-5"
+                      y="-12"
                     />
-                    <g transform="matrix(1,0,0,1,3.333333,6)">
+                    <g>
                       <line
                         id="g-svg-24"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="-1.666666666666667"
+                        y1="-6"
+                        x2="-1.666666666666667"
+                        y2="6"
                         class="handle-icon-line-1"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,6.666667,6)">
+                    <g>
                       <line
                         id="g-svg-25"
                         fill="rgba(255,255,255,1)"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12"
+                        x1="1.666666666666666"
+                        y1="-6"
+                        x2="1.666666666666666"
+                        y2="6"
                         class="handle-icon-line-2"
                         stroke-width="1"
                         stroke="rgba(191,191,191,1)"
@@ -214,13 +194,8 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-26"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(0,1,-1,0,0,-12)">
+              <g id="g-svg-26" fill="none" class="handle-label-group">
+                <g transform="matrix(0,1,-1,0,-11,-13)">
                   <text
                     id="g-svg-27"
                     fill="rgba(0,0,0,1)"
@@ -228,9 +203,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    y="-12"
                     dx="0.5"
                     font-size="12"
                     text-anchor="end"
+                    x="0"
                   >
                     1°C
                   </text>
diff --git a/__tests__/integration/snapshots/Slider8.svg b/__tests__/integration/snapshots/Slider8.svg
index a1a460744..932ae2a30 100644
--- a/__tests__/integration/snapshots/Slider8.svg
+++ b/__tests__/integration/snapshots/Slider8.svg
@@ -6,66 +6,66 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-28" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-29" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-28" fill="none">
+        <g id="g-svg-29" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(65,97,128,1)"
               class="slider-track"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
               opacity="0.05"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-3"
               fill="none"
+              x="10"
+              y="10"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-4" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-5"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="10"
+                transform="matrix(1,0,0,1,10,10)"
               >
-                <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,31.250000)">
+                <g id="g-svg-6" fill="none">
+                  <g>
                     <path
                       id="g-svg-14"
                       fill="none"
                       class="line"
                       stroke="rgba(131,218,173,1)"
-                      d="M 0,6.25 L 33.33333333333333,16.25 L 66.66666666666666,15 L 100,13.75 L 133.33333333333331,0 L 166.66666666666669,6.25 L 200,12.5 L 233.33333333333334,18.75 L 266.66666666666663,15 L 300,17.5"
+                      d="M 0,37.5 L 33.33333333333333,47.5 L 66.66666666666666,46.25 L 100,45 L 133.33333333333331,31.25 L 166.66666666666669,37.5 L 200,43.75 L 233.33333333333334,50 L 266.66666666666663,46.25 L 300,48.75"
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,18.750000)">
+                  <g>
                     <path
                       id="g-svg-15"
                       fill="none"
                       class="line"
                       stroke="rgba(237,191,69,1)"
-                      d="M 0,12.5 L 33.33333333333333,20 L 66.66666666666666,15 L 100,22.5 L 133.33333333333331,0 L 166.66666666666669,11.25 L 200,12.5 L 233.33333333333334,30 L 266.66666666666663,21.25 L 300,30"
+                      d="M 0,31.25 L 33.33333333333333,38.75 L 66.66666666666666,33.75 L 100,41.25 L 133.33333333333331,18.75 L 166.66666666666669,30 L 200,31.25 L 233.33333333333334,48.75 L 266.66666666666663,40 L 300,48.75"
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-16"
                       fill="none"
@@ -75,7 +75,7 @@
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-17"
                       fill="rgba(131,218,173,1)"
@@ -84,46 +84,43 @@
                       opacity="0"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,18.750000)">
+                  <g>
                     <path
                       id="g-svg-18"
                       fill="rgba(237,191,69,1)"
                       class="area"
-                      d="M 0,12.5 L 33.33333333333333,20 L 66.66666666666666,15 L 100,22.5 L 133.33333333333331,0 L 166.66666666666669,11.25 L 200,12.5 L 233.33333333333334,30 L 266.66666666666663,21.25 L 300,30 L 300,30 L 266.66666666666663,27.5 L 233.33333333333334,31.25 L 200,25 L 166.66666666666669,18.75 L 133.33333333333331,12.5 L 100,26.25 L 66.66666666666666,27.5 L 33.33333333333333,28.75 L 0,18.75 Z"
+                      d="M 0,31.25 L 33.33333333333333,38.75 L 66.66666666666666,33.75 L 100,41.25 L 133.33333333333331,18.75 L 166.66666666666669,30 L 200,31.25 L 233.33333333333334,48.75 L 266.66666666666663,40 L 300,48.75 L 300,48.75 L 266.66666666666663,46.25 L 233.33333333333334,50 L 200,43.75 L 166.66666666666669,37.5 L 133.33333333333331,31.25 L 100,45 L 66.66666666666666,46.25 L 33.33333333333333,47.5 L 0,37.5 Z"
                       opacity="0"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,31.250000)">
+                  <g>
                     <path
                       id="g-svg-19"
                       fill="rgba(210,206,249,1)"
                       class="area"
-                      d="M 0,6.25 L 33.33333333333333,16.25 L 66.66666666666666,15 L 100,13.75 L 133.33333333333331,0 L 166.66666666666669,6.25 L 200,12.5 L 233.33333333333334,18.75 L 266.66666666666663,15 L 300,17.5 L 300,18.75 L 0,18.75 Z"
+                      d="M 0,37.5 L 33.33333333333333,47.5 L 66.66666666666666,46.25 L 100,45 L 133.33333333333331,31.25 L 166.66666666666669,37.5 L 200,43.75 L 233.33333333333334,50 L 266.66666666666663,46.25 L 300,48.75 L 300,50 L 0,50 Z"
                       opacity="0"
                     />
                   </g>
                 </g>
-                <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-7" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-20"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
             />
           </g>
-          <g
-            id="g-svg-21"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-21" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-22"
                 fill="rgba(91,143,249,1)"
@@ -133,7 +130,7 @@
                 height="50"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-23"
                 fill="rgba(91,143,249,1)"
@@ -143,7 +140,7 @@
                 height="50"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-24"
                 fill="rgba(91,143,249,1)"
diff --git a/__tests__/integration/snapshots/Slider9.svg b/__tests__/integration/snapshots/Slider9.svg
index 48422f91c..5c8781b82 100644
--- a/__tests__/integration/snapshots/Slider9.svg
+++ b/__tests__/integration/snapshots/Slider9.svg
@@ -6,66 +6,63 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-25" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-25" fill="none">
+        <g id="g-svg-26" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(216,232,251,1)"
               class="slider-track"
-              d="M 5,0 l 290,0 a 5,5,0,0,1,5,5 l 0,0 a 5,5,0,0,1,-5,5 l -290,0 a 5,5,0,0,1,-5,-5 l 0,0 a 5,5,0,0,1,5,-5 z"
+              d="M 15,10 l 290,0 a 5,5,0,0,1,5,5 l 0,0 a 5,5,0,0,1,-5,5 l -290,0 a 5,5,0,0,1,-5,-5 l 0,0 a 5,5,0,0,1,5,-5 z"
+              x="10"
+              y="10"
               width="300"
               height="10"
               opacity="0.5"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-3"
               fill="none"
+              x="10"
+              y="10"
               width="300"
               height="10"
-              transform="matrix(1,0,0,1,0,0)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-4" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-5"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="10"
+                transform="matrix(1,0,0,1,10,10)"
               >
-                <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)" />
-                <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-6" fill="none" />
+                <g id="g-svg-7" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-8"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 300,0 l 0,10 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,10 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="10"
             />
           </g>
-          <g
-            id="g-svg-9"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-9" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-10"
                 fill="rgba(91,143,249,1)"
@@ -77,91 +74,71 @@
                 width="75"
               />
             </g>
-            <g transform="matrix(1,0,0,1,75,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-11"
                 fill="rgba(91,143,249,1)"
                 class="slider-selection"
                 visibility="visible"
                 fill-opacity="0.45"
-                d="M 0,0 l 150,0 l 0,10 l-150 0 z"
+                d="M 75,0 l 150,0 l 0,10 l-150 0 z"
                 height="10"
+                x="75"
                 width="150"
               />
             </g>
-            <g transform="matrix(1,0,0,1,225,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-12"
                 fill="rgba(91,143,249,1)"
                 class="slider-selection"
                 visibility="hidden"
                 fill-opacity="0.45"
-                d="M 0,0 l 75,0 l 0,10 l-75 0 z"
+                d="M 225,0 l 75,0 l 0,10 l-75 0 z"
                 height="10"
+                x="225"
                 width="75"
               />
             </g>
             <g
               id="g-svg-15"
               fill="none"
-              transform="matrix(1,0,0,1,75,5)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,85,15)"
               class="slider-handle start-handle"
             >
-              <g
-                id="g-svg-16"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-16" fill="none" class="handle-icon-group">
+                <g>
                   <circle
                     id="g-svg-17"
                     fill="rgba(78,118,177,1)"
-                    transform="translate(-5,-5)"
-                    cx="5"
-                    cy="5"
                     r="5"
                     class="handle-icon"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-18"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              />
+              <g id="g-svg-18" fill="none" class="handle-label-group" />
             </g>
             <g
               id="g-svg-21"
               fill="none"
-              transform="matrix(1,0,0,1,225,5)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,235,15)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-22"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-22" fill="none" class="handle-icon-group">
+                <g>
                   <circle
                     id="g-svg-23"
                     fill="rgba(78,118,177,1)"
-                    transform="translate(-5,-5)"
-                    cx="5"
-                    cy="5"
                     r="5"
                     class="handle-icon"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-24"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              />
+              <g id="g-svg-24" fill="none" class="handle-label-group" />
             </g>
           </g>
         </g>
diff --git a/__tests__/integration/snapshots/SliderInvert.svg b/__tests__/integration/snapshots/SliderInvert.svg
index fe7f8b3ab..4ad8d6213 100644
--- a/__tests__/integration/snapshots/SliderInvert.svg
+++ b/__tests__/integration/snapshots/SliderInvert.svg
@@ -6,52 +6,46 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-33"
-        fill="none"
-        width="320"
-        height="50"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-34" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-33" fill="none" width="320" height="50">
+        <g id="g-svg-34" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(65,97,128,1)"
               class="slider-track"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
               opacity="0.05"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-3"
               fill="none"
+              x="10"
+              y="10"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-4" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-5"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="10"
+                transform="matrix(1,0,0,1,10,10)"
               >
-                <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-6" fill="none">
+                  <g>
                     <path
                       id="g-svg-10"
                       fill="none"
@@ -61,7 +55,7 @@
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-11"
                       fill="rgba(214,228,253,1)"
@@ -71,27 +65,24 @@
                     />
                   </g>
                 </g>
-                <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-7" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-12"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
             />
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-13" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-14"
                 fill="rgba(255,255,255,1)"
@@ -103,103 +94,94 @@
                 width="75"
               />
             </g>
-            <g transform="matrix(1,0,0,1,75,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-15"
                 fill="rgba(255,255,255,1)"
                 class="slider-selection"
                 visibility="hidden"
                 fill-opacity="0.5"
-                d="M 0,0 l 150,0 l 0,50 l-150 0 z"
+                d="M 75,0 l 150,0 l 0,50 l-150 0 z"
                 height="50"
+                x="75"
                 width="150"
               />
             </g>
-            <g transform="matrix(1,0,0,1,225,0)">
+            <g transform="matrix(1,0,0,1,10,10)">
               <path
                 id="g-svg-16"
                 fill="rgba(255,255,255,1)"
                 class="slider-selection"
                 visibility="visible"
                 fill-opacity="0.5"
-                d="M 0,0 l 75,0 l 0,50 l-75 0 z"
+                d="M 225,0 l 75,0 l 0,50 l-75 0 z"
                 height="50"
+                x="225"
                 width="75"
               />
             </g>
             <g
               id="g-svg-19"
               fill="none"
-              transform="matrix(1,0,0,1,70,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,80,35)"
               class="slider-handle start-handle"
             >
-              <g
-                id="g-svg-20"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-21"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-25)">
+              <g id="g-svg-20" fill="none" class="handle-icon-group">
+                <g id="g-svg-21" fill="none" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-22"
                       fill="rgba(255,255,255,1)"
-                      d="M 0,0 l 10,0 l 0,50 l-10 0 z"
+                      d="M -5,-25 l 10,0 l 0,50 l-10 0 z"
+                      x="-5"
+                      y="-25"
                       width="10"
                       height="50"
                       fill-opacity="0.5"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,-1,-5)">
+                  <g>
                     <line
                       id="g-svg-23"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="10"
+                      x1="-1"
+                      y1="-5"
+                      x2="-1"
+                      y2="5"
                       stroke-width="1"
                       stroke="rgba(154,154,154,1)"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,1,-5)">
+                  <g>
                     <line
                       id="g-svg-24"
                       fill="none"
-                      x1="0"
-                      y1="10"
-                      x2="0"
-                      y2="0"
+                      x1="1"
+                      y1="5"
+                      x2="1"
+                      y2="-5"
                       stroke-width="1"
                       stroke="rgba(154,154,154,1)"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,5,-25)">
+                  <g>
                     <line
                       id="g-svg-25"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="50"
+                      x1="5"
+                      y1="-25"
+                      x2="5"
+                      y2="25"
                       stroke-width="1"
                       stroke="rgba(232,232,232,1)"
                     />
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-26"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,-25.700001,0)">
+              <g id="g-svg-26" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-27"
                     fill="rgba(0,0,0,1)"
@@ -207,9 +189,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="-25.7"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
+                    y="0"
                   >
                     0.25
                   </text>
@@ -219,76 +203,65 @@
             <g
               id="g-svg-30"
               fill="none"
-              transform="matrix(1,0,0,1,230,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,240,35)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-31"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g
-                  id="g-svg-32"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon"
-                >
-                  <g transform="matrix(1,0,0,1,-5,-25)">
+              <g id="g-svg-31" fill="none" class="handle-icon-group">
+                <g id="g-svg-32" fill="none" class="handle-icon">
+                  <g>
                     <path
                       id="g-svg-33"
                       fill="rgba(255,255,255,1)"
-                      d="M 0,0 l 10,0 l 0,50 l-10 0 z"
+                      d="M -5,-25 l 10,0 l 0,50 l-10 0 z"
+                      x="-5"
+                      y="-25"
                       width="10"
                       height="50"
                       fill-opacity="0.5"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,-1,-5)">
+                  <g>
                     <line
                       id="g-svg-34"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="10"
+                      x1="-1"
+                      y1="-5"
+                      x2="-1"
+                      y2="5"
                       stroke-width="1"
                       stroke="rgba(154,154,154,1)"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,1,-5)">
+                  <g>
                     <line
                       id="g-svg-35"
                       fill="none"
-                      x1="0"
-                      y1="10"
-                      x2="0"
-                      y2="0"
+                      x1="1"
+                      y1="5"
+                      x2="1"
+                      y2="-5"
                       stroke-width="1"
                       stroke="rgba(154,154,154,1)"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,-5,-25)">
+                  <g>
                     <line
                       id="g-svg-36"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="50"
+                      x1="-5"
+                      y1="-25"
+                      x2="-5"
+                      y2="25"
                       stroke-width="1"
                       stroke="rgba(232,232,232,1)"
                     />
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-37"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              >
-                <g transform="matrix(1,0,0,1,25.459999,0)">
+              <g id="g-svg-37" fill="none" class="handle-label-group">
+                <g>
                   <text
                     id="g-svg-38"
                     fill="rgba(0,0,0,1)"
@@ -296,9 +269,11 @@
                     fill-opacity="0.45"
                     dominant-baseline="central"
                     paint-order="stroke"
+                    x="25.46"
                     dx="0.5"
                     font-size="12"
                     text-anchor="middle"
+                    y="0"
                   >
                     0.75
                   </text>
diff --git a/__tests__/integration/snapshots/SliderTimebar.svg b/__tests__/integration/snapshots/SliderTimebar.svg
index 880445201..5d9b5b60b 100644
--- a/__tests__/integration/snapshots/SliderTimebar.svg
+++ b/__tests__/integration/snapshots/SliderTimebar.svg
@@ -6,84 +6,75 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-20" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-20" fill="none">
+        <g id="g-svg-21" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(237,238,239,1)"
               class="slider-track"
-              d="M 2.5,0 l 295,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l -295,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              d="M 12.5,10 l 295,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l -295,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              x="10"
+              y="10"
               width="300"
               height="5"
               opacity="0.5"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-3"
               fill="none"
+              x="10"
+              y="10"
               width="300"
               height="5"
-              transform="matrix(1,0,0,1,0,0)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-4" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-5"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="10"
+                transform="matrix(1,0,0,1,10,10)"
               >
-                <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)" />
-                <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-6" fill="none" />
+                <g id="g-svg-7" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-8"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 300,0 l 0,5 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,5 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="5"
             />
           </g>
-          <g
-            id="g-svg-9"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
+          <g id="g-svg-9" fill="none" class="slider-foreground">
             <g
               id="g-svg-12"
               fill="none"
-              transform="matrix(1,0,0,1,225,2.500000)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,235,12.500000)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-13"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-13" fill="none" class="handle-icon-group">
+                <g>
                   <circle
                     id="g-svg-14"
                     fill="rgba(63,124,247,1)"
-                    transform="translate(-5,-5)"
-                    cx="5"
-                    cy="5"
                     r="5"
                     stroke-width="0"
                     stroke="rgba(63,124,247,1)"
@@ -92,72 +83,64 @@
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-15"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              />
+              <g id="g-svg-15" fill="none" class="handle-label-group" />
             </g>
           </g>
         </g>
-        <g id="g-svg-22" fill="none" transform="matrix(1,0,0,1,10,30)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-22" fill="none" x="10" y="30">
+          <g>
             <path
               id="g-svg-16"
               fill="rgba(237,238,239,1)"
               class="slider-track"
-              d="M 2.5,0 l 295,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l -295,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              d="M 12.5,30 l 295,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l -295,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              x="10"
+              y="30"
               width="300"
               height="5"
               opacity="0.5"
             />
           </g>
-          <g
-            id="g-svg-17"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-17" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-18"
               fill="none"
+              x="10"
+              y="30"
               width="300"
               height="5"
-              transform="matrix(1,0,0,1,0,0)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-19" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-20"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="30"
+                transform="matrix(1,0,0,1,10,30)"
               >
-                <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)" />
-                <g id="g-svg-22" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-21" fill="none" />
+                <g id="g-svg-22" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-23"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 300,0 l 0,5 l-300 0 z"
+              d="M 10,30 l 300,0 l 0,5 l-300 0 z"
+              x="10"
+              y="30"
               width="300"
               height="5"
             />
           </g>
-          <g
-            id="g-svg-24"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-24" fill="none" class="slider-foreground">
+            <g transform="matrix(1,0,0,1,10,30)">
               <path
                 id="g-svg-25"
                 fill="rgba(46,127,248,1)"
@@ -166,7 +149,7 @@
                 height="5"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g transform="matrix(1,0,0,1,10,30)">
               <path
                 id="g-svg-26"
                 fill="rgba(46,127,248,1)"
@@ -177,36 +160,31 @@
                 width="150"
               />
             </g>
-            <g transform="matrix(1,0,0,1,150,0)">
+            <g transform="matrix(1,0,0,1,10,30)">
               <path
                 id="g-svg-27"
                 fill="rgba(46,127,248,1)"
                 class="slider-selection"
                 visibility="hidden"
-                d="M 0,0 l 150,0 l 0,5 l-150 0 z"
+                d="M 150,0 l 150,0 l 0,5 l-150 0 z"
                 height="5"
+                x="150"
                 width="150"
               />
             </g>
             <g
               id="g-svg-30"
               fill="none"
-              transform="matrix(1,0,0,1,0,2.500000)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,10,32.500000)"
               class="slider-handle start-handle"
             >
-              <g
-                id="g-svg-31"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-31" fill="none" class="handle-icon-group">
+                <g>
                   <circle
                     id="g-svg-32"
                     fill="rgba(63,124,247,1)"
-                    transform="translate(-5,-5)"
-                    cx="5"
-                    cy="5"
                     r="5"
                     stroke-width="0"
                     stroke="rgba(63,124,247,1)"
@@ -215,32 +193,21 @@
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-33"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              />
+              <g id="g-svg-33" fill="none" class="handle-label-group" />
             </g>
             <g
               id="g-svg-36"
               fill="none"
-              transform="matrix(1,0,0,1,150,2.500000)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,160,32.500000)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-37"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-37" fill="none" class="handle-icon-group">
+                <g>
                   <circle
                     id="g-svg-38"
                     fill="rgba(63,124,247,1)"
-                    transform="translate(-5,-5)"
-                    cx="5"
-                    cy="5"
                     r="5"
                     stroke-width="0"
                     stroke="rgba(63,124,247,1)"
@@ -249,12 +216,7 @@
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-39"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              />
+              <g id="g-svg-39" fill="none" class="handle-label-group" />
             </g>
           </g>
         </g>
diff --git a/__tests__/integration/snapshots/SliderValueType.svg b/__tests__/integration/snapshots/SliderValueType.svg
index 91d8f930a..288a032d3 100644
--- a/__tests__/integration/snapshots/SliderValueType.svg
+++ b/__tests__/integration/snapshots/SliderValueType.svg
@@ -6,52 +6,46 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-8"
-        fill="none"
-        width="320"
-        height="50"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g id="g-svg-9" fill="none" transform="matrix(1,0,0,1,10,10)">
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-8" fill="none" width="320" height="50">
+        <g id="g-svg-9" fill="none" x="10" y="10">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(65,97,128,1)"
               class="slider-track"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
               opacity="0.05"
             />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-sparkline-group"
-          >
+          <g id="g-svg-2" fill="none" class="slider-sparkline-group">
             <g
               id="g-svg-3"
               fill="none"
+              x="10"
+              y="10"
               width="300"
               height="50"
-              transform="matrix(1,0,0,1,0,0)"
               class="slider-sparkline"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path id="g-svg-4" fill="none" class="container" />
               </g>
               <g
                 id="g-svg-5"
                 fill="none"
                 class="spark sparkline"
-                transform="matrix(1,0,0,1,0,0)"
+                x="10"
+                y="10"
+                transform="matrix(1,0,0,1,10,10)"
               >
-                <g id="g-svg-6" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-6" fill="none">
+                  <g>
                     <path
                       id="g-svg-10"
                       fill="none"
@@ -61,7 +55,7 @@
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-11"
                       fill="rgba(214,228,253,1)"
@@ -71,58 +65,47 @@
                     />
                   </g>
                 </g>
-                <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,0,0)" />
+                <g id="g-svg-7" fill="none" />
               </g>
             </g>
           </g>
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-12"
               fill="rgba(0,0,0,0)"
               class="slider-brush-area"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+              x="10"
+              y="10"
               width="300"
               height="50"
             />
           </g>
-          <g
-            id="g-svg-13"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="slider-foreground"
-          >
+          <g id="g-svg-13" fill="none" class="slider-foreground">
             <g
               id="g-svg-16"
               fill="none"
-              transform="matrix(1,0,0,1,150,25)"
+              x="0"
+              y="0"
+              transform="matrix(1,0,0,1,160,35)"
               class="slider-handle end-handle"
             >
-              <g
-                id="g-svg-17"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-icon-group"
-              >
-                <g transform="matrix(1,0,0,1,0,-25)">
+              <g id="g-svg-17" fill="none" class="handle-icon-group">
+                <g>
                   <line
                     id="g-svg-18"
                     fill="none"
                     x1="0"
-                    y1="0"
+                    y1="-25"
                     x2="0"
-                    y2="50"
+                    y2="25"
                     stroke-width="2"
                     stroke="rgba(200,200,200,1)"
                     class="handle-icon"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-19"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="handle-label-group"
-              />
+              <g id="g-svg-19" fill="none" class="handle-label-group" />
             </g>
           </g>
         </g>
diff --git a/__tests__/integration/snapshots/Sparkline1.svg b/__tests__/integration/snapshots/Sparkline1.svg
index a4d6f8274..60d1c77f4 100644
--- a/__tests__/integration/snapshots/Sparkline1.svg
+++ b/__tests__/integration/snapshots/Sparkline1.svg
@@ -1,32 +1,28 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-40" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-41"
-          fill="none"
-          width="300"
-          height="50"
-          transform="matrix(1,0,0,1,10,10)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-40" fill="none">
+        <g id="g-svg-41" fill="none" x="10" y="10" width="300" height="50">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
           <g
             id="g-svg-2"
             fill="none"
             class="spark sparkline"
-            transform="matrix(1,0,0,1,0,0)"
+            x="10"
+            y="10"
+            transform="matrix(1,0,0,1,10,10)"
           >
-            <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-3" fill="none">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="none"
@@ -36,17 +32,17 @@
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,10)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="none"
-                  d="M 0,10.000000000000002 L 33.33333333333333,6 L 66.66666666666666,0 L 100,14.000000000000002 L 133.33333333333331,0 L 166.66666666666669,8.000000000000002 L 200,0 L 233.33333333333334,18.000000000000007 L 266.66666666666663,10.000000000000002 L 300,20"
+                  d="M 0,20 L 33.33333333333333,15.999999999999998 L 66.66666666666666,9.999999999999998 L 100,24 L 133.33333333333331,9.999999999999998 L 166.66666666666669,18 L 200,9.999999999999998 L 233.33333333333334,28.000000000000004 L 266.66666666666663,20 L 300,30"
                   class="line"
                   stroke="rgba(237,191,69,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="none"
@@ -56,7 +52,7 @@
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
@@ -65,16 +61,16 @@
                   opacity="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,10)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,10.000000000000002 L 33.33333333333333,6 L 66.66666666666666,0 L 100,14.000000000000002 L 133.33333333333331,0 L 166.66666666666669,8.000000000000002 L 200,0 L 233.33333333333334,18.000000000000007 L 266.66666666666663,10.000000000000002 L 300,20 L 300,20 L 0,20 Z"
+                  d="M 0,20 L 33.33333333333333,15.999999999999998 L 66.66666666666666,9.999999999999998 L 100,24 L 133.33333333333331,9.999999999999998 L 166.66666666666669,18 L 200,9.999999999999998 L 233.33333333333334,28.000000000000004 L 266.66666666666663,20 L 300,30 L 300,30 L 0,30 Z"
                   class="area"
                   opacity="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(210,206,249,1)"
@@ -84,7 +80,7 @@
                 />
               </g>
             </g>
-            <g id="g-svg-4" fill="none" transform="matrix(1,0,0,1,0,0)" />
+            <g id="g-svg-4" fill="none" />
           </g>
         </g>
       </g>
diff --git a/__tests__/integration/snapshots/Sparkline10.svg b/__tests__/integration/snapshots/Sparkline10.svg
index 2ccae48ab..63fb1e264 100644
--- a/__tests__/integration/snapshots/Sparkline10.svg
+++ b/__tests__/integration/snapshots/Sparkline10.svg
@@ -1,392 +1,444 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-34" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-34" fill="none">
         <g
           id="g-svg-35"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,10)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkcolumn"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-3"
-              name="columns"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,0,30)">
+          <g id="g-svg-2" fill="none" class="spark sparkcolumn" x="0" y="0">
+            <g id="g-svg-3" name="columns" fill="none">
+              <g>
                 <path
                   id="g-svg-4"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,20 l-10 0 z"
+                  d="M 0,30 l 10,0 l 0,20 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="0"
+                  y="30"
                   width="10"
                   height="20"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,30,26)">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,4 l-10 0 z"
+                  d="M 30,26 l 10,0 l 0,4 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="30"
+                  y="26"
                   width="10"
                   height="4"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,60,24)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,6 l-10 0 z"
+                  d="M 60,24 l 10,0 l 0,6 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="60"
+                  y="24"
                   width="10"
                   height="6"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,90,22)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,8 l-10 0 z"
+                  d="M 90,21.999999999999996 l 10,0 l 0,8 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="90"
+                  y="21.999999999999996"
                   width="10"
                   height="8"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,120,0)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,30 l-10 0 z"
+                  d="M 120,0 l 10,0 l 0,30 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="120"
+                  y="0"
                   width="10"
                   height="30"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,150,10)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,20 l-10 0 z"
+                  d="M 150,9.999999999999998 l 10,0 l 0,20 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="150"
+                  y="9.999999999999998"
                   width="10"
                   height="20"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,180,20)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                  d="M 180,20 l 10,0 l 0,10 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="180"
+                  y="20"
                   width="10"
                   height="10"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,210,30)">
+              <g>
                 <path
                   id="g-svg-11"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,0 l-10 0 z"
+                  d="M 210,30 l 10,0 l 0,0 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="210"
+                  y="30"
                   width="10"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,240,24)">
+              <g>
                 <path
                   id="g-svg-12"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,6 l-10 0 z"
+                  d="M 240,24 l 10,0 l 0,6 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="240"
+                  y="24"
                   width="10"
                   height="6"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,270,28)">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,2 l-10 0 z"
+                  d="M 270,28.000000000000004 l 10,0 l 0,2 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="270"
+                  y="28.000000000000004"
                   width="10"
                   height="2"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,10,20)">
+              <g>
                 <path
                   id="g-svg-14"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                  d="M 10,20 l 10,0 l 0,10 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="10"
+                  y="20"
                   width="10"
                   height="10"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,40,16)">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,14.000000000000002 l-10 0 z"
+                  d="M 40,15.999999999999998 l 10,0 l 0,14.000000000000002 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="40"
+                  y="15.999999999999998"
                   width="10"
                   height="14.000000000000002"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,70,10)">
+              <g>
                 <path
                   id="g-svg-16"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,20 l-10 0 z"
+                  d="M 70,9.999999999999998 l 10,0 l 0,20 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="70"
+                  y="9.999999999999998"
                   width="10"
                   height="20"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,100,24)">
+              <g>
                 <path
                   id="g-svg-17"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,6 l-10 0 z"
+                  d="M 100,24 l 10,0 l 0,6 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="100"
+                  y="24"
                   width="10"
                   height="6"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,130,10)">
+              <g>
                 <path
                   id="g-svg-18"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,20 l-10 0 z"
+                  d="M 130,9.999999999999998 l 10,0 l 0,20 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="130"
+                  y="9.999999999999998"
                   width="10"
                   height="20"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,160,18)">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,12 l-10 0 z"
+                  d="M 160,18 l 10,0 l 0,12 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="160"
+                  y="18"
                   width="10"
                   height="12"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,190,10)">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,20 l-10 0 z"
+                  d="M 190,9.999999999999998 l 10,0 l 0,20 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="190"
+                  y="9.999999999999998"
                   width="10"
                   height="20"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,220,28)">
+              <g>
                 <path
                   id="g-svg-21"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,2 l-10 0 z"
+                  d="M 220,28.000000000000004 l 10,0 l 0,2 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="220"
+                  y="28.000000000000004"
                   width="10"
                   height="2"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,250,20)">
+              <g>
                 <path
                   id="g-svg-22"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                  d="M 250,20 l 10,0 l 0,10 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="250"
+                  y="20"
                   width="10"
                   height="10"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,280,30)">
+              <g>
                 <path
                   id="g-svg-23"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,0 l-10 0 z"
+                  d="M 280,30 l 10,0 l 0,0 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="280"
+                  y="30"
                   width="10"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,20,28)">
+              <g>
                 <path
                   id="g-svg-24"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,2 l-10 0 z"
+                  d="M 20,28.000000000000004 l 10,0 l 0,2 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="20"
+                  y="28.000000000000004"
                   width="10"
                   height="2"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,50,24)">
+              <g>
                 <path
                   id="g-svg-25"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,6 l-10 0 z"
+                  d="M 50,24 l 10,0 l 0,6 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="50"
+                  y="24"
                   width="10"
                   height="6"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,80,22)">
+              <g>
                 <path
                   id="g-svg-26"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,8 l-10 0 z"
+                  d="M 80,21.999999999999996 l 10,0 l 0,8 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="80"
+                  y="21.999999999999996"
                   width="10"
                   height="8"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,110,10)">
+              <g>
                 <path
                   id="g-svg-27"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,20 l-10 0 z"
+                  d="M 110,9.999999999999998 l 10,0 l 0,20 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="110"
+                  y="9.999999999999998"
                   width="10"
                   height="20"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,140,0)">
+              <g>
                 <path
                   id="g-svg-28"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,30 l-10 0 z"
+                  d="M 140,0 l 10,0 l 0,30 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="140"
+                  y="0"
                   width="10"
                   height="30"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,170,4)">
+              <g>
                 <path
                   id="g-svg-29"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,26 l-10 0 z"
+                  d="M 170,3.9999999999999982 l 10,0 l 0,26 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="170"
+                  y="3.9999999999999982"
                   width="10"
                   height="26"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,200,24)">
+              <g>
                 <path
                   id="g-svg-30"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,6 l-10 0 z"
+                  d="M 200,24 l 10,0 l 0,6 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="200"
+                  y="24"
                   width="10"
                   height="6"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,230,24)">
+              <g>
                 <path
                   id="g-svg-31"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,6 l-10 0 z"
+                  d="M 230,24 l 10,0 l 0,6 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="230"
+                  y="24"
                   width="10"
                   height="6"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,260,10)">
+              <g>
                 <path
                   id="g-svg-32"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,20 l-10 0 z"
+                  d="M 260,9.999999999999998 l 10,0 l 0,20 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="260"
+                  y="9.999999999999998"
                   width="10"
                   height="20"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,290,6)">
+              <g>
                 <path
                   id="g-svg-33"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,24 l-10 0 z"
+                  d="M 290,6 l 10,0 l 0,24 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="290"
+                  y="6"
                   width="10"
                   height="24"
                 />
diff --git a/__tests__/integration/snapshots/Sparkline11.svg b/__tests__/integration/snapshots/Sparkline11.svg
index 2cd01b4c7..7fb493408 100644
--- a/__tests__/integration/snapshots/Sparkline11.svg
+++ b/__tests__/integration/snapshots/Sparkline11.svg
@@ -1,392 +1,444 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-34" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-34" fill="none">
         <g
           id="g-svg-35"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,10)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkcolumn"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-3"
-              name="columns"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,1.500000,37.500000)">
+          <g id="g-svg-2" fill="none" class="spark sparkcolumn" x="0" y="0">
+            <g id="g-svg-3" name="columns" fill="none">
+              <g>
                 <path
                   id="g-svg-4"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 27,0 l 0,12.5 l-27 0 z"
+                  d="M 1.5,37.5 l 27,0 l 0,12.5 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="1.5"
+                  y="37.5"
                   width="27"
                   height="12.5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,31.500000,47.500000)">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 27,0 l 0,2.5 l-27 0 z"
+                  d="M 31.5,47.5 l 27,0 l 0,2.5 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="31.5"
+                  y="47.5"
                   width="27"
                   height="2.5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,61.500000,46.250000)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 27,0 l 0,3.75 l-27 0 z"
+                  d="M 61.5,46.25 l 27,0 l 0,3.75 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="61.5"
+                  y="46.25"
                   width="27"
                   height="3.75"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,91.500000,45)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 27,0 l 0,5 l-27 0 z"
+                  d="M 91.5,45 l 27,0 l 0,5 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="91.5"
+                  y="45"
                   width="27"
                   height="5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,121.500000,31.250000)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 27,0 l 0,18.75 l-27 0 z"
+                  d="M 121.5,31.25 l 27,0 l 0,18.75 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="121.5"
+                  y="31.25"
                   width="27"
                   height="18.75"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,151.500000,37.500000)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 27,0 l 0,12.5 l-27 0 z"
+                  d="M 151.5,37.5 l 27,0 l 0,12.5 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="151.5"
+                  y="37.5"
                   width="27"
                   height="12.5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,181.500000,43.750000)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 27,0 l 0,6.25 l-27 0 z"
+                  d="M 181.5,43.75 l 27,0 l 0,6.25 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="181.5"
+                  y="43.75"
                   width="27"
                   height="6.25"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,211.500000,50)">
+              <g>
                 <path
                   id="g-svg-11"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 27,0 l 0,0 l-27 0 z"
+                  d="M 211.5,50 l 27,0 l 0,0 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="211.5"
+                  y="50"
                   width="27"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,241.500000,46.250000)">
+              <g>
                 <path
                   id="g-svg-12"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 27,0 l 0,3.75 l-27 0 z"
+                  d="M 241.5,46.25 l 27,0 l 0,3.75 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="241.5"
+                  y="46.25"
                   width="27"
                   height="3.75"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,271.500000,48.750000)">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 27,0 l 0,1.25 l-27 0 z"
+                  d="M 271.5,48.75 l 27,0 l 0,1.25 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="271.5"
+                  y="48.75"
                   width="27"
                   height="1.25"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,1.500000,31.250000)">
+              <g>
                 <path
                   id="g-svg-14"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 27,0 l 0,6.25 l-27 0 z"
+                  d="M 1.5,31.25 l 27,0 l 0,6.25 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="1.5"
+                  y="31.25"
                   width="27"
                   height="6.25"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,31.500000,38.750000)">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 27,0 l 0,8.75 l-27 0 z"
+                  d="M 31.5,38.75 l 27,0 l 0,8.75 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="31.5"
+                  y="38.75"
                   width="27"
                   height="8.75"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,61.500000,33.750000)">
+              <g>
                 <path
                   id="g-svg-16"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 27,0 l 0,12.5 l-27 0 z"
+                  d="M 61.5,33.75 l 27,0 l 0,12.5 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="61.5"
+                  y="33.75"
                   width="27"
                   height="12.5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,91.500000,41.250000)">
+              <g>
                 <path
                   id="g-svg-17"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 27,0 l 0,3.75 l-27 0 z"
+                  d="M 91.5,41.25 l 27,0 l 0,3.75 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="91.5"
+                  y="41.25"
                   width="27"
                   height="3.75"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,121.500000,18.750000)">
+              <g>
                 <path
                   id="g-svg-18"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 27,0 l 0,12.5 l-27 0 z"
+                  d="M 121.5,18.75 l 27,0 l 0,12.5 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="121.5"
+                  y="18.75"
                   width="27"
                   height="12.5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,151.500000,30)">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 27,0 l 0,7.5 l-27 0 z"
+                  d="M 151.5,30 l 27,0 l 0,7.5 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="151.5"
+                  y="30"
                   width="27"
                   height="7.5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,181.500000,31.250000)">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 27,0 l 0,12.5 l-27 0 z"
+                  d="M 181.5,31.25 l 27,0 l 0,12.5 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="181.5"
+                  y="31.25"
                   width="27"
                   height="12.5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,211.500000,48.750000)">
+              <g>
                 <path
                   id="g-svg-21"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 27,0 l 0,1.25 l-27 0 z"
+                  d="M 211.5,48.75 l 27,0 l 0,1.25 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="211.5"
+                  y="48.75"
                   width="27"
                   height="1.25"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,241.500000,40)">
+              <g>
                 <path
                   id="g-svg-22"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 27,0 l 0,6.25 l-27 0 z"
+                  d="M 241.5,40 l 27,0 l 0,6.25 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="241.5"
+                  y="40"
                   width="27"
                   height="6.25"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,271.500000,48.750000)">
+              <g>
                 <path
                   id="g-svg-23"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 27,0 l 0,0 l-27 0 z"
+                  d="M 271.5,48.75 l 27,0 l 0,0 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="271.5"
+                  y="48.75"
                   width="27"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,1.500000,30)">
+              <g>
                 <path
                   id="g-svg-24"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 27,0 l 0,1.25 l-27 0 z"
+                  d="M 1.5,30 l 27,0 l 0,1.25 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="1.5"
+                  y="30"
                   width="27"
                   height="1.25"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,31.500000,35)">
+              <g>
                 <path
                   id="g-svg-25"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 27,0 l 0,3.75 l-27 0 z"
+                  d="M 31.5,35 l 27,0 l 0,3.75 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="31.5"
+                  y="35"
                   width="27"
                   height="3.75"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,61.500000,28.750000)">
+              <g>
                 <path
                   id="g-svg-26"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 27,0 l 0,5 l-27 0 z"
+                  d="M 61.5,28.749999999999996 l 27,0 l 0,5 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="61.5"
+                  y="28.749999999999996"
                   width="27"
                   height="5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,91.500000,28.750000)">
+              <g>
                 <path
                   id="g-svg-27"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 27,0 l 0,12.5 l-27 0 z"
+                  d="M 91.5,28.749999999999996 l 27,0 l 0,12.5 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="91.5"
+                  y="28.749999999999996"
                   width="27"
                   height="12.5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,121.500000,0)">
+              <g>
                 <path
                   id="g-svg-28"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 27,0 l 0,18.75 l-27 0 z"
+                  d="M 121.5,0 l 27,0 l 0,18.75 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="121.5"
+                  y="0"
                   width="27"
                   height="18.75"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,151.500000,13.750000)">
+              <g>
                 <path
                   id="g-svg-29"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 27,0 l 0,16.25 l-27 0 z"
+                  d="M 151.5,13.750000000000002 l 27,0 l 0,16.25 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="151.5"
+                  y="13.750000000000002"
                   width="27"
                   height="16.25"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,181.500000,27.500000)">
+              <g>
                 <path
                   id="g-svg-30"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 27,0 l 0,3.75 l-27 0 z"
+                  d="M 181.5,27.500000000000004 l 27,0 l 0,3.75 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="181.5"
+                  y="27.500000000000004"
                   width="27"
                   height="3.75"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,211.500000,45)">
+              <g>
                 <path
                   id="g-svg-31"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 27,0 l 0,3.75 l-27 0 z"
+                  d="M 211.5,45 l 27,0 l 0,3.75 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="211.5"
+                  y="45"
                   width="27"
                   height="3.75"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,241.500000,27.500000)">
+              <g>
                 <path
                   id="g-svg-32"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 27,0 l 0,12.5 l-27 0 z"
+                  d="M 241.5,27.500000000000004 l 27,0 l 0,12.5 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="241.5"
+                  y="27.500000000000004"
                   width="27"
                   height="12.5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,271.500000,33.750000)">
+              <g>
                 <path
                   id="g-svg-33"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 27,0 l 0,15 l-27 0 z"
+                  d="M 271.5,33.75 l 27,0 l 0,15 l-27 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="271.5"
+                  y="33.75"
                   width="27"
                   height="15"
                 />
diff --git a/__tests__/integration/snapshots/Sparkline12.svg b/__tests__/integration/snapshots/Sparkline12.svg
index d5a5267a2..02fc3c6d0 100644
--- a/__tests__/integration/snapshots/Sparkline12.svg
+++ b/__tests__/integration/snapshots/Sparkline12.svg
@@ -1,392 +1,444 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-34" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-34" fill="none">
         <g
           id="g-svg-35"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,10)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkcolumn"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-3"
-              name="columns"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,0,28.301888)">
+          <g id="g-svg-2" fill="none" class="spark sparkcolumn" x="0" y="0">
+            <g id="g-svg-3" name="columns" fill="none">
+              <g>
                 <path
                   id="g-svg-4"
                   fill="rgba(103,142,242,1)"
-                  d="M 0,0 l 30,0 l 0,9.433962264150944 l-30 0 z"
+                  d="M 0,28.30188679245283 l 30,0 l 0,9.433962264150944 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="0"
+                  y="28.30188679245283"
                   width="30"
                   height="9.433962264150944"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,30,35.849056)">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="rgba(103,142,242,1)"
-                  d="M 0,0 l 30,0 l 0,1.8867924528301887 l-30 0 z"
+                  d="M 30,35.84905660377359 l 30,0 l 0,1.8867924528301887 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="30"
+                  y="35.84905660377359"
                   width="30"
                   height="1.8867924528301887"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,60,34.905659)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="rgba(103,142,242,1)"
-                  d="M 0,0 l 30,0 l 0,2.8301886792452833 l-30 0 z"
+                  d="M 60,34.905660377358494 l 30,0 l 0,2.8301886792452833 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="60"
+                  y="34.905660377358494"
                   width="30"
                   height="2.8301886792452833"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,90,33.962265)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="rgba(103,142,242,1)"
-                  d="M 0,0 l 30,0 l 0,3.7735849056603774 l-30 0 z"
+                  d="M 90,33.9622641509434 l 30,0 l 0,3.7735849056603774 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="90"
+                  y="33.9622641509434"
                   width="30"
                   height="3.7735849056603774"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,120,23.584906)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(103,142,242,1)"
-                  d="M 0,0 l 30,0 l 0,14.150943396226415 l-30 0 z"
+                  d="M 120,23.58490566037736 l 30,0 l 0,14.150943396226415 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="120"
+                  y="23.58490566037736"
                   width="30"
                   height="14.150943396226415"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,150,28.301888)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(103,142,242,1)"
-                  d="M 0,0 l 30,0 l 0,9.433962264150944 l-30 0 z"
+                  d="M 150,28.30188679245283 l 30,0 l 0,9.433962264150944 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="150"
+                  y="28.30188679245283"
                   width="30"
                   height="9.433962264150944"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,180,33.018867)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(103,142,242,1)"
-                  d="M 0,0 l 30,0 l 0,4.716981132075472 l-30 0 z"
+                  d="M 180,33.01886792452831 l 30,0 l 0,4.716981132075472 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="180"
+                  y="33.01886792452831"
                   width="30"
                   height="4.716981132075472"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,210,37.735847)">
+              <g>
                 <path
                   id="g-svg-11"
                   fill="rgba(103,142,242,1)"
-                  d="M 0,0 l 30,0 l 0,0 l-30 0 z"
+                  d="M 210,37.735849056603776 l 30,0 l 0,0 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="210"
+                  y="37.735849056603776"
                   width="30"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,240,34.905659)">
+              <g>
                 <path
                   id="g-svg-12"
                   fill="rgba(103,142,242,1)"
-                  d="M 0,0 l 30,0 l 0,2.8301886792452833 l-30 0 z"
+                  d="M 240,34.905660377358494 l 30,0 l 0,2.8301886792452833 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="240"
+                  y="34.905660377358494"
                   width="30"
                   height="2.8301886792452833"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,270,36.792454)">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="rgba(103,142,242,1)"
-                  d="M 0,0 l 30,0 l 0,0.9433962264150944 l-30 0 z"
+                  d="M 270,36.79245283018868 l 30,0 l 0,0.9433962264150944 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="270"
+                  y="36.79245283018868"
                   width="30"
                   height="0.9433962264150944"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,23.584906)">
+              <g>
                 <path
                   id="g-svg-14"
                   fill="rgba(125,213,169,1)"
-                  d="M 0,0 l 30,0 l 0,4.716981132075472 l-30 0 z"
+                  d="M 0,23.58490566037736 l 30,0 l 0,4.716981132075472 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="0"
+                  y="23.58490566037736"
                   width="30"
                   height="4.716981132075472"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,30,29.245283)">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="rgba(125,213,169,1)"
-                  d="M 0,0 l 30,0 l 0,6.60377358490566 l-30 0 z"
+                  d="M 30,29.245283018867923 l 30,0 l 0,6.60377358490566 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="30"
+                  y="29.245283018867923"
                   width="30"
                   height="6.60377358490566"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,60,25.471699)">
+              <g>
                 <path
                   id="g-svg-16"
                   fill="rgba(125,213,169,1)"
-                  d="M 0,0 l 30,0 l 0,9.433962264150944 l-30 0 z"
+                  d="M 60,25.471698113207548 l 30,0 l 0,9.433962264150944 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="60"
+                  y="25.471698113207548"
                   width="30"
                   height="9.433962264150944"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,90,31.132076)">
+              <g>
                 <path
                   id="g-svg-17"
                   fill="rgba(125,213,169,1)"
-                  d="M 0,0 l 30,0 l 0,2.8301886792452833 l-30 0 z"
+                  d="M 90,31.132075471698112 l 30,0 l 0,2.8301886792452833 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="90"
+                  y="31.132075471698112"
                   width="30"
                   height="2.8301886792452833"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,120,14.150944)">
+              <g>
                 <path
                   id="g-svg-18"
                   fill="rgba(125,213,169,1)"
-                  d="M 0,0 l 30,0 l 0,9.433962264150944 l-30 0 z"
+                  d="M 120,14.150943396226417 l 30,0 l 0,9.433962264150944 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="120"
+                  y="14.150943396226417"
                   width="30"
                   height="9.433962264150944"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,150,22.641510)">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="rgba(125,213,169,1)"
-                  d="M 0,0 l 30,0 l 0,5.660377358490567 l-30 0 z"
+                  d="M 150,22.641509433962266 l 30,0 l 0,5.660377358490567 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="150"
+                  y="22.641509433962266"
                   width="30"
                   height="5.660377358490567"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,180,23.584906)">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="rgba(125,213,169,1)"
-                  d="M 0,0 l 30,0 l 0,9.433962264150944 l-30 0 z"
+                  d="M 180,23.58490566037736 l 30,0 l 0,9.433962264150944 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="180"
+                  y="23.58490566037736"
                   width="30"
                   height="9.433962264150944"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,210,36.792454)">
+              <g>
                 <path
                   id="g-svg-21"
                   fill="rgba(125,213,169,1)"
-                  d="M 0,0 l 30,0 l 0,0.9433962264150944 l-30 0 z"
+                  d="M 210,36.79245283018868 l 30,0 l 0,0.9433962264150944 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="210"
+                  y="36.79245283018868"
                   width="30"
                   height="0.9433962264150944"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,240,30.188679)">
+              <g>
                 <path
                   id="g-svg-22"
                   fill="rgba(125,213,169,1)"
-                  d="M 0,0 l 30,0 l 0,4.716981132075472 l-30 0 z"
+                  d="M 240,30.18867924528302 l 30,0 l 0,4.716981132075472 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="240"
+                  y="30.18867924528302"
                   width="30"
                   height="4.716981132075472"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,270,36.792454)">
+              <g>
                 <path
                   id="g-svg-23"
                   fill="rgba(125,213,169,1)"
-                  d="M 0,0 l 30,0 l 0,0 l-30 0 z"
+                  d="M 270,36.79245283018868 l 30,0 l 0,0 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="270"
+                  y="36.79245283018868"
                   width="30"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,22.641510)">
+              <g>
                 <path
                   id="g-svg-24"
                   fill="rgba(97,111,143,1)"
-                  d="M 0,0 l 30,0 l 0,0.9433962264150944 l-30 0 z"
+                  d="M 0,22.641509433962266 l 30,0 l 0,0.9433962264150944 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="0"
+                  y="22.641509433962266"
                   width="30"
                   height="0.9433962264150944"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,30,26.415094)">
+              <g>
                 <path
                   id="g-svg-25"
                   fill="rgba(97,111,143,1)"
-                  d="M 0,0 l 30,0 l 0,2.8301886792452833 l-30 0 z"
+                  d="M 30,26.41509433962264 l 30,0 l 0,2.8301886792452833 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="30"
+                  y="26.41509433962264"
                   width="30"
                   height="2.8301886792452833"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,60,21.698112)">
+              <g>
                 <path
                   id="g-svg-26"
                   fill="rgba(97,111,143,1)"
-                  d="M 0,0 l 30,0 l 0,3.7735849056603774 l-30 0 z"
+                  d="M 60,21.69811320754717 l 30,0 l 0,3.7735849056603774 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="60"
+                  y="21.69811320754717"
                   width="30"
                   height="3.7735849056603774"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,90,21.698112)">
+              <g>
                 <path
                   id="g-svg-27"
                   fill="rgba(97,111,143,1)"
-                  d="M 0,0 l 30,0 l 0,9.433962264150944 l-30 0 z"
+                  d="M 90,21.69811320754717 l 30,0 l 0,9.433962264150944 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="90"
+                  y="21.69811320754717"
                   width="30"
                   height="9.433962264150944"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,120,0)">
+              <g>
                 <path
                   id="g-svg-28"
                   fill="rgba(97,111,143,1)"
-                  d="M 0,0 l 30,0 l 0,14.150943396226415 l-30 0 z"
+                  d="M 120,0 l 30,0 l 0,14.150943396226415 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="120"
+                  y="0"
                   width="30"
                   height="14.150943396226415"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,150,50)">
+              <g>
                 <path
                   id="g-svg-29"
                   fill="rgba(97,111,143,1)"
-                  d="M 0,0 l 30,0 l 0,-12.264150943396226 l-30 0 z"
+                  d="M 150,50 l 30,0 l 0,-12.264150943396226 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="150"
+                  y="50"
                   width="30"
                   height="-12.264150943396226"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,180,20.754717)">
+              <g>
                 <path
                   id="g-svg-30"
                   fill="rgba(97,111,143,1)"
-                  d="M 0,0 l 30,0 l 0,2.8301886792452833 l-30 0 z"
+                  d="M 180,20.754716981132077 l 30,0 l 0,2.8301886792452833 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="180"
+                  y="20.754716981132077"
                   width="30"
                   height="2.8301886792452833"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,210,33.962265)">
+              <g>
                 <path
                   id="g-svg-31"
                   fill="rgba(97,111,143,1)"
-                  d="M 0,0 l 30,0 l 0,2.8301886792452833 l-30 0 z"
+                  d="M 210,33.9622641509434 l 30,0 l 0,2.8301886792452833 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="210"
+                  y="33.9622641509434"
                   width="30"
                   height="2.8301886792452833"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,240,20.754717)">
+              <g>
                 <path
                   id="g-svg-32"
                   fill="rgba(97,111,143,1)"
-                  d="M 0,0 l 30,0 l 0,9.433962264150944 l-30 0 z"
+                  d="M 240,20.754716981132077 l 30,0 l 0,9.433962264150944 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="240"
+                  y="20.754716981132077"
                   width="30"
                   height="9.433962264150944"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,270,25.471699)">
+              <g>
                 <path
                   id="g-svg-33"
                   fill="rgba(97,111,143,1)"
-                  d="M 0,0 l 30,0 l 0,11.320754716981133 l-30 0 z"
+                  d="M 270,25.471698113207548 l 30,0 l 0,11.320754716981133 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="270"
+                  y="25.471698113207548"
                   width="30"
                   height="11.320754716981133"
                 />
diff --git a/__tests__/integration/snapshots/Sparkline2.svg b/__tests__/integration/snapshots/Sparkline2.svg
index 623590cf2..5f7b878d8 100644
--- a/__tests__/integration/snapshots/Sparkline2.svg
+++ b/__tests__/integration/snapshots/Sparkline2.svg
@@ -1,52 +1,49 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-11" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-11" fill="none">
         <g
           id="g-svg-12"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,10)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkline"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,0,31.250000)">
+          <g id="g-svg-2" fill="none" class="spark sparkline" x="0" y="0">
+            <g id="g-svg-3" fill="none">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="none"
-                  d="M 0,6.25 L 33.33333333333333,16.25 L 66.66666666666666,15 L 100,13.75 L 133.33333333333331,0 L 166.66666666666669,6.25 L 200,12.5 L 233.33333333333334,18.75 L 266.66666666666663,15 L 300,17.5"
+                  d="M 0,37.5 L 33.33333333333333,47.5 L 66.66666666666666,46.25 L 100,45 L 133.33333333333331,31.25 L 166.66666666666669,37.5 L 200,43.75 L 233.33333333333334,50 L 266.66666666666663,46.25 L 300,48.75"
                   class="line"
                   stroke="rgba(131,218,173,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,18.750000)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="none"
-                  d="M 0,12.5 L 33.33333333333333,20 L 66.66666666666666,15 L 100,22.5 L 133.33333333333331,0 L 166.66666666666669,11.25 L 200,12.5 L 233.33333333333334,30 L 266.66666666666663,21.25 L 300,30"
+                  d="M 0,31.25 L 33.33333333333333,38.75 L 66.66666666666666,33.75 L 100,41.25 L 133.33333333333331,18.75 L 166.66666666666669,30 L 200,31.25 L 233.33333333333334,48.75 L 266.66666666666663,40 L 300,48.75"
                   class="line"
                   stroke="rgba(237,191,69,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="none"
@@ -56,7 +53,7 @@
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
@@ -65,26 +62,26 @@
                   opacity="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,18.750000)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,12.5 L 33.33333333333333,20 L 66.66666666666666,15 L 100,22.5 L 133.33333333333331,0 L 166.66666666666669,11.25 L 200,12.5 L 233.33333333333334,30 L 266.66666666666663,21.25 L 300,30 L 300,30 L 266.66666666666663,27.5 L 233.33333333333334,31.25 L 200,25 L 166.66666666666669,18.75 L 133.33333333333331,12.5 L 100,26.25 L 66.66666666666666,27.5 L 33.33333333333333,28.75 L 0,18.75 Z"
+                  d="M 0,31.25 L 33.33333333333333,38.75 L 66.66666666666666,33.75 L 100,41.25 L 133.33333333333331,18.75 L 166.66666666666669,30 L 200,31.25 L 233.33333333333334,48.75 L 266.66666666666663,40 L 300,48.75 L 300,48.75 L 266.66666666666663,46.25 L 233.33333333333334,50 L 200,43.75 L 166.66666666666669,37.5 L 133.33333333333331,31.25 L 100,45 L 66.66666666666666,46.25 L 33.33333333333333,47.5 L 0,37.5 Z"
                   class="area"
                   opacity="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,31.250000)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,6.25 L 33.33333333333333,16.25 L 66.66666666666666,15 L 100,13.75 L 133.33333333333331,0 L 166.66666666666669,6.25 L 200,12.5 L 233.33333333333334,18.75 L 266.66666666666663,15 L 300,17.5 L 300,18.75 L 0,18.75 Z"
+                  d="M 0,37.5 L 33.33333333333333,47.5 L 66.66666666666666,46.25 L 100,45 L 133.33333333333331,31.25 L 166.66666666666669,37.5 L 200,43.75 L 233.33333333333334,50 L 266.66666666666663,46.25 L 300,48.75 L 300,50 L 0,50 Z"
                   class="area"
                   opacity="0"
                 />
               </g>
             </g>
-            <g id="g-svg-4" fill="none" transform="matrix(1,0,0,1,0,0)" />
+            <g id="g-svg-4" fill="none" />
           </g>
         </g>
       </g>
diff --git a/__tests__/integration/snapshots/Sparkline3.svg b/__tests__/integration/snapshots/Sparkline3.svg
index 42210f0e7..e95e0d08b 100644
--- a/__tests__/integration/snapshots/Sparkline3.svg
+++ b/__tests__/integration/snapshots/Sparkline3.svg
@@ -1,52 +1,49 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-11" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-11" fill="none">
         <g
           id="g-svg-12"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,10)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkline"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,0,31.250000)">
+          <g id="g-svg-2" fill="none" class="spark sparkline" x="0" y="0">
+            <g id="g-svg-3" fill="none">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="none"
-                  d="M 0,6.25 C 0 6.25,19.717467518070325 16.25,33.33333333333333 16.25 C 46.38413418473699 16.25,53.33333333333332 15.5,66.66666666666666 15 C 80 14.5,87.18551129104729 15,100 13.75 C 113.85217795771396 12.398777735857273,119.59151152360312 0,133.33333333333331 0 C 146.2581781902698 0,153.33333333333334 3.749999999999993,166.66666666666669 6.25 C 180 8.75,186.66666666666666 10,200 12.5 C 213.33333333333334 15,219.92674889555082 18.75,233.33333333333334 18.75 C 246.59341556221744 18.75,253.3101080557719 15,266.66666666666663 15 C 279.9767747224386 15,300 17.5,300 17.5"
+                  d="M 0,37.5 C 0 37.5,19.717467518070325 47.5,33.33333333333333 47.5 C 46.38413418473699 47.5,53.33333333333332 46.75,66.66666666666666 46.25 C 80 45.75,87.18551129104729 46.25,100 45 C 113.85217795771396 43.64877773585727,119.59151152360312 31.25,133.33333333333331 31.25 C 146.2581781902698 31.25,153.33333333333334 34.99999999999999,166.66666666666669 37.5 C 180 40,186.66666666666666 41.25,200 43.75 C 213.33333333333334 46.25,219.92674889555082 50,233.33333333333334 50 C 246.59341556221744 50,253.3101080557719 46.25,266.66666666666663 46.25 C 279.9767747224386 46.25,300 48.75,300 48.75"
                   class="line"
                   stroke="rgba(131,218,173,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,18.750000)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="none"
-                  d="M 0,12.5 C 0 12.5,19.909552666576662 20,33.33333333333333 20 C 46.57621933324332 20,53.42378066675667 15,66.66666666666666 15 C 80.09044733342333 15,87.75109975431114 22.5,100 22.5 C 114.4177664209778 22.5,119.10945321086787 0,133.33333333333331 0 C 145.77611987753454 0,152.9785247200148 9.931654671664766,166.66666666666669 11.25 C 179.6451913866815 12.5,187.47245350243836 11.25,200 12.5 C 214.139120169105 13.910803002393273,219.41104906693857 30,233.33333333333334 30 C 246.0777157336052 30,253.3333333333333 21.25,266.66666666666663 21.25 C 280 21.25,300 30,300 30"
+                  d="M 0,31.25 C 0 31.25,19.909552666576662 38.75,33.33333333333333 38.75 C 46.57621933324332 38.75,53.42378066675667 33.75,66.66666666666666 33.75 C 80.09044733342333 33.75,87.75109975431114 41.25,100 41.25 C 114.4177664209778 41.25,119.10945321086787 18.75,133.33333333333331 18.75 C 145.77611987753454 18.75,152.9785247200148 28.681654671664766,166.66666666666669 30 C 179.6451913866815 31.25,187.47245350243836 30,200 31.25 C 214.139120169105 32.66080300239327,219.41104906693857 48.75,233.33333333333334 48.75 C 246.0777157336052 48.75,253.3333333333333 40,266.66666666666663 40 C 280 40,300 48.75,300 48.75"
                   class="line"
                   stroke="rgba(237,191,69,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="none"
@@ -56,7 +53,7 @@
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
@@ -65,26 +62,26 @@
                   opacity="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,18.750000)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,12.5 C 0 12.5,19.909552666576662 20,33.33333333333333 20 C 46.57621933324332 20,53.42378066675667 15,66.66666666666666 15 C 80.09044733342333 15,87.75109975431114 22.5,100 22.5 C 114.4177664209778 22.5,119.10945321086787 0,133.33333333333331 0 C 145.77611987753454 0,152.9785247200148 9.931654671664766,166.66666666666669 11.25 C 179.6451913866815 12.5,187.47245350243836 11.25,200 12.5 C 214.139120169105 13.910803002393273,219.41104906693857 30,233.33333333333334 30 C 246.0777157336052 30,253.3333333333333 21.25,266.66666666666663 21.25 C 280 21.25,300 30,300 30 L 300,30 C 300 30,279.9767747224386 27.5,266.66666666666663 27.5 C 253.3101080557719 27.5,246.59341556221744 31.25,233.33333333333334 31.25 C 219.92674889555082 31.25,213.33333333333331 27.5,200 25 C 186.66666666666669 22.5,180 21.249999999999993,166.66666666666669 18.75 C 153.33333333333334 16.25,146.2581781902698 12.5,133.33333333333331 12.5 C 119.59151152360312 12.5,113.85217795771396 24.898777735857273,100 26.25 C 87.18551129104729 27.5,79.99999999999999 27,66.66666666666666 27.5 C 53.333333333333336 28,46.38413418473699 28.75,33.33333333333333 28.75 C 19.717467518070325 28.75,0 18.75,0 18.75 M 0,12.5 Z"
+                  d="M 0,31.25 C 0 31.25,19.909552666576662 38.75,33.33333333333333 38.75 C 46.57621933324332 38.75,53.42378066675667 33.75,66.66666666666666 33.75 C 80.09044733342333 33.75,87.75109975431114 41.25,100 41.25 C 114.4177664209778 41.25,119.10945321086787 18.75,133.33333333333331 18.75 C 145.77611987753454 18.75,152.9785247200148 28.681654671664766,166.66666666666669 30 C 179.6451913866815 31.25,187.47245350243836 30,200 31.25 C 214.139120169105 32.66080300239327,219.41104906693857 48.75,233.33333333333334 48.75 C 246.0777157336052 48.75,253.3333333333333 40,266.66666666666663 40 C 280 40,300 48.75,300 48.75 L 300,48.75 C 300 48.75,279.9767747224386 46.25,266.66666666666663 46.25 C 253.3101080557719 46.25,246.59341556221744 50,233.33333333333334 50 C 219.92674889555082 50,213.33333333333331 46.25,200 43.75 C 186.66666666666669 41.25,180 39.99999999999999,166.66666666666669 37.5 C 153.33333333333334 35,146.2581781902698 31.25,133.33333333333331 31.25 C 119.59151152360312 31.25,113.85217795771396 43.64877773585727,100 45 C 87.18551129104729 46.25,79.99999999999999 45.75,66.66666666666666 46.25 C 53.333333333333336 46.75,46.38413418473699 47.5,33.33333333333333 47.5 C 19.717467518070325 47.5,0 37.5,0 37.5 M 0,31.25 Z"
                   class="area"
                   opacity="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,31.250000)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,6.25 C 0 6.25,19.717467518070325 16.25,33.33333333333333 16.25 C 46.38413418473699 16.25,53.33333333333332 15.5,66.66666666666666 15 C 80 14.5,87.18551129104729 15,100 13.75 C 113.85217795771396 12.398777735857273,119.59151152360312 0,133.33333333333331 0 C 146.2581781902698 0,153.33333333333334 3.749999999999993,166.66666666666669 6.25 C 180 8.75,186.66666666666666 10,200 12.5 C 213.33333333333334 15,219.92674889555082 18.75,233.33333333333334 18.75 C 246.59341556221744 18.75,253.3101080557719 15,266.66666666666663 15 C 279.9767747224386 15,300 17.5,300 17.5 L 300,18.75 L 0,18.75 Z"
+                  d="M 0,37.5 C 0 37.5,19.717467518070325 47.5,33.33333333333333 47.5 C 46.38413418473699 47.5,53.33333333333332 46.75,66.66666666666666 46.25 C 80 45.75,87.18551129104729 46.25,100 45 C 113.85217795771396 43.64877773585727,119.59151152360312 31.25,133.33333333333331 31.25 C 146.2581781902698 31.25,153.33333333333334 34.99999999999999,166.66666666666669 37.5 C 180 40,186.66666666666666 41.25,200 43.75 C 213.33333333333334 46.25,219.92674889555082 50,233.33333333333334 50 C 246.59341556221744 50,253.3101080557719 46.25,266.66666666666663 46.25 C 279.9767747224386 46.25,300 48.75,300 48.75 L 300,50 L 0,50 Z"
                   class="area"
                   opacity="0"
                 />
               </g>
             </g>
-            <g id="g-svg-4" fill="none" transform="matrix(1,0,0,1,0,0)" />
+            <g id="g-svg-4" fill="none" />
           </g>
         </g>
       </g>
diff --git a/__tests__/integration/snapshots/Sparkline4.svg b/__tests__/integration/snapshots/Sparkline4.svg
index cfd58447a..6aa449fa5 100644
--- a/__tests__/integration/snapshots/Sparkline4.svg
+++ b/__tests__/integration/snapshots/Sparkline4.svg
@@ -1,32 +1,29 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-11" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-11" fill="none">
         <g
           id="g-svg-12"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,10)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkline"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-2" fill="none" class="spark sparkline" x="0" y="0">
+            <g id="g-svg-3" fill="none">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="none"
@@ -36,17 +33,17 @@
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,16.666666)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="none"
-                  d="M 0,16.666666666666668 L 33.33333333333333,10 L 66.66666666666666,0 L 100,23.333333333333332 L 133.33333333333331,0 L 166.66666666666669,13.333333333333332 L 200,0 L 233.33333333333334,29.999999999999996 L 266.66666666666663,16.666666666666668 L 300,33.33333333333333"
+                  d="M 0,33.333333333333336 L 33.33333333333333,26.666666666666668 L 66.66666666666666,16.666666666666668 L 100,40 L 133.33333333333331,16.666666666666668 L 166.66666666666669,30 L 200,16.666666666666668 L 233.33333333333334,46.666666666666664 L 266.66666666666663,33.333333333333336 L 300,50"
                   class="line"
                   stroke="rgba(237,191,69,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="none"
@@ -56,7 +53,7 @@
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
@@ -66,17 +63,17 @@
                   stroke-width="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,16.666666)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,16.666666666666668 L 33.33333333333333,10 L 66.66666666666666,0 L 100,23.333333333333332 L 133.33333333333331,0 L 166.66666666666669,13.333333333333332 L 200,0 L 233.33333333333334,29.999999999999996 L 266.66666666666663,16.666666666666668 L 300,33.33333333333333 L 300,33.33333333333333 L 0,33.33333333333333 Z"
+                  d="M 0,33.333333333333336 L 33.33333333333333,26.666666666666668 L 66.66666666666666,16.666666666666668 L 100,40 L 133.33333333333331,16.666666666666668 L 166.66666666666669,30 L 200,16.666666666666668 L 233.33333333333334,46.666666666666664 L 266.66666666666663,33.333333333333336 L 300,50 L 300,50 L 0,50 Z"
                   class="area"
                   opacity="0.5"
                   stroke-width="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(210,206,249,1)"
@@ -87,7 +84,7 @@
                 />
               </g>
             </g>
-            <g id="g-svg-4" fill="none" transform="matrix(1,0,0,1,0,0)" />
+            <g id="g-svg-4" fill="none" />
           </g>
         </g>
       </g>
diff --git a/__tests__/integration/snapshots/Sparkline5.svg b/__tests__/integration/snapshots/Sparkline5.svg
index cb1dc0add..140143216 100644
--- a/__tests__/integration/snapshots/Sparkline5.svg
+++ b/__tests__/integration/snapshots/Sparkline5.svg
@@ -1,32 +1,29 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-11" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-11" fill="none">
         <g
           id="g-svg-12"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,10)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkline"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-2" fill="none" class="spark sparkline" x="0" y="0">
+            <g id="g-svg-3" fill="none">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="none"
@@ -36,17 +33,17 @@
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,16.666666)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="none"
-                  d="M 0,16.66666666666667 C 0 16.66666666666667,20.15651608720363 13.294204311532429,33.33333333333333 10.000000000000004 C 46.8231827538703 6.627537644865761,54.37321196911785 3.552713678800501e-15,66.66666666666666 3.552713678800501e-15 C 81.03987863578453 3.552713678800501e-15,86.66666666666666 23.333333333333336,100 23.333333333333336 C 113.33333333333333 23.333333333333336,119.16656762534008 3.552713678800501e-15,133.33333333333331 3.552713678800501e-15 C 145.83323429200675 3.552713678800501e-15,153.33333333333331 13.333333333333336,166.66666666666669 13.333333333333336 C 180.00000000000003 13.333333333333336,188.14360390012732 3.552713678800501e-15,200 3.552713678800501e-15 C 214.810270566794 3.552713678800501e-15,218.52306276653937 30,233.33333333333334 30 C 245.189729433206 30,253.58238285059863 16.66666666666667,266.66666666666663 16.66666666666667 C 280.2490495172653 16.66666666666667,300 33.333333333333336,300 33.333333333333336"
+                  d="M 0,33.333333333333336 C 0 33.333333333333336,20.15651608720363 29.960870978199093,33.33333333333333 26.666666666666668 C 46.8231827538703 23.294204311532425,54.37321196911785 16.666666666666668,66.66666666666666 16.666666666666668 C 81.03987863578453 16.666666666666668,86.66666666666666 40,100 40 C 113.33333333333333 40,119.16656762534008 16.666666666666668,133.33333333333331 16.666666666666668 C 145.83323429200675 16.666666666666668,153.33333333333331 30,166.66666666666669 30 C 180.00000000000003 30,188.14360390012732 16.666666666666668,200 16.666666666666668 C 214.810270566794 16.666666666666668,218.52306276653937 46.666666666666664,233.33333333333334 46.666666666666664 C 245.189729433206 46.666666666666664,253.58238285059863 33.333333333333336,266.66666666666663 33.333333333333336 C 280.2490495172653 33.333333333333336,300 50,300 50"
                   class="line"
                   stroke="rgba(237,191,69,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="none"
@@ -56,7 +53,7 @@
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
@@ -66,17 +63,17 @@
                   stroke-width="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,16.666666)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,16.66666666666667 C 0 16.66666666666667,20.15651608720363 13.294204311532429,33.33333333333333 10.000000000000004 C 46.8231827538703 6.627537644865761,54.37321196911785 3.552713678800501e-15,66.66666666666666 3.552713678800501e-15 C 81.03987863578453 3.552713678800501e-15,86.66666666666666 23.333333333333336,100 23.333333333333336 C 113.33333333333333 23.333333333333336,119.16656762534008 3.552713678800501e-15,133.33333333333331 3.552713678800501e-15 C 145.83323429200675 3.552713678800501e-15,153.33333333333331 13.333333333333336,166.66666666666669 13.333333333333336 C 180.00000000000003 13.333333333333336,188.14360390012732 3.552713678800501e-15,200 3.552713678800501e-15 C 214.810270566794 3.552713678800501e-15,218.52306276653937 30,233.33333333333334 30 C 245.189729433206 30,253.58238285059863 16.66666666666667,266.66666666666663 16.66666666666667 C 280.2490495172653 16.66666666666667,300 33.333333333333336,300 33.333333333333336 L 300,33.333333333333336 L 0,33.333333333333336 Z"
+                  d="M 0,33.333333333333336 C 0 33.333333333333336,20.15651608720363 29.960870978199093,33.33333333333333 26.666666666666668 C 46.8231827538703 23.294204311532425,54.37321196911785 16.666666666666668,66.66666666666666 16.666666666666668 C 81.03987863578453 16.666666666666668,86.66666666666666 40,100 40 C 113.33333333333333 40,119.16656762534008 16.666666666666668,133.33333333333331 16.666666666666668 C 145.83323429200675 16.666666666666668,153.33333333333331 30,166.66666666666669 30 C 180.00000000000003 30,188.14360390012732 16.666666666666668,200 16.666666666666668 C 214.810270566794 16.666666666666668,218.52306276653937 46.666666666666664,233.33333333333334 46.666666666666664 C 245.189729433206 46.666666666666664,253.58238285059863 33.333333333333336,266.66666666666663 33.333333333333336 C 280.2490495172653 33.333333333333336,300 50,300 50 L 300,50 L 0,50 Z"
                   class="area"
                   opacity="0.5"
                   stroke-width="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(210,206,249,1)"
@@ -87,7 +84,7 @@
                 />
               </g>
             </g>
-            <g id="g-svg-4" fill="none" transform="matrix(1,0,0,1,0,0)" />
+            <g id="g-svg-4" fill="none" />
           </g>
         </g>
       </g>
diff --git a/__tests__/integration/snapshots/Sparkline6.svg b/__tests__/integration/snapshots/Sparkline6.svg
index 7d4cedcd1..41b5daa5d 100644
--- a/__tests__/integration/snapshots/Sparkline6.svg
+++ b/__tests__/integration/snapshots/Sparkline6.svg
@@ -1,52 +1,49 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-11" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-11" fill="none">
         <g
           id="g-svg-12"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,10)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkline"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,0,31.250000)">
+          <g id="g-svg-2" fill="none" class="spark sparkline" x="0" y="0">
+            <g id="g-svg-3" fill="none">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="none"
-                  d="M 0,6.25 L 33.33333333333333,16.25 L 66.66666666666666,15 L 100,13.75 L 133.33333333333331,0 L 166.66666666666669,6.25 L 200,12.5 L 233.33333333333334,18.75 L 266.66666666666663,15 L 300,17.5"
+                  d="M 0,37.5 L 33.33333333333333,47.5 L 66.66666666666666,46.25 L 100,45 L 133.33333333333331,31.25 L 166.66666666666669,37.5 L 200,43.75 L 233.33333333333334,50 L 266.66666666666663,46.25 L 300,48.75"
                   class="line"
                   stroke="rgba(131,218,173,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,18.750000)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="none"
-                  d="M 0,12.5 L 33.33333333333333,20 L 66.66666666666666,15 L 100,22.5 L 133.33333333333331,0 L 166.66666666666669,11.25 L 200,12.5 L 233.33333333333334,30 L 266.66666666666663,21.25 L 300,30"
+                  d="M 0,31.25 L 33.33333333333333,38.75 L 66.66666666666666,33.75 L 100,41.25 L 133.33333333333331,18.75 L 166.66666666666669,30 L 200,31.25 L 233.33333333333334,48.75 L 266.66666666666663,40 L 300,48.75"
                   class="line"
                   stroke="rgba(237,191,69,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="none"
@@ -56,7 +53,7 @@
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
@@ -66,28 +63,28 @@
                   stroke-width="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,18.750000)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,12.5 L 33.33333333333333,20 L 66.66666666666666,15 L 100,22.5 L 133.33333333333331,0 L 166.66666666666669,11.25 L 200,12.5 L 233.33333333333334,30 L 266.66666666666663,21.25 L 300,30 L 300,30 L 266.66666666666663,27.5 L 233.33333333333334,31.25 L 200,25 L 166.66666666666669,18.75 L 133.33333333333331,12.5 L 100,26.25 L 66.66666666666666,27.5 L 33.33333333333333,28.75 L 0,18.75 Z"
+                  d="M 0,31.25 L 33.33333333333333,38.75 L 66.66666666666666,33.75 L 100,41.25 L 133.33333333333331,18.75 L 166.66666666666669,30 L 200,31.25 L 233.33333333333334,48.75 L 266.66666666666663,40 L 300,48.75 L 300,48.75 L 266.66666666666663,46.25 L 233.33333333333334,50 L 200,43.75 L 166.66666666666669,37.5 L 133.33333333333331,31.25 L 100,45 L 66.66666666666666,46.25 L 33.33333333333333,47.5 L 0,37.5 Z"
                   class="area"
                   opacity="0.5"
                   stroke-width="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,31.250000)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,6.25 L 33.33333333333333,16.25 L 66.66666666666666,15 L 100,13.75 L 133.33333333333331,0 L 166.66666666666669,6.25 L 200,12.5 L 233.33333333333334,18.75 L 266.66666666666663,15 L 300,17.5 L 300,18.75 L 0,18.75 Z"
+                  d="M 0,37.5 L 33.33333333333333,47.5 L 66.66666666666666,46.25 L 100,45 L 133.33333333333331,31.25 L 166.66666666666669,37.5 L 200,43.75 L 233.33333333333334,50 L 266.66666666666663,46.25 L 300,48.75 L 300,50 L 0,50 Z"
                   class="area"
                   opacity="0.5"
                   stroke-width="0"
                 />
               </g>
             </g>
-            <g id="g-svg-4" fill="none" transform="matrix(1,0,0,1,0,0)" />
+            <g id="g-svg-4" fill="none" />
           </g>
         </g>
       </g>
diff --git a/__tests__/integration/snapshots/Sparkline7.svg b/__tests__/integration/snapshots/Sparkline7.svg
index 69ecff5d3..12a485be6 100644
--- a/__tests__/integration/snapshots/Sparkline7.svg
+++ b/__tests__/integration/snapshots/Sparkline7.svg
@@ -1,52 +1,49 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-11" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-11" fill="none">
         <g
           id="g-svg-12"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,10)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkline"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,0,31.250000)">
+          <g id="g-svg-2" fill="none" class="spark sparkline" x="0" y="0">
+            <g id="g-svg-3" fill="none">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="none"
-                  d="M 0,6.25 C 0 6.25,19.717467518070325 16.25,33.33333333333333 16.25 C 46.38413418473699 16.25,53.33333333333332 15.5,66.66666666666666 15 C 80 14.5,87.18551129104729 15,100 13.75 C 113.85217795771396 12.398777735857273,119.59151152360312 0,133.33333333333331 0 C 146.2581781902698 0,153.33333333333334 3.749999999999993,166.66666666666669 6.25 C 180 8.75,186.66666666666666 10,200 12.5 C 213.33333333333334 15,219.92674889555082 18.75,233.33333333333334 18.75 C 246.59341556221744 18.75,253.3101080557719 15,266.66666666666663 15 C 279.9767747224386 15,300 17.5,300 17.5"
+                  d="M 0,37.5 C 0 37.5,19.717467518070325 47.5,33.33333333333333 47.5 C 46.38413418473699 47.5,53.33333333333332 46.75,66.66666666666666 46.25 C 80 45.75,87.18551129104729 46.25,100 45 C 113.85217795771396 43.64877773585727,119.59151152360312 31.25,133.33333333333331 31.25 C 146.2581781902698 31.25,153.33333333333334 34.99999999999999,166.66666666666669 37.5 C 180 40,186.66666666666666 41.25,200 43.75 C 213.33333333333334 46.25,219.92674889555082 50,233.33333333333334 50 C 246.59341556221744 50,253.3101080557719 46.25,266.66666666666663 46.25 C 279.9767747224386 46.25,300 48.75,300 48.75"
                   class="line"
                   stroke="rgba(131,218,173,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,18.750000)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="none"
-                  d="M 0,12.5 C 0 12.5,19.909552666576662 20,33.33333333333333 20 C 46.57621933324332 20,53.42378066675667 15,66.66666666666666 15 C 80.09044733342333 15,87.75109975431114 22.5,100 22.5 C 114.4177664209778 22.5,119.10945321086787 0,133.33333333333331 0 C 145.77611987753454 0,152.9785247200148 9.931654671664766,166.66666666666669 11.25 C 179.6451913866815 12.5,187.47245350243836 11.25,200 12.5 C 214.139120169105 13.910803002393273,219.41104906693857 30,233.33333333333334 30 C 246.0777157336052 30,253.3333333333333 21.25,266.66666666666663 21.25 C 280 21.25,300 30,300 30"
+                  d="M 0,31.25 C 0 31.25,19.909552666576662 38.75,33.33333333333333 38.75 C 46.57621933324332 38.75,53.42378066675667 33.75,66.66666666666666 33.75 C 80.09044733342333 33.75,87.75109975431114 41.25,100 41.25 C 114.4177664209778 41.25,119.10945321086787 18.75,133.33333333333331 18.75 C 145.77611987753454 18.75,152.9785247200148 28.681654671664766,166.66666666666669 30 C 179.6451913866815 31.25,187.47245350243836 30,200 31.25 C 214.139120169105 32.66080300239327,219.41104906693857 48.75,233.33333333333334 48.75 C 246.0777157336052 48.75,253.3333333333333 40,266.66666666666663 40 C 280 40,300 48.75,300 48.75"
                   class="line"
                   stroke="rgba(237,191,69,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="none"
@@ -56,7 +53,7 @@
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
@@ -66,28 +63,28 @@
                   stroke-width="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,18.750000)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,12.5 C 0 12.5,19.909552666576662 20,33.33333333333333 20 C 46.57621933324332 20,53.42378066675667 15,66.66666666666666 15 C 80.09044733342333 15,87.75109975431114 22.5,100 22.5 C 114.4177664209778 22.5,119.10945321086787 0,133.33333333333331 0 C 145.77611987753454 0,152.9785247200148 9.931654671664766,166.66666666666669 11.25 C 179.6451913866815 12.5,187.47245350243836 11.25,200 12.5 C 214.139120169105 13.910803002393273,219.41104906693857 30,233.33333333333334 30 C 246.0777157336052 30,253.3333333333333 21.25,266.66666666666663 21.25 C 280 21.25,300 30,300 30 L 300,30 C 300 30,279.9767747224386 27.5,266.66666666666663 27.5 C 253.3101080557719 27.5,246.59341556221744 31.25,233.33333333333334 31.25 C 219.92674889555082 31.25,213.33333333333331 27.5,200 25 C 186.66666666666669 22.5,180 21.249999999999993,166.66666666666669 18.75 C 153.33333333333334 16.25,146.2581781902698 12.5,133.33333333333331 12.5 C 119.59151152360312 12.5,113.85217795771396 24.898777735857273,100 26.25 C 87.18551129104729 27.5,79.99999999999999 27,66.66666666666666 27.5 C 53.333333333333336 28,46.38413418473699 28.75,33.33333333333333 28.75 C 19.717467518070325 28.75,0 18.75,0 18.75 M 0,12.5 Z"
+                  d="M 0,31.25 C 0 31.25,19.909552666576662 38.75,33.33333333333333 38.75 C 46.57621933324332 38.75,53.42378066675667 33.75,66.66666666666666 33.75 C 80.09044733342333 33.75,87.75109975431114 41.25,100 41.25 C 114.4177664209778 41.25,119.10945321086787 18.75,133.33333333333331 18.75 C 145.77611987753454 18.75,152.9785247200148 28.681654671664766,166.66666666666669 30 C 179.6451913866815 31.25,187.47245350243836 30,200 31.25 C 214.139120169105 32.66080300239327,219.41104906693857 48.75,233.33333333333334 48.75 C 246.0777157336052 48.75,253.3333333333333 40,266.66666666666663 40 C 280 40,300 48.75,300 48.75 L 300,48.75 C 300 48.75,279.9767747224386 46.25,266.66666666666663 46.25 C 253.3101080557719 46.25,246.59341556221744 50,233.33333333333334 50 C 219.92674889555082 50,213.33333333333331 46.25,200 43.75 C 186.66666666666669 41.25,180 39.99999999999999,166.66666666666669 37.5 C 153.33333333333334 35,146.2581781902698 31.25,133.33333333333331 31.25 C 119.59151152360312 31.25,113.85217795771396 43.64877773585727,100 45 C 87.18551129104729 46.25,79.99999999999999 45.75,66.66666666666666 46.25 C 53.333333333333336 46.75,46.38413418473699 47.5,33.33333333333333 47.5 C 19.717467518070325 47.5,0 37.5,0 37.5 M 0,31.25 Z"
                   class="area"
                   opacity="0.5"
                   stroke-width="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,31.250000)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,6.25 C 0 6.25,19.717467518070325 16.25,33.33333333333333 16.25 C 46.38413418473699 16.25,53.33333333333332 15.5,66.66666666666666 15 C 80 14.5,87.18551129104729 15,100 13.75 C 113.85217795771396 12.398777735857273,119.59151152360312 0,133.33333333333331 0 C 146.2581781902698 0,153.33333333333334 3.749999999999993,166.66666666666669 6.25 C 180 8.75,186.66666666666666 10,200 12.5 C 213.33333333333334 15,219.92674889555082 18.75,233.33333333333334 18.75 C 246.59341556221744 18.75,253.3101080557719 15,266.66666666666663 15 C 279.9767747224386 15,300 17.5,300 17.5 L 300,18.75 L 0,18.75 Z"
+                  d="M 0,37.5 C 0 37.5,19.717467518070325 47.5,33.33333333333333 47.5 C 46.38413418473699 47.5,53.33333333333332 46.75,66.66666666666666 46.25 C 80 45.75,87.18551129104729 46.25,100 45 C 113.85217795771396 43.64877773585727,119.59151152360312 31.25,133.33333333333331 31.25 C 146.2581781902698 31.25,153.33333333333334 34.99999999999999,166.66666666666669 37.5 C 180 40,186.66666666666666 41.25,200 43.75 C 213.33333333333334 46.25,219.92674889555082 50,233.33333333333334 50 C 246.59341556221744 50,253.3101080557719 46.25,266.66666666666663 46.25 C 279.9767747224386 46.25,300 48.75,300 48.75 L 300,50 L 0,50 Z"
                   class="area"
                   opacity="0.5"
                   stroke-width="0"
                 />
               </g>
             </g>
-            <g id="g-svg-4" fill="none" transform="matrix(1,0,0,1,0,0)" />
+            <g id="g-svg-4" fill="none" />
           </g>
         </g>
       </g>
diff --git a/__tests__/integration/snapshots/Sparkline8.svg b/__tests__/integration/snapshots/Sparkline8.svg
index e99514d8b..31a56c9b6 100644
--- a/__tests__/integration/snapshots/Sparkline8.svg
+++ b/__tests__/integration/snapshots/Sparkline8.svg
@@ -1,392 +1,444 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-11" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-11" fill="none">
         <g
           id="g-svg-12"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,10)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkcolumn"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-3"
-              name="columns"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,0,16.666666)">
+          <g id="g-svg-2" fill="none" class="spark sparkcolumn" x="0" y="0">
+            <g id="g-svg-3" name="columns" fill="none">
+              <g>
                 <path
                   id="g-svg-4"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,33.33333333333333 l-10 0 z"
+                  d="M 0,16.666666666666668 l 10,0 l 0,33.33333333333333 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="0"
+                  y="16.666666666666668"
                   width="10"
                   height="33.33333333333333"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,30,43.333332)">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,6.666666666666667 l-10 0 z"
+                  d="M 30,43.333333333333336 l 10,0 l 0,6.666666666666667 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="30"
+                  y="43.333333333333336"
                   width="10"
                   height="6.666666666666667"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,60,40)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                  d="M 60,40 l 10,0 l 0,10 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="60"
+                  y="40"
                   width="10"
                   height="10"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,90,36.666668)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,13.333333333333334 l-10 0 z"
+                  d="M 90,36.66666666666667 l 10,0 l 0,13.333333333333334 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="90"
+                  y="36.66666666666667"
                   width="10"
                   height="13.333333333333334"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,120,0)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,50 l-10 0 z"
+                  d="M 120,0 l 10,0 l 0,50 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="120"
+                  y="0"
                   width="10"
                   height="50"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,150,16.666666)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,33.33333333333333 l-10 0 z"
+                  d="M 150,16.666666666666668 l 10,0 l 0,33.33333333333333 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="150"
+                  y="16.666666666666668"
                   width="10"
                   height="33.33333333333333"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,180,33.333332)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,16.666666666666664 l-10 0 z"
+                  d="M 180,33.333333333333336 l 10,0 l 0,16.666666666666664 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="180"
+                  y="33.333333333333336"
                   width="10"
                   height="16.666666666666664"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,210,50)">
+              <g>
                 <path
                   id="g-svg-11"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,0 l-10 0 z"
+                  d="M 210,50 l 10,0 l 0,0 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="210"
+                  y="50"
                   width="10"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,240,40)">
+              <g>
                 <path
                   id="g-svg-12"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                  d="M 240,40 l 10,0 l 0,10 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="240"
+                  y="40"
                   width="10"
                   height="10"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,270,46.666668)">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,3.3333333333333335 l-10 0 z"
+                  d="M 270,46.666666666666664 l 10,0 l 0,3.3333333333333335 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="270"
+                  y="46.666666666666664"
                   width="10"
                   height="3.3333333333333335"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,10,33.333332)">
+              <g>
                 <path
                   id="g-svg-14"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,16.666666666666664 l-10 0 z"
+                  d="M 10,33.333333333333336 l 10,0 l 0,16.666666666666664 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="10"
+                  y="33.333333333333336"
                   width="10"
                   height="16.666666666666664"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,40,26.666666)">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,23.333333333333332 l-10 0 z"
+                  d="M 40,26.666666666666668 l 10,0 l 0,23.333333333333332 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="40"
+                  y="26.666666666666668"
                   width="10"
                   height="23.333333333333332"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,70,16.666666)">
+              <g>
                 <path
                   id="g-svg-16"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,33.33333333333333 l-10 0 z"
+                  d="M 70,16.666666666666668 l 10,0 l 0,33.33333333333333 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="70"
+                  y="16.666666666666668"
                   width="10"
                   height="33.33333333333333"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,100,40)">
+              <g>
                 <path
                   id="g-svg-17"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                  d="M 100,40 l 10,0 l 0,10 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="100"
+                  y="40"
                   width="10"
                   height="10"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,130,16.666666)">
+              <g>
                 <path
                   id="g-svg-18"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,33.33333333333333 l-10 0 z"
+                  d="M 130,16.666666666666668 l 10,0 l 0,33.33333333333333 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="130"
+                  y="16.666666666666668"
                   width="10"
                   height="33.33333333333333"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,160,30)">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,20 l-10 0 z"
+                  d="M 160,30 l 10,0 l 0,20 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="160"
+                  y="30"
                   width="10"
                   height="20"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,190,16.666666)">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,33.33333333333333 l-10 0 z"
+                  d="M 190,16.666666666666668 l 10,0 l 0,33.33333333333333 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="190"
+                  y="16.666666666666668"
                   width="10"
                   height="33.33333333333333"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,220,46.666668)">
+              <g>
                 <path
                   id="g-svg-21"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,3.3333333333333335 l-10 0 z"
+                  d="M 220,46.666666666666664 l 10,0 l 0,3.3333333333333335 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="220"
+                  y="46.666666666666664"
                   width="10"
                   height="3.3333333333333335"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,250,33.333332)">
+              <g>
                 <path
                   id="g-svg-22"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,16.666666666666664 l-10 0 z"
+                  d="M 250,33.333333333333336 l 10,0 l 0,16.666666666666664 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="250"
+                  y="33.333333333333336"
                   width="10"
                   height="16.666666666666664"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,280,50)">
+              <g>
                 <path
                   id="g-svg-23"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,0 l-10 0 z"
+                  d="M 280,50 l 10,0 l 0,0 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="280"
+                  y="50"
                   width="10"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,20,46.666668)">
+              <g>
                 <path
                   id="g-svg-24"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,3.3333333333333335 l-10 0 z"
+                  d="M 20,46.666666666666664 l 10,0 l 0,3.3333333333333335 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="20"
+                  y="46.666666666666664"
                   width="10"
                   height="3.3333333333333335"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,50,40)">
+              <g>
                 <path
                   id="g-svg-25"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                  d="M 50,40 l 10,0 l 0,10 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="50"
+                  y="40"
                   width="10"
                   height="10"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,80,36.666668)">
+              <g>
                 <path
                   id="g-svg-26"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,13.333333333333334 l-10 0 z"
+                  d="M 80,36.66666666666667 l 10,0 l 0,13.333333333333334 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="80"
+                  y="36.66666666666667"
                   width="10"
                   height="13.333333333333334"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,110,16.666666)">
+              <g>
                 <path
                   id="g-svg-27"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,33.33333333333333 l-10 0 z"
+                  d="M 110,16.666666666666668 l 10,0 l 0,33.33333333333333 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="110"
+                  y="16.666666666666668"
                   width="10"
                   height="33.33333333333333"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,140,0)">
+              <g>
                 <path
                   id="g-svg-28"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,50 l-10 0 z"
+                  d="M 140,0 l 10,0 l 0,50 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="140"
+                  y="0"
                   width="10"
                   height="50"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,170,6.666667)">
+              <g>
                 <path
                   id="g-svg-29"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,43.333333333333336 l-10 0 z"
+                  d="M 170,6.666666666666665 l 10,0 l 0,43.333333333333336 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="170"
+                  y="6.666666666666665"
                   width="10"
                   height="43.333333333333336"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,200,40)">
+              <g>
                 <path
                   id="g-svg-30"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                  d="M 200,40 l 10,0 l 0,10 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="200"
+                  y="40"
                   width="10"
                   height="10"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,230,40)">
+              <g>
                 <path
                   id="g-svg-31"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+                  d="M 230,40 l 10,0 l 0,10 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="230"
+                  y="40"
                   width="10"
                   height="10"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,260,16.666666)">
+              <g>
                 <path
                   id="g-svg-32"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,33.33333333333333 l-10 0 z"
+                  d="M 260,16.666666666666668 l 10,0 l 0,33.33333333333333 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="260"
+                  y="16.666666666666668"
                   width="10"
                   height="33.33333333333333"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,290,10)">
+              <g>
                 <path
                   id="g-svg-33"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,40 l-10 0 z"
+                  d="M 290,9.999999999999998 l 10,0 l 0,40 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="290"
+                  y="9.999999999999998"
                   width="10"
                   height="40"
                 />
diff --git a/__tests__/integration/snapshots/Sparkline9.svg b/__tests__/integration/snapshots/Sparkline9.svg
index 9c33b15bc..ccac62519 100644
--- a/__tests__/integration/snapshots/Sparkline9.svg
+++ b/__tests__/integration/snapshots/Sparkline9.svg
@@ -1,392 +1,444 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="60"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-34" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-34" fill="none">
         <g
           id="g-svg-35"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,10)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkcolumn"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g
-              id="g-svg-3"
-              name="columns"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,0,17.592592)">
+          <g id="g-svg-2" fill="none" class="spark sparkcolumn" x="0" y="0">
+            <g id="g-svg-3" name="columns" fill="none">
+              <g>
                 <path
                   id="g-svg-4"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 30,0 l 0,9.25925925925926 l-30 0 z"
+                  d="M 0,17.59259259259259 l 30,0 l 0,9.25925925925926 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="0"
+                  y="17.59259259259259"
                   width="30"
                   height="9.25925925925926"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,30,25)">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 30,0 l 0,1.8518518518518516 l-30 0 z"
+                  d="M 30,25 l 30,0 l 0,1.8518518518518516 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="30"
+                  y="25"
                   width="30"
                   height="1.8518518518518516"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,60,24.074074)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 30,0 l 0,2.7777777777777777 l-30 0 z"
+                  d="M 60,24.074074074074076 l 30,0 l 0,2.7777777777777777 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="60"
+                  y="24.074074074074076"
                   width="30"
                   height="2.7777777777777777"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,90,23.148148)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 30,0 l 0,3.7037037037037033 l-30 0 z"
+                  d="M 90,23.148148148148145 l 30,0 l 0,3.7037037037037033 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="90"
+                  y="23.148148148148145"
                   width="30"
                   height="3.7037037037037033"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,120,12.962963)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 30,0 l 0,13.88888888888889 l-30 0 z"
+                  d="M 120,12.962962962962965 l 30,0 l 0,13.88888888888889 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="120"
+                  y="12.962962962962965"
                   width="30"
                   height="13.88888888888889"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,150,17.592592)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 30,0 l 0,9.25925925925926 l-30 0 z"
+                  d="M 150,17.59259259259259 l 30,0 l 0,9.25925925925926 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="150"
+                  y="17.59259259259259"
                   width="30"
                   height="9.25925925925926"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,180,22.222221)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 30,0 l 0,4.62962962962963 l-30 0 z"
+                  d="M 180,22.22222222222222 l 30,0 l 0,4.62962962962963 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="180"
+                  y="22.22222222222222"
                   width="30"
                   height="4.62962962962963"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,210,26.851852)">
+              <g>
                 <path
                   id="g-svg-11"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 30,0 l 0,0 l-30 0 z"
+                  d="M 210,26.851851851851848 l 30,0 l 0,0 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="210"
+                  y="26.851851851851848"
                   width="30"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,240,24.074074)">
+              <g>
                 <path
                   id="g-svg-12"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 30,0 l 0,2.7777777777777777 l-30 0 z"
+                  d="M 240,24.074074074074076 l 30,0 l 0,2.7777777777777777 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="240"
+                  y="24.074074074074076"
                   width="30"
                   height="2.7777777777777777"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,270,25.925926)">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 30,0 l 0,0.9259259259259258 l-30 0 z"
+                  d="M 270,25.92592592592593 l 30,0 l 0,0.9259259259259258 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="270"
+                  y="25.92592592592593"
                   width="30"
                   height="0.9259259259259258"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,12.962963)">
+              <g>
                 <path
                   id="g-svg-14"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 30,0 l 0,4.62962962962963 l-30 0 z"
+                  d="M 0,12.962962962962965 l 30,0 l 0,4.62962962962963 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="0"
+                  y="12.962962962962965"
                   width="30"
                   height="4.62962962962963"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,30,18.518518)">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 30,0 l 0,6.481481481481481 l-30 0 z"
+                  d="M 30,18.51851851851852 l 30,0 l 0,6.481481481481481 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="30"
+                  y="18.51851851851852"
                   width="30"
                   height="6.481481481481481"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,60,14.814815)">
+              <g>
                 <path
                   id="g-svg-16"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 30,0 l 0,9.25925925925926 l-30 0 z"
+                  d="M 60,14.814814814814813 l 30,0 l 0,9.25925925925926 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="60"
+                  y="14.814814814814813"
                   width="30"
                   height="9.25925925925926"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,90,20.370371)">
+              <g>
                 <path
                   id="g-svg-17"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 30,0 l 0,2.7777777777777777 l-30 0 z"
+                  d="M 90,20.370370370370374 l 30,0 l 0,2.7777777777777777 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="90"
+                  y="20.370370370370374"
                   width="30"
                   height="2.7777777777777777"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,120,36.111111)">
+              <g>
                 <path
                   id="g-svg-18"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 30,0 l 0,-9.25925925925926 l-30 0 z"
+                  d="M 120,36.11111111111111 l 30,0 l 0,-9.25925925925926 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="120"
+                  y="36.11111111111111"
                   width="30"
                   height="-9.25925925925926"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,150,12.037037)">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 30,0 l 0,5.555555555555555 l-30 0 z"
+                  d="M 150,12.037037037037035 l 30,0 l 0,5.555555555555555 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="150"
+                  y="12.037037037037035"
                   width="30"
                   height="5.555555555555555"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,180,12.962963)">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 30,0 l 0,9.25925925925926 l-30 0 z"
+                  d="M 180,12.962962962962965 l 30,0 l 0,9.25925925925926 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="180"
+                  y="12.962962962962965"
                   width="30"
                   height="9.25925925925926"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,210,25.925926)">
+              <g>
                 <path
                   id="g-svg-21"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 30,0 l 0,0.9259259259259258 l-30 0 z"
+                  d="M 210,25.92592592592593 l 30,0 l 0,0.9259259259259258 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="210"
+                  y="25.92592592592593"
                   width="30"
                   height="0.9259259259259258"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,240,19.444445)">
+              <g>
                 <path
                   id="g-svg-22"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 30,0 l 0,4.62962962962963 l-30 0 z"
+                  d="M 240,19.444444444444443 l 30,0 l 0,4.62962962962963 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="240"
+                  y="19.444444444444443"
                   width="30"
                   height="4.62962962962963"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,270,25.925926)">
+              <g>
                 <path
                   id="g-svg-23"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 30,0 l 0,0 l-30 0 z"
+                  d="M 270,25.92592592592593 l 30,0 l 0,0 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="270"
+                  y="25.92592592592593"
                   width="30"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,12.037037)">
+              <g>
                 <path
                   id="g-svg-24"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 30,0 l 0,0.9259259259259258 l-30 0 z"
+                  d="M 0,12.037037037037035 l 30,0 l 0,0.9259259259259258 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="0"
+                  y="12.037037037037035"
                   width="30"
                   height="0.9259259259259258"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,30,15.740741)">
+              <g>
                 <path
                   id="g-svg-25"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 30,0 l 0,2.7777777777777777 l-30 0 z"
+                  d="M 30,15.740740740740739 l 30,0 l 0,2.7777777777777777 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="30"
+                  y="15.740740740740739"
                   width="30"
                   height="2.7777777777777777"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,60,11.111111)">
+              <g>
                 <path
                   id="g-svg-26"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 30,0 l 0,3.7037037037037033 l-30 0 z"
+                  d="M 60,11.11111111111111 l 30,0 l 0,3.7037037037037033 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="60"
+                  y="11.11111111111111"
                   width="30"
                   height="3.7037037037037033"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,90,11.111111)">
+              <g>
                 <path
                   id="g-svg-27"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 30,0 l 0,9.25925925925926 l-30 0 z"
+                  d="M 90,11.11111111111111 l 30,0 l 0,9.25925925925926 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="90"
+                  y="11.11111111111111"
                   width="30"
                   height="9.25925925925926"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,120,50)">
+              <g>
                 <path
                   id="g-svg-28"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 30,0 l 0,-13.88888888888889 l-30 0 z"
+                  d="M 120,50 l 30,0 l 0,-13.88888888888889 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="120"
+                  y="50"
                   width="30"
                   height="-13.88888888888889"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,150,0)">
+              <g>
                 <path
                   id="g-svg-29"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 30,0 l 0,12.037037037037036 l-30 0 z"
+                  d="M 150,0 l 30,0 l 0,12.037037037037036 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="150"
+                  y="0"
                   width="30"
                   height="12.037037037037036"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,180,10.185185)">
+              <g>
                 <path
                   id="g-svg-30"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 30,0 l 0,2.7777777777777777 l-30 0 z"
+                  d="M 180,10.185185185185187 l 30,0 l 0,2.7777777777777777 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="180"
+                  y="10.185185185185187"
                   width="30"
                   height="2.7777777777777777"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,210,23.148148)">
+              <g>
                 <path
                   id="g-svg-31"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 30,0 l 0,2.7777777777777777 l-30 0 z"
+                  d="M 210,23.148148148148145 l 30,0 l 0,2.7777777777777777 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="210"
+                  y="23.148148148148145"
                   width="30"
                   height="2.7777777777777777"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,240,36.111111)">
+              <g>
                 <path
                   id="g-svg-32"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 30,0 l 0,-9.25925925925926 l-30 0 z"
+                  d="M 240,36.11111111111111 l 30,0 l 0,-9.25925925925926 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="240"
+                  y="36.11111111111111"
                   width="30"
                   height="-9.25925925925926"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,270,14.814815)">
+              <g>
                 <path
                   id="g-svg-33"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 30,0 l 0,11.11111111111111 l-30 0 z"
+                  d="M 270,14.814814814814813 l 30,0 l 0,11.11111111111111 l-30 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="270"
+                  y="14.814814814814813"
                   width="30"
                   height="11.11111111111111"
                 />
diff --git a/__tests__/integration/snapshots/SparklineScaleColumn.svg b/__tests__/integration/snapshots/SparklineScaleColumn.svg
index 4529a5d7e..f7e48a6ac 100644
--- a/__tests__/integration/snapshots/SparklineScaleColumn.svg
+++ b/__tests__/integration/snapshots/SparklineScaleColumn.svg
@@ -1,403 +1,454 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="310"
-  height="120"
+  width="340"
+  height="150"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,10,10)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-21" fill="none">
+        <g>
           <path
             id="g-svg-22"
             fill="none"
-            d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+            d="M 10,10 l 300,0 l 0,50 l-300 0 z"
+            x="10"
+            y="10"
             width="300"
             height="50"
             stroke="rgba(255,0,0,1)"
             stroke-width="1"
           />
         </g>
-        <g
-          id="g-svg-23"
-          fill="none"
-          width="300"
-          height="50"
-          transform="matrix(1,0,0,1,10,10)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-23" fill="none" x="10" y="10" width="300" height="50">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkcolumn"
-            transform="matrix(1,0,0,1,0,0)"
-          >
+          <g id="g-svg-2" fill="none" class="spark sparkcolumn" x="10" y="10">
             <g
               id="g-svg-3"
               name="columns"
               fill="none"
-              transform="matrix(1,0,0,1,0,0)"
+              transform="matrix(1,0,0,1,10,10)"
             >
-              <g transform="matrix(1,0,0,1,0,26.666666)">
+              <g>
                 <path
                   id="g-svg-4"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,23.333333333333332 l-10 0 z"
+                  d="M 0,26.666666666666668 l 10,0 l 0,23.333333333333332 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="0"
+                  y="26.666666666666668"
                   width="10"
                   height="23.333333333333332"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,30,45.333332)">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,4.666666666666667 l-10 0 z"
+                  d="M 30,45.333333333333336 l 10,0 l 0,4.666666666666667 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="30"
+                  y="45.333333333333336"
                   width="10"
                   height="4.666666666666667"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,60,43)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,7 l-10 0 z"
+                  d="M 60,43 l 10,0 l 0,7 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="60"
+                  y="43"
                   width="10"
                   height="7"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,90,40.666668)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,9.333333333333334 l-10 0 z"
+                  d="M 90,40.66666666666667 l 10,0 l 0,9.333333333333334 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="90"
+                  y="40.66666666666667"
                   width="10"
                   height="9.333333333333334"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,120,15)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,35 l-10 0 z"
+                  d="M 120,15.000000000000002 l 10,0 l 0,35 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="120"
+                  y="15.000000000000002"
                   width="10"
                   height="35"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,150,26.666666)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,23.333333333333332 l-10 0 z"
+                  d="M 150,26.666666666666668 l 10,0 l 0,23.333333333333332 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="150"
+                  y="26.666666666666668"
                   width="10"
                   height="23.333333333333332"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,180,38.333332)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,11.666666666666666 l-10 0 z"
+                  d="M 180,38.333333333333336 l 10,0 l 0,11.666666666666666 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="180"
+                  y="38.333333333333336"
                   width="10"
                   height="11.666666666666666"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,210,50)">
+              <g>
                 <path
                   id="g-svg-11"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,0 l-10 0 z"
+                  d="M 210,50 l 10,0 l 0,0 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="210"
+                  y="50"
                   width="10"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,240,43)">
+              <g>
                 <path
                   id="g-svg-12"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,7 l-10 0 z"
+                  d="M 240,43 l 10,0 l 0,7 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="240"
+                  y="43"
                   width="10"
                   height="7"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,270,47.666668)">
+              <g>
                 <path
                   id="g-svg-13"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,2.3333333333333335 l-10 0 z"
+                  d="M 270,47.666666666666664 l 10,0 l 0,2.3333333333333335 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="270"
+                  y="47.666666666666664"
                   width="10"
                   height="2.3333333333333335"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,10,38.333332)">
+              <g>
                 <path
                   id="g-svg-14"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,11.666666666666666 l-10 0 z"
+                  d="M 10,38.333333333333336 l 10,0 l 0,11.666666666666666 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="10"
+                  y="38.333333333333336"
                   width="10"
                   height="11.666666666666666"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,40,33.666668)">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,16.333333333333332 l-10 0 z"
+                  d="M 40,33.66666666666667 l 10,0 l 0,16.333333333333332 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="40"
+                  y="33.66666666666667"
                   width="10"
                   height="16.333333333333332"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,70,26.666666)">
+              <g>
                 <path
                   id="g-svg-16"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,23.333333333333332 l-10 0 z"
+                  d="M 70,26.666666666666668 l 10,0 l 0,23.333333333333332 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="70"
+                  y="26.666666666666668"
                   width="10"
                   height="23.333333333333332"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,100,43)">
+              <g>
                 <path
                   id="g-svg-17"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,7 l-10 0 z"
+                  d="M 100,43 l 10,0 l 0,7 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="100"
+                  y="43"
                   width="10"
                   height="7"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,130,26.666666)">
+              <g>
                 <path
                   id="g-svg-18"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,23.333333333333332 l-10 0 z"
+                  d="M 130,26.666666666666668 l 10,0 l 0,23.333333333333332 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="130"
+                  y="26.666666666666668"
                   width="10"
                   height="23.333333333333332"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,160,36)">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,14 l-10 0 z"
+                  d="M 160,36 l 10,0 l 0,14 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="160"
+                  y="36"
                   width="10"
                   height="14"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,190,26.666666)">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,23.333333333333332 l-10 0 z"
+                  d="M 190,26.666666666666668 l 10,0 l 0,23.333333333333332 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="190"
+                  y="26.666666666666668"
                   width="10"
                   height="23.333333333333332"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,220,47.666668)">
+              <g>
                 <path
                   id="g-svg-21"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,2.3333333333333335 l-10 0 z"
+                  d="M 220,47.666666666666664 l 10,0 l 0,2.3333333333333335 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="220"
+                  y="47.666666666666664"
                   width="10"
                   height="2.3333333333333335"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,250,38.333332)">
+              <g>
                 <path
                   id="g-svg-22"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,11.666666666666666 l-10 0 z"
+                  d="M 250,38.333333333333336 l 10,0 l 0,11.666666666666666 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="250"
+                  y="38.333333333333336"
                   width="10"
                   height="11.666666666666666"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,280,50)">
+              <g>
                 <path
                   id="g-svg-23"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,0 l-10 0 z"
+                  d="M 280,50 l 10,0 l 0,0 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="280"
+                  y="50"
                   width="10"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,20,47.666668)">
+              <g>
                 <path
                   id="g-svg-24"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,2.3333333333333335 l-10 0 z"
+                  d="M 20,47.666666666666664 l 10,0 l 0,2.3333333333333335 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="20"
+                  y="47.666666666666664"
                   width="10"
                   height="2.3333333333333335"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,50,43)">
+              <g>
                 <path
                   id="g-svg-25"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,7 l-10 0 z"
+                  d="M 50,43 l 10,0 l 0,7 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="50"
+                  y="43"
                   width="10"
                   height="7"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,80,40.666668)">
+              <g>
                 <path
                   id="g-svg-26"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,9.333333333333334 l-10 0 z"
+                  d="M 80,40.66666666666667 l 10,0 l 0,9.333333333333334 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="80"
+                  y="40.66666666666667"
                   width="10"
                   height="9.333333333333334"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,110,26.666666)">
+              <g>
                 <path
                   id="g-svg-27"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,23.333333333333332 l-10 0 z"
+                  d="M 110,26.666666666666668 l 10,0 l 0,23.333333333333332 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="110"
+                  y="26.666666666666668"
                   width="10"
                   height="23.333333333333332"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,140,15)">
+              <g>
                 <path
                   id="g-svg-28"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,35 l-10 0 z"
+                  d="M 140,15.000000000000002 l 10,0 l 0,35 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="140"
+                  y="15.000000000000002"
                   width="10"
                   height="35"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,170,19.666666)">
+              <g>
                 <path
                   id="g-svg-29"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,30.333333333333336 l-10 0 z"
+                  d="M 170,19.666666666666668 l 10,0 l 0,30.333333333333336 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="170"
+                  y="19.666666666666668"
                   width="10"
                   height="30.333333333333336"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,200,43)">
+              <g>
                 <path
                   id="g-svg-30"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,7 l-10 0 z"
+                  d="M 200,43 l 10,0 l 0,7 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="200"
+                  y="43"
                   width="10"
                   height="7"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,230,43)">
+              <g>
                 <path
                   id="g-svg-31"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,7 l-10 0 z"
+                  d="M 230,43 l 10,0 l 0,7 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="230"
+                  y="43"
                   width="10"
                   height="7"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,260,26.666666)">
+              <g>
                 <path
                   id="g-svg-32"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,23.333333333333332 l-10 0 z"
+                  d="M 260,26.666666666666668 l 10,0 l 0,23.333333333333332 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="260"
+                  y="26.666666666666668"
                   width="10"
                   height="23.333333333333332"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,290,22)">
+              <g>
                 <path
                   id="g-svg-33"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,28 l-10 0 z"
+                  d="M 290,22 l 10,0 l 0,28 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="290"
+                  y="22"
                   width="10"
                   height="28"
                 />
@@ -405,11 +456,13 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,10,70)">
+        <g transform="matrix(1,0,0,1,30,30)">
           <path
             id="g-svg-24"
             fill="none"
-            d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+            d="M 10,70 l 300,0 l 0,50 l-300 0 z"
+            x="10"
+            y="70"
             width="300"
             height="50"
             stroke="rgba(255,0,0,1)"
@@ -419,381 +472,438 @@
         <g
           id="g-svg-25"
           fill="none"
+          x="10"
+          y="70"
           width="300"
           height="50"
-          transform="matrix(1,0,0,1,10,70)"
+          transform="matrix(1,0,0,1,30,30)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-34" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-35"
-            fill="none"
-            class="spark sparkcolumn"
-            transform="matrix(1,0,0,1,0,0)"
-          >
+          <g id="g-svg-35" fill="none" class="spark sparkcolumn" x="10" y="70">
             <g
               id="g-svg-36"
               name="columns"
               fill="none"
-              transform="matrix(1,0,0,1,0,0)"
+              transform="matrix(1,0,0,1,10,70)"
             >
-              <g transform="matrix(1,0,0,1,0,36)">
+              <g>
                 <path
                   id="g-svg-37"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,14 l-10 0 z"
+                  d="M 0,36 l 10,0 l 0,14 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="0"
+                  y="36"
                   width="10"
                   height="14"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,30,33.200001)">
+              <g>
                 <path
                   id="g-svg-38"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,2.8000000000000003 l-10 0 z"
+                  d="M 30,33.2 l 10,0 l 0,2.8000000000000003 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="30"
+                  y="33.2"
                   width="10"
                   height="2.8000000000000003"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,60,31.799999)">
+              <g>
                 <path
                   id="g-svg-39"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,4.2 l-10 0 z"
+                  d="M 60,31.8 l 10,0 l 0,4.2 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="60"
+                  y="31.8"
                   width="10"
                   height="4.2"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,90,30.400000)">
+              <g>
                 <path
                   id="g-svg-40"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,5.6000000000000005 l-10 0 z"
+                  d="M 90,30.4 l 10,0 l 0,5.6000000000000005 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="90"
+                  y="30.4"
                   width="10"
                   height="5.6000000000000005"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,120,15)">
+              <g>
                 <path
                   id="g-svg-41"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,21 l-10 0 z"
+                  d="M 120,15.000000000000002 l 10,0 l 0,21 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="120"
+                  y="15.000000000000002"
                   width="10"
                   height="21"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,150,22)">
+              <g>
                 <path
                   id="g-svg-42"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,14 l-10 0 z"
+                  d="M 150,22 l 10,0 l 0,14 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="150"
+                  y="22"
                   width="10"
                   height="14"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,180,29)">
+              <g>
                 <path
                   id="g-svg-43"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,7 l-10 0 z"
+                  d="M 180,29 l 10,0 l 0,7 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="180"
+                  y="29"
                   width="10"
                   height="7"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,210,36)">
+              <g>
                 <path
                   id="g-svg-44"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,0 l-10 0 z"
+                  d="M 210,36 l 10,0 l 0,0 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="210"
+                  y="36"
                   width="10"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,240,31.799999)">
+              <g>
                 <path
                   id="g-svg-45"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,4.2 l-10 0 z"
+                  d="M 240,31.8 l 10,0 l 0,4.2 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="240"
+                  y="31.8"
                   width="10"
                   height="4.2"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,270,34.599998)">
+              <g>
                 <path
                   id="g-svg-46"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,0 l 10,0 l 0,1.4000000000000001 l-10 0 z"
+                  d="M 270,34.6 l 10,0 l 0,1.4000000000000001 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="270"
+                  y="34.6"
                   width="10"
                   height="1.4000000000000001"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,10,29)">
+              <g>
                 <path
                   id="g-svg-47"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,7 l-10 0 z"
+                  d="M 10,29 l 10,0 l 0,7 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="10"
+                  y="29"
                   width="10"
                   height="7"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,40,26.200001)">
+              <g>
                 <path
                   id="g-svg-48"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,9.8 l-10 0 z"
+                  d="M 40,26.2 l 10,0 l 0,9.8 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="40"
+                  y="26.2"
                   width="10"
                   height="9.8"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,70,22)">
+              <g>
                 <path
                   id="g-svg-49"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,14 l-10 0 z"
+                  d="M 70,22 l 10,0 l 0,14 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="70"
+                  y="22"
                   width="10"
                   height="14"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,100,31.799999)">
+              <g>
                 <path
                   id="g-svg-50"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,4.2 l-10 0 z"
+                  d="M 100,31.8 l 10,0 l 0,4.2 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="100"
+                  y="31.8"
                   width="10"
                   height="4.2"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,130,22)">
+              <g>
                 <path
                   id="g-svg-51"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,14 l-10 0 z"
+                  d="M 130,22 l 10,0 l 0,14 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="130"
+                  y="22"
                   width="10"
                   height="14"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,160,27.600000)">
+              <g>
                 <path
                   id="g-svg-52"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,8.4 l-10 0 z"
+                  d="M 160,27.6 l 10,0 l 0,8.4 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="160"
+                  y="27.6"
                   width="10"
                   height="8.4"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,190,22)">
+              <g>
                 <path
                   id="g-svg-53"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,14 l-10 0 z"
+                  d="M 190,22 l 10,0 l 0,14 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="190"
+                  y="22"
                   width="10"
                   height="14"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,220,34.599998)">
+              <g>
                 <path
                   id="g-svg-54"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,1.4000000000000001 l-10 0 z"
+                  d="M 220,34.6 l 10,0 l 0,1.4000000000000001 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="220"
+                  y="34.6"
                   width="10"
                   height="1.4000000000000001"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,250,29)">
+              <g>
                 <path
                   id="g-svg-55"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,7 l-10 0 z"
+                  d="M 250,29 l 10,0 l 0,7 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="250"
+                  y="29"
                   width="10"
                   height="7"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,280,36)">
+              <g>
                 <path
                   id="g-svg-56"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,0 l 10,0 l 0,0 l-10 0 z"
+                  d="M 280,36 l 10,0 l 0,0 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="280"
+                  y="36"
                   width="10"
                   height="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,20,34.599998)">
+              <g>
                 <path
                   id="g-svg-57"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,1.4000000000000001 l-10 0 z"
+                  d="M 20,34.6 l 10,0 l 0,1.4000000000000001 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="20"
+                  y="34.6"
                   width="10"
                   height="1.4000000000000001"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,50,31.799999)">
+              <g>
                 <path
                   id="g-svg-58"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,4.2 l-10 0 z"
+                  d="M 50,31.8 l 10,0 l 0,4.2 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="50"
+                  y="31.8"
                   width="10"
                   height="4.2"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,80,30.400000)">
+              <g>
                 <path
                   id="g-svg-59"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,5.6000000000000005 l-10 0 z"
+                  d="M 80,30.4 l 10,0 l 0,5.6000000000000005 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="80"
+                  y="30.4"
                   width="10"
                   height="5.6000000000000005"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,110,22)">
+              <g>
                 <path
                   id="g-svg-60"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,14 l-10 0 z"
+                  d="M 110,22 l 10,0 l 0,14 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="110"
+                  y="22"
                   width="10"
                   height="14"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,140,15)">
+              <g>
                 <path
                   id="g-svg-61"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,21 l-10 0 z"
+                  d="M 140,15.000000000000002 l 10,0 l 0,21 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="140"
+                  y="15.000000000000002"
                   width="10"
                   height="21"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,170,17.799999)">
+              <g>
                 <path
                   id="g-svg-62"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,18.2 l-10 0 z"
+                  d="M 170,17.8 l 10,0 l 0,18.2 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="170"
+                  y="17.8"
                   width="10"
                   height="18.2"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,200,31.799999)">
+              <g>
                 <path
                   id="g-svg-63"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,4.2 l-10 0 z"
+                  d="M 200,31.8 l 10,0 l 0,4.2 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="200"
+                  y="31.8"
                   width="10"
                   height="4.2"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,230,31.799999)">
+              <g>
                 <path
                   id="g-svg-64"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,4.2 l-10 0 z"
+                  d="M 230,31.8 l 10,0 l 0,4.2 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="230"
+                  y="31.8"
                   width="10"
                   height="4.2"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,260,22)">
+              <g>
                 <path
                   id="g-svg-65"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,14 l-10 0 z"
+                  d="M 260,22 l 10,0 l 0,14 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="260"
+                  y="22"
                   width="10"
                   height="14"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,290,19.200001)">
+              <g>
                 <path
                   id="g-svg-66"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,0 l 10,0 l 0,16.8 l-10 0 z"
+                  d="M 290,19.200000000000003 l 10,0 l 0,16.8 l-10 0 z"
                   class="column"
                   stroke-width="1"
                   stroke="rgba(255,255,255,1)"
+                  x="290"
+                  y="19.200000000000003"
                   width="10"
                   height="16.8"
                 />
diff --git a/__tests__/integration/snapshots/SparklineScaleLine.svg b/__tests__/integration/snapshots/SparklineScaleLine.svg
index 6f52967a9..5253e0a91 100644
--- a/__tests__/integration/snapshots/SparklineScaleLine.svg
+++ b/__tests__/integration/snapshots/SparklineScaleLine.svg
@@ -6,9 +6,9 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-34" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-34" fill="none">
         <g transform="matrix(1,0,0,1,10,10)">
           <path
             id="g-svg-35"
@@ -23,82 +23,79 @@
         <g
           id="g-svg-36"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,10)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-1" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-2"
-            fill="none"
-            class="spark sparkline"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,0,36.875000)">
+          <g id="g-svg-2" fill="none" class="spark sparkline" x="0" y="0">
+            <g id="g-svg-3" fill="none">
+              <g>
                 <path
                   id="g-svg-5"
                   fill="none"
-                  d="M 0,4.375 C 0 4.375,19.8584505010613 11.375,33.33333333333333 11.375 C 46.52511716772796 11.375,53.33333333333332 10.850000000000001,66.66666666666666 10.5 C 80 10.149999999999999,86.93127787049039 10.5,100 9.625 C 113.59794453715705 8.714566573372473,119.79000822109248 0,133.33333333333331 0 C 146.45667488775916 0,153.33333333333334 2.625,166.66666666666669 4.375 C 180 6.125,186.66666666666666 7,200 8.75 C 213.33333333333334 10.5,219.96367523777204 13.125,233.33333333333334 13.125 C 246.63034190443872 13.125,253.32190015800944 10.5,266.66666666666663 10.5 C 279.98856682467607 10.5,300 12.25,300 12.25"
+                  d="M 0,41.25 C 0 41.25,19.8584505010613 48.25,33.33333333333333 48.25 C 46.52511716772796 48.25,53.33333333333332 47.725,66.66666666666666 47.375 C 80 47.025,86.93127787049039 47.375,100 46.5 C 113.59794453715705 45.58956657337247,119.79000822109248 36.875,133.33333333333331 36.875 C 146.45667488775916 36.875,153.33333333333334 39.5,166.66666666666669 41.25 C 180 43,186.66666666666666 43.875,200 45.625 C 213.33333333333334 47.375,219.96367523777204 50,233.33333333333334 50 C 246.63034190443872 50,253.32190015800944 47.375,266.66666666666663 47.375 C 279.98856682467607 47.375,300 49.125,300 49.125"
                   class="line"
                   stroke="rgba(131,218,173,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,28.125000)">
+              <g>
                 <path
                   id="g-svg-6"
                   fill="none"
-                  d="M 0,8.75 C 0 8.75,19.95487049697967 14,33.33333333333333 14 C 46.62153716364634 14,53.37846283635365 10.5,66.66666666666666 10.5 C 80.04512950302032 10.5,87.2563244329716 15.75,100 15.75 C 113.92299109963825 15.75,119.50954049977062 0,133.33333333333331 0 C 146.1762071664373 0,153.15459981563424 6.9762224879238275,166.66666666666669 7.875 C 179.82126648230093 8.75,187.0865057752177 7.875,200 8.75 C 213.75317244188435 9.681895401598915,219.68847124541057 21,233.33333333333334 21 C 246.35513791207723 21,253.3333333333333 14.875,266.66666666666663 14.875 C 280 14.875,300 21,300 21"
+                  d="M 0,36.875 C 0 36.875,19.95487049697967 42.125,33.33333333333333 42.125 C 46.62153716364634 42.125,53.37846283635365 38.625,66.66666666666666 38.625 C 80.04512950302032 38.625,87.2563244329716 43.875,100 43.875 C 113.92299109963825 43.875,119.50954049977062 28.125,133.33333333333331 28.125 C 146.1762071664373 28.125,153.15459981563424 35.10122248792383,166.66666666666669 36 C 179.82126648230093 36.875,187.0865057752177 36,200 36.875 C 213.75317244188435 37.806895401598915,219.68847124541057 49.125,233.33333333333334 49.125 C 246.35513791207723 49.125,253.3333333333333 43,266.66666666666663 43 C 280 43,300 49.125,300 49.125"
                   class="line"
                   stroke="rgba(237,191,69,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,15)">
+              <g>
                 <path
                   id="g-svg-7"
                   fill="none"
-                  d="M 0,21 C 0 21,20.020383983621198 24.5,33.33333333333333 24.5 C 46.68705065028786 24.5,53.276400787425175 20.125,66.66666666666666 20.125 C 79.94306745409183 20.125,87.70058140140002 20.125,100 20.125 C 114.36724806806667 20.125,119.23179918876237 0,133.33333333333331 0 C 145.89846585542907 0,153.33333333333334 5.774999999999997,166.66666666666669 9.625000000000002 C 180 13.475,186.82199163466422 14.925966005124193,200 19.250000000000007 C 213.48865830133082 23.675966005124195,220 31.5,233.33333333333334 31.5 C 246.66666666666666 31.5,252.9680835989562 19.250000000000007,266.66666666666663 19.250000000000007 C 279.6347502656228 19.250000000000007,300 23.625,300 23.625"
+                  d="M 0,36 C 0 36,20.020383983621198 39.5,33.33333333333333 39.5 C 46.68705065028786 39.5,53.276400787425175 35.125,66.66666666666666 35.125 C 79.94306745409183 35.125,87.70058140140002 35.125,100 35.125 C 114.36724806806667 35.125,119.23179918876237 15.000000000000002,133.33333333333331 15.000000000000002 C 145.89846585542907 15.000000000000002,153.33333333333334 20.775,166.66666666666669 24.625000000000004 C 180 28.475,186.82199163466422 29.925966005124195,200 34.25000000000001 C 213.48865830133082 38.675966005124195,220 46.5,233.33333333333334 46.5 C 246.66666666666666 46.5,252.9680835989562 34.25000000000001,266.66666666666663 34.25000000000001 C 279.6347502656228 34.25000000000001,300 38.625,300 38.625"
                   class="line"
                   stroke="rgba(210,206,249,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,15)">
+              <g>
                 <path
                   id="g-svg-8"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,21 C 0 21,20.020383983621198 24.5,33.33333333333333 24.5 C 46.68705065028786 24.5,53.276400787425175 20.125,66.66666666666666 20.125 C 79.94306745409183 20.125,87.70058140140002 20.125,100 20.125 C 114.36724806806667 20.125,119.23179918876237 0,133.33333333333331 0 C 145.89846585542907 0,153.33333333333334 5.774999999999997,166.66666666666669 9.625000000000002 C 180 13.475,186.82199163466422 14.925966005124193,200 19.250000000000007 C 213.48865830133082 23.675966005124195,220 31.5,233.33333333333334 31.5 C 246.66666666666666 31.5,252.9680835989562 19.250000000000007,266.66666666666663 19.250000000000007 C 279.6347502656228 19.250000000000007,300 23.625,300 23.625 L 300,34.125 C 300 34.125,280 28,266.66666666666663 28 C 253.3333333333333 28,246.35513791207723 34.125,233.33333333333334 34.125 C 219.68847124541057 34.125,213.75317244188435 22.806895401598915,200 21.875 C 187.0865057752177 21,179.82126648230093 21.875,166.66666666666669 21 C 153.15459981563424 20.101222487923827,146.1762071664373 13.124999999999998,133.33333333333331 13.124999999999998 C 119.50954049977062 13.124999999999998,113.92299109963825 28.875,100 28.875 C 87.2563244329716 28.875,80.04512950302032 23.625,66.66666666666666 23.625 C 53.37846283635365 23.625,46.62153716364634 27.125,33.33333333333333 27.125 C 19.95487049697967 27.125,0 21.875,0 21.875 M 0,21 Z"
+                  d="M 0,36 C 0 36,20.020383983621198 39.5,33.33333333333333 39.5 C 46.68705065028786 39.5,53.276400787425175 35.125,66.66666666666666 35.125 C 79.94306745409183 35.125,87.70058140140002 35.125,100 35.125 C 114.36724806806667 35.125,119.23179918876237 15.000000000000002,133.33333333333331 15.000000000000002 C 145.89846585542907 15.000000000000002,153.33333333333334 20.775,166.66666666666669 24.625000000000004 C 180 28.475,186.82199163466422 29.925966005124195,200 34.25000000000001 C 213.48865830133082 38.675966005124195,220 46.5,233.33333333333334 46.5 C 246.66666666666666 46.5,252.9680835989562 34.25000000000001,266.66666666666663 34.25000000000001 C 279.6347502656228 34.25000000000001,300 38.625,300 38.625 L 300,49.125 C 300 49.125,280 43,266.66666666666663 43 C 253.3333333333333 43,246.35513791207723 49.125,233.33333333333334 49.125 C 219.68847124541057 49.125,213.75317244188435 37.806895401598915,200 36.875 C 187.0865057752177 36,179.82126648230093 36.875,166.66666666666669 36 C 153.15459981563424 35.10122248792383,146.1762071664373 28.125,133.33333333333331 28.125 C 119.50954049977062 28.125,113.92299109963825 43.875,100 43.875 C 87.2563244329716 43.875,80.04512950302032 38.625,66.66666666666666 38.625 C 53.37846283635365 38.625,46.62153716364634 42.125,33.33333333333333 42.125 C 19.95487049697967 42.125,0 36.875,0 36.875 M 0,36 Z"
                   class="area"
                   opacity="0.5"
                   stroke-width="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,28.125000)">
+              <g>
                 <path
                   id="g-svg-9"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,8.75 C 0 8.75,19.95487049697967 14,33.33333333333333 14 C 46.62153716364634 14,53.37846283635365 10.5,66.66666666666666 10.5 C 80.04512950302032 10.5,87.2563244329716 15.75,100 15.75 C 113.92299109963825 15.75,119.50954049977062 0,133.33333333333331 0 C 146.1762071664373 0,153.15459981563424 6.9762224879238275,166.66666666666669 7.875 C 179.82126648230093 8.75,187.0865057752177 7.875,200 8.75 C 213.75317244188435 9.681895401598915,219.68847124541057 21,233.33333333333334 21 C 246.35513791207723 21,253.3333333333333 14.875,266.66666666666663 14.875 C 280 14.875,300 21,300 21 L 300,21 C 300 21,279.98856682467607 19.25,266.66666666666663 19.25 C 253.32190015800944 19.25,246.6303419044387 21.875,233.33333333333334 21.875 C 219.96367523777207 21.875,213.33333333333331 19.25,200 17.5 C 186.66666666666669 15.75,180 14.875,166.66666666666669 13.125 C 153.33333333333334 11.375,146.45667488775916 8.75,133.33333333333331 8.75 C 119.79000822109248 8.75,113.59794453715705 17.464566573372473,100 18.375 C 86.93127787049039 19.25,79.99999999999999 18.9,66.66666666666666 19.25 C 53.333333333333336 19.6,46.52511716772796 20.125,33.33333333333333 20.125 C 19.8584505010613 20.125,0 13.125,0 13.125 M 0,8.75 Z"
+                  d="M 0,36.875 C 0 36.875,19.95487049697967 42.125,33.33333333333333 42.125 C 46.62153716364634 42.125,53.37846283635365 38.625,66.66666666666666 38.625 C 80.04512950302032 38.625,87.2563244329716 43.875,100 43.875 C 113.92299109963825 43.875,119.50954049977062 28.125,133.33333333333331 28.125 C 146.1762071664373 28.125,153.15459981563424 35.10122248792383,166.66666666666669 36 C 179.82126648230093 36.875,187.0865057752177 36,200 36.875 C 213.75317244188435 37.806895401598915,219.68847124541057 49.125,233.33333333333334 49.125 C 246.35513791207723 49.125,253.3333333333333 43,266.66666666666663 43 C 280 43,300 49.125,300 49.125 L 300,49.125 C 300 49.125,279.98856682467607 47.375,266.66666666666663 47.375 C 253.32190015800944 47.375,246.6303419044387 50,233.33333333333334 50 C 219.96367523777207 50,213.33333333333331 47.375,200 45.625 C 186.66666666666669 43.875,180 43,166.66666666666669 41.25 C 153.33333333333334 39.5,146.45667488775916 36.875,133.33333333333331 36.875 C 119.79000822109248 36.875,113.59794453715705 45.58956657337247,100 46.5 C 86.93127787049039 47.375,79.99999999999999 47.025,66.66666666666666 47.375 C 53.333333333333336 47.725,46.52511716772796 48.25,33.33333333333333 48.25 C 19.8584505010613 48.25,0 41.25,0 41.25 M 0,36.875 Z"
                   class="area"
                   opacity="0.5"
                   stroke-width="0"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,36.875000)">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,4.375 C 0 4.375,19.8584505010613 11.375,33.33333333333333 11.375 C 46.52511716772796 11.375,53.33333333333332 10.850000000000001,66.66666666666666 10.5 C 80 10.149999999999999,86.93127787049039 10.5,100 9.625 C 113.59794453715705 8.714566573372473,119.79000822109248 0,133.33333333333331 0 C 146.45667488775916 0,153.33333333333334 2.625,166.66666666666669 4.375 C 180 6.125,186.66666666666666 7,200 8.75 C 213.33333333333334 10.5,219.96367523777204 13.125,233.33333333333334 13.125 C 246.63034190443872 13.125,253.32190015800944 10.5,266.66666666666663 10.5 C 279.98856682467607 10.5,300 12.25,300 12.25 L 300,13.125 L 0,13.125 Z"
+                  d="M 0,41.25 C 0 41.25,19.8584505010613 48.25,33.33333333333333 48.25 C 46.52511716772796 48.25,53.33333333333332 47.725,66.66666666666666 47.375 C 80 47.025,86.93127787049039 47.375,100 46.5 C 113.59794453715705 45.58956657337247,119.79000822109248 36.875,133.33333333333331 36.875 C 146.45667488775916 36.875,153.33333333333334 39.5,166.66666666666669 41.25 C 180 43,186.66666666666666 43.875,200 45.625 C 213.33333333333334 47.375,219.96367523777204 50,233.33333333333334 50 C 246.63034190443872 50,253.32190015800944 47.375,266.66666666666663 47.375 C 279.98856682467607 47.375,300 49.125,300 49.125 L 300,50 L 0,50 Z"
                   class="area"
                   opacity="0.5"
                   stroke-width="0"
                 />
               </g>
             </g>
-            <g id="g-svg-4" fill="none" transform="matrix(1,0,0,1,0,0)" />
+            <g id="g-svg-4" fill="none" />
           </g>
         </g>
         <g transform="matrix(1,0,0,1,10,70)">
@@ -115,79 +112,76 @@
         <g
           id="g-svg-38"
           fill="none"
+          x="0"
+          y="0"
           width="300"
           height="50"
           transform="matrix(1,0,0,1,10,70)"
         >
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path id="g-svg-11" fill="none" class="container" />
           </g>
-          <g
-            id="g-svg-12"
-            fill="none"
-            class="spark sparkline"
-            transform="matrix(1,0,0,1,0,0)"
-          >
-            <g id="g-svg-13" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,0,15)">
+          <g id="g-svg-12" fill="none" class="spark sparkline" x="0" y="0">
+            <g id="g-svg-13" fill="none">
+              <g>
                 <path
                   id="g-svg-15"
                   fill="none"
-                  d="M 0,6.999999999999998 L 33.33333333333333,18.200000000000003 L 66.66666666666666,16.799999999999997 L 100,15.399999999999997 L 133.33333333333331,0 L 166.66666666666669,6.999999999999998 L 200,13.999999999999998 L 233.33333333333334,21 L 266.66666666666663,16.799999999999997 L 300,19.6"
+                  d="M 0,22 L 33.33333333333333,33.2 L 66.66666666666666,31.8 L 100,30.4 L 133.33333333333331,15.000000000000002 L 166.66666666666669,22 L 200,29 L 233.33333333333334,36 L 266.66666666666663,31.8 L 300,34.6"
                   class="line"
                   stroke="rgba(131,218,173,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,22)">
+              <g>
                 <path
                   id="g-svg-16"
                   fill="none"
-                  d="M 0,7 L 33.33333333333333,4.199999999999999 L 66.66666666666666,0 L 100,9.8 L 133.33333333333331,0 L 166.66666666666669,5.600000000000001 L 200,0 L 233.33333333333334,12.600000000000001 L 266.66666666666663,7 L 300,14"
+                  d="M 0,29 L 33.33333333333333,26.2 L 66.66666666666666,22 L 100,31.8 L 133.33333333333331,22 L 166.66666666666669,27.6 L 200,22 L 233.33333333333334,34.6 L 266.66666666666663,29 L 300,36"
                   class="line"
                   stroke="rgba(237,191,69,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,15)">
+              <g>
                 <path
                   id="g-svg-17"
                   fill="none"
-                  d="M 0,35 L 33.33333333333333,16.799999999999997 L 66.66666666666666,15.399999999999997 L 100,6.999999999999998 L 133.33333333333331,0 L 166.66666666666669,2.799999999999999 L 200,16.799999999999997 L 233.33333333333334,16.799999999999997 L 266.66666666666663,6.999999999999998 L 300,4.200000000000001"
+                  d="M 0,50 L 33.33333333333333,31.8 L 66.66666666666666,30.4 L 100,22 L 133.33333333333331,15.000000000000002 L 166.66666666666669,17.8 L 200,31.8 L 233.33333333333334,31.8 L 266.66666666666663,22 L 300,19.200000000000003"
                   class="line"
                   stroke="rgba(210,206,249,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,15)">
+              <g>
                 <path
                   id="g-svg-18"
                   fill="rgba(131,218,173,1)"
-                  d="M 0,6.999999999999998 L 33.33333333333333,18.200000000000003 L 66.66666666666666,16.799999999999997 L 100,15.399999999999997 L 133.33333333333331,0 L 166.66666666666669,6.999999999999998 L 200,13.999999999999998 L 233.33333333333334,21 L 266.66666666666663,16.799999999999997 L 300,19.6 L 300,21 L 0,21 Z"
+                  d="M 0,22 L 33.33333333333333,33.2 L 66.66666666666666,31.8 L 100,30.4 L 133.33333333333331,15.000000000000002 L 166.66666666666669,22 L 200,29 L 233.33333333333334,36 L 266.66666666666663,31.8 L 300,34.6 L 300,36 L 0,36 Z"
                   class="area"
                   opacity="0.5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,22)">
+              <g>
                 <path
                   id="g-svg-19"
                   fill="rgba(237,191,69,1)"
-                  d="M 0,7 L 33.33333333333333,4.199999999999999 L 66.66666666666666,0 L 100,9.8 L 133.33333333333331,0 L 166.66666666666669,5.600000000000001 L 200,0 L 233.33333333333334,12.600000000000001 L 266.66666666666663,7 L 300,14 L 300,14 L 0,14 Z"
+                  d="M 0,29 L 33.33333333333333,26.2 L 66.66666666666666,22 L 100,31.8 L 133.33333333333331,22 L 166.66666666666669,27.6 L 200,22 L 233.33333333333334,34.6 L 266.66666666666663,29 L 300,36 L 300,36 L 0,36 Z"
                   class="area"
                   opacity="0.5"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,15)">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="rgba(210,206,249,1)"
-                  d="M 0,35 L 33.33333333333333,16.799999999999997 L 66.66666666666666,15.399999999999997 L 100,6.999999999999998 L 133.33333333333331,0 L 166.66666666666669,2.799999999999999 L 200,16.799999999999997 L 233.33333333333334,16.799999999999997 L 266.66666666666663,6.999999999999998 L 300,4.200000000000001 L 300,21 L 0,21 Z"
+                  d="M 0,50 L 33.33333333333333,31.8 L 66.66666666666666,30.4 L 100,22 L 133.33333333333331,15.000000000000002 L 166.66666666666669,17.8 L 200,31.8 L 233.33333333333334,31.8 L 266.66666666666663,22 L 300,19.200000000000003 L 300,36 L 0,36 Z"
                   class="area"
                   opacity="0.5"
                 />
               </g>
             </g>
-            <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,0,0)" />
+            <g id="g-svg-14" fill="none" />
           </g>
         </g>
       </g>
diff --git a/__tests__/integration/snapshots/Switch1.svg b/__tests__/integration/snapshots/Switch1.svg
index 96f865e5f..8ad17f4e0 100644
--- a/__tests__/integration/snapshots/Switch1.svg
+++ b/__tests__/integration/snapshots/Switch1.svg
@@ -6,126 +6,141 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-9" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,0,0)">
-          <g
-            id="g-svg-1"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="switch-content"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-9" fill="none">
+        <g id="g-svg-10" fill="none" x="0" y="0">
+          <g id="g-svg-1" fill="none" class="switch-content">
+            <g>
               <path
                 id="g-svg-3"
                 fill="none"
                 class="switch-background-stroke"
+                d="M 11,0 l 22,0 a 11,11,0,0,1,11,11 l 0,0 a 11,11,0,0,1,-11,11 l -22,0 a 11,11,0,0,1,-11,-11 l 0,0 a 11,11,0,0,1,11,-11 z"
+                x="0"
+                y="0"
                 stroke="rgba(0,0,0,0.25098039215686274)"
                 stroke-width="0"
-                d="M 11,0 l 22,0 a 11,11,0,0,1,11,11 l 0,0 a 11,11,0,0,1,-11,11 l -22,0 a 11,11,0,0,1,-11,-11 l 0,0 a 11,11,0,0,1,11,-11 z"
                 width="44"
                 height="22"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-2"
                 fill="rgba(0,0,0,0.25098039215686274)"
                 class="switch-background"
                 d="M 11,0 l 22,0 a 11,11,0,0,1,11,11 l 0,0 a 11,11,0,0,1,-11,11 l -22,0 a 11,11,0,0,1,-11,-11 l 0,0 a 11,11,0,0,1,11,-11 z"
+                x="0"
+                y="0"
                 width="44"
                 height="22"
               />
             </g>
-            <g transform="matrix(1,0,0,1,2,2)">
+            <g>
               <path
                 id="g-svg-4"
                 fill="rgba(255,255,255,1)"
                 class="switch-handle"
-                d="M 9,0 l 0,0 a 9,9,0,0,1,9,9 l 0,0 a 9,9,0,0,1,-9,9 l 0,0 a 9,9,0,0,1,-9,-9 l 0,0 a 9,9,0,0,1,9,-9 z"
+                d="M 11,2 l 0,0 a 9,9,0,0,1,9,9 l 0,0 a 9,9,0,0,1,-9,9 l 0,0 a 9,9,0,0,1,-9,-9 l 0,0 a 9,9,0,0,1,9,-9 z"
+                x="2"
+                y="2"
                 width="18"
                 height="18"
               />
             </g>
           </g>
         </g>
-        <g id="g-svg-11" fill="none" transform="matrix(1,0,0,1,0,40)">
-          <g
-            id="g-svg-5"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="switch-content"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-11"
+          fill="none"
+          x="0"
+          y="0"
+          transform="matrix(1,0,0,1,0,40)"
+        >
+          <g id="g-svg-5" fill="none" class="switch-content">
+            <g>
               <path
                 id="g-svg-7"
                 fill="none"
                 class="switch-background-stroke"
+                d="M 11,0 l 22,0 a 11,11,0,0,1,11,11 l 0,0 a 11,11,0,0,1,-11,11 l -22,0 a 11,11,0,0,1,-11,-11 l 0,0 a 11,11,0,0,1,11,-11 z"
+                x="0"
+                y="0"
                 stroke="rgba(24,144,255,1)"
                 stroke-width="0"
-                d="M 11,0 l 22,0 a 11,11,0,0,1,11,11 l 0,0 a 11,11,0,0,1,-11,11 l -22,0 a 11,11,0,0,1,-11,-11 l 0,0 a 11,11,0,0,1,11,-11 z"
                 width="44"
                 height="22"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-6"
                 fill="rgba(24,144,255,1)"
                 class="switch-background"
                 d="M 11,0 l 22,0 a 11,11,0,0,1,11,11 l 0,0 a 11,11,0,0,1,-11,11 l -22,0 a 11,11,0,0,1,-11,-11 l 0,0 a 11,11,0,0,1,11,-11 z"
+                x="0"
+                y="0"
                 width="44"
                 height="22"
               />
             </g>
-            <g transform="matrix(1,0,0,1,24,2)">
+            <g>
               <path
                 id="g-svg-8"
                 fill="rgba(255,255,255,1)"
                 class="switch-handle"
-                d="M 9,0 l 0,0 a 9,9,0,0,1,9,9 l 0,0 a 9,9,0,0,1,-9,9 l 0,0 a 9,9,0,0,1,-9,-9 l 0,0 a 9,9,0,0,1,9,-9 z"
+                d="M 33,2 l 0,0 a 9,9,0,0,1,9,9 l 0,0 a 9,9,0,0,1,-9,9 l 0,0 a 9,9,0,0,1,-9,-9 l 0,0 a 9,9,0,0,1,9,-9 z"
+                x="24"
+                y="2"
                 width="18"
                 height="18"
               />
             </g>
           </g>
         </g>
-        <g id="g-svg-12" fill="none" transform="matrix(1,0,0,1,0,80)">
-          <g
-            id="g-svg-9"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="switch-content"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+        <g
+          id="g-svg-12"
+          fill="none"
+          x="0"
+          y="0"
+          transform="matrix(1,0,0,1,0,80)"
+        >
+          <g id="g-svg-9" fill="none" class="switch-content">
+            <g>
               <path
                 id="g-svg-11"
                 fill="none"
                 class="switch-background-stroke"
+                d="M 11,0 l 22,0 a 11,11,0,0,1,11,11 l 0,0 a 11,11,0,0,1,-11,11 l -22,0 a 11,11,0,0,1,-11,-11 l 0,0 a 11,11,0,0,1,11,-11 z"
+                x="0"
+                y="0"
                 stroke="rgba(0,0,0,0.25098039215686274)"
                 stroke-width="0"
-                d="M 11,0 l 22,0 a 11,11,0,0,1,11,11 l 0,0 a 11,11,0,0,1,-11,11 l -22,0 a 11,11,0,0,1,-11,-11 l 0,0 a 11,11,0,0,1,11,-11 z"
                 width="44"
                 height="22"
               />
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-10"
                 fill="rgba(0,0,0,0.25098039215686274)"
                 class="switch-background"
                 d="M 11,0 l 22,0 a 11,11,0,0,1,11,11 l 0,0 a 11,11,0,0,1,-11,11 l -22,0 a 11,11,0,0,1,-11,-11 l 0,0 a 11,11,0,0,1,11,-11 z"
+                x="0"
+                y="0"
                 width="44"
                 height="22"
               />
             </g>
-            <g transform="matrix(1,0,0,1,2,2)">
+            <g>
               <path
                 id="g-svg-12"
                 fill="rgba(255,255,255,1)"
                 class="switch-handle"
-                d="M 9,0 l 0,0 a 9,9,0,0,1,9,9 l 0,0 a 9,9,0,0,1,-9,9 l 0,0 a 9,9,0,0,1,-9,-9 l 0,0 a 9,9,0,0,1,9,-9 z"
+                d="M 11,2 l 0,0 a 9,9,0,0,1,9,9 l 0,0 a 9,9,0,0,1,-9,9 l 0,0 a 9,9,0,0,1,-9,-9 l 0,0 a 9,9,0,0,1,9,-9 z"
+                x="2"
+                y="2"
                 width="18"
                 height="18"
               />
diff --git a/__tests__/integration/snapshots/Tag1.svg b/__tests__/integration/snapshots/Tag1.svg
index 16de2fac2..d9056b540 100644
--- a/__tests__/integration/snapshots/Tag1.svg
+++ b/__tests__/integration/snapshots/Tag1.svg
@@ -6,16 +6,18 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-15" fill="none">
         <g id="g-svg-16" fill="none" transform="matrix(1,0,0,1,100,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-6"
               fill="rgba(250,250,250,1)"
               class="tag-background"
               d="M 2,0 l 21.560000000000002,0 a 2,2,0,0,1,2,2 l 0,27 a 2,2,0,0,1,-2,2 l -21.560000000000002,0 a 2,2,0,0,1,-2,-2 l 0,-27 a 2,2,0,0,1,2,-2 z"
+              y="0"
+              x="0"
               width="25.560000000000002"
               height="31"
               stroke="rgba(217,217,217,1)"
@@ -28,13 +30,8 @@
             transform="matrix(1,0,0,1,4,15.500000)"
             class="tag-content"
           >
-            <g
-              id="g-svg-2"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="tag-marker"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-2" fill="none" class="tag-marker">
+              <g>
                 <path
                   id="g-svg-4"
                   fill="none"
@@ -43,7 +40,7 @@
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-5"
                 fill="rgba(0,0,0,1)"
@@ -65,12 +62,14 @@
           </g>
         </g>
         <g id="g-svg-17" fill="none" transform="matrix(1,0,0,1,200,100)">
-          <g transform="matrix(1,0,0,1,-4,0)">
+          <g>
             <path
               id="g-svg-12"
               fill="rgba(219,241,183,1)"
               class="tag-background"
-              d="M 2,0 l 33.920000000000016,0 a 2,2,0,0,1,2,2 l 0,27 a 2,2,0,0,1,-2,2 l -33.920000000000016,0 a 2,2,0,0,1,-2,-2 l 0,-27 a 2,2,0,0,1,2,-2 z"
+              d="M -2,0 l 33.920000000000016,0 a 2,2,0,0,1,2,2 l 0,27 a 2,2,0,0,1,-2,2 l -33.920000000000016,0 a 2,2,0,0,1,-2,-2 l 0,-27 a 2,2,0,0,1,2,-2 z"
+              y="0"
+              x="-4"
               width="37.920000000000016"
               height="31"
               stroke="rgba(217,217,217,1)"
@@ -83,23 +82,18 @@
             transform="matrix(1,0,0,1,4,15.500000)"
             class="tag-content"
           >
-            <g
-              id="g-svg-8"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="tag-marker"
-            >
-              <g transform="matrix(1,0,0,1,-4,-4)">
+            <g id="g-svg-8" fill="none" class="tag-marker">
+              <g>
                 <path
                   id="g-svg-10"
                   fill="none"
                   class="tag-marker"
-                  d="M 0,4 L 4,0 L 8,4 L 4,8 Z"
+                  d="M -4,0 L 0,-4 L 4,0 L 0,4 Z"
                   stroke="rgba(91,143,249,1)"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,8,0)">
+            <g>
               <text
                 id="g-svg-11"
                 fill="rgba(255,0,0,1)"
@@ -113,7 +107,9 @@
                 stroke-width="1"
                 text-anchor="left"
                 class="tag-text"
+                x="8"
                 dx="0.5"
+                y="0"
               >
                 G6
               </text>
@@ -121,12 +117,14 @@
           </g>
         </g>
         <g id="g-svg-18" fill="none" transform="matrix(1,0,0,1,300,100)">
-          <g transform="matrix(1,0,0,1,0,0)">
+          <g>
             <path
               id="g-svg-18"
               fill="rgba(250,250,250,1)"
               class="tag-background"
               d="M 6,0 l 50.91999999999996,0 a 6,6,0,0,1,6,6 l 0,23 a 6,6,0,0,1,-6,6 l -50.91999999999996,0 a 6,6,0,0,1,-6,-6 l 0,-23 a 6,6,0,0,1,6,-6 z"
+              y="0"
+              x="0"
               width="62.91999999999996"
               height="35"
               stroke="rgba(217,217,217,1)"
@@ -139,13 +137,8 @@
             transform="matrix(1,0,0,1,24,17.500000)"
             class="tag-content"
           >
-            <g
-              id="g-svg-14"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="tag-marker"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-14" fill="none" class="tag-marker">
+              <g>
                 <path
                   id="g-svg-16"
                   fill="none"
@@ -154,7 +147,7 @@
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <text
                 id="g-svg-17"
                 fill="rgba(0,0,0,1)"
diff --git a/__tests__/integration/snapshots/Text1.svg b/__tests__/integration/snapshots/Text1.svg
index 69bd06ed3..63e0a9d2a 100644
--- a/__tests__/integration/snapshots/Text1.svg
+++ b/__tests__/integration/snapshots/Text1.svg
@@ -7,14 +7,16 @@
 >
   <defs />
   <g id="g-svg-camera" transform="matrix(1,0,0,1,0.000002,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-24" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,100,100)">
+    <g id="g-root" fill="none">
+      <g id="g-svg-24" fill="none">
+        <g>
           <text
             id="g-svg-25"
             fill="rgba(0,0,0,1)"
             dominant-baseline="central"
             paint-order="stroke"
+            x="100"
+            y="100"
             dx="0.5"
             font-family="sans-serif"
             font-size="16"
diff --git a/__tests__/integration/snapshots/TimebarBasic.svg b/__tests__/integration/snapshots/TimebarBasic.svg
index 1f38f04b2..581a9b743 100644
--- a/__tests__/integration/snapshots/TimebarBasic.svg
+++ b/__tests__/integration/snapshots/TimebarBasic.svg
@@ -19,42 +19,15 @@
       />
     </filter>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-343"
-        fill="none"
-        width="500"
-        height="150"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g
-          id="g-svg-344"
-          fill="none"
-          width="500"
-          height="150"
-          transform="matrix(1,0,0,1,10,0)"
-        >
-          <g id="g-svg-345" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid-group"
-            >
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-3"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,75)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-343" fill="none" width="500" height="150">
+        <g id="g-svg-344" fill="none" x="10" y="0" width="500" height="150">
+          <g id="g-svg-345" fill="none">
+            <g id="g-svg-1" fill="none" class="axis-grid-group">
+              <g id="g-svg-2" fill="none" class="axis-grid">
+                <g id="g-svg-3" fill="none" class="grid-line-group">
+                  <g>
                     <path
                       id="g-svg-277"
                       fill="none"
@@ -62,10 +35,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 10,75 L 10,75"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,50,75)">
+                  <g>
                     <path
                       id="g-svg-278"
                       fill="none"
@@ -73,10 +46,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 60,75 L 60,75"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,100,75)">
+                  <g>
                     <path
                       id="g-svg-279"
                       fill="none"
@@ -84,10 +57,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 110,75 L 110,75"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,75)">
+                  <g>
                     <path
                       id="g-svg-280"
                       fill="none"
@@ -95,10 +68,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 160,75 L 160,75"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,200,75)">
+                  <g>
                     <path
                       id="g-svg-281"
                       fill="none"
@@ -106,10 +79,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 210,75 L 210,75"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,250,75)">
+                  <g>
                     <path
                       id="g-svg-282"
                       fill="none"
@@ -117,10 +90,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 260,75 L 260,75"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,300,75)">
+                  <g>
                     <path
                       id="g-svg-283"
                       fill="none"
@@ -128,10 +101,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 310,75 L 310,75"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,350,75)">
+                  <g>
                     <path
                       id="g-svg-284"
                       fill="none"
@@ -139,10 +112,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 360,75 L 360,75"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,400,75)">
+                  <g>
                     <path
                       id="g-svg-285"
                       fill="none"
@@ -150,10 +123,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 410,75 L 410,75"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,450,75)">
+                  <g>
                     <path
                       id="g-svg-286"
                       fill="none"
@@ -161,10 +134,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 460,75 L 460,75"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,500,75)">
+                  <g>
                     <path
                       id="g-svg-287"
                       fill="none"
@@ -172,57 +145,37 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 510,75 L 510,75"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-4"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
+                <g id="g-svg-4" fill="none" class="grid-region-group" />
               </g>
             </g>
-            <g
-              id="g-svg-5"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,75)">
+            <g id="g-svg-5" fill="none" class="axis-main-group">
+              <g id="g-svg-6" fill="none" class="axis-line-group">
+                <g>
                   <line
                     id="g-svg-7"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="500"
-                    y2="0"
+                    x1="10"
+                    y1="75"
+                    x2="510"
+                    y2="75"
                     class="axis-line axis-line"
                     stroke-width="1"
                     stroke="rgba(202,205,209,1)"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-8"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
+              <g id="g-svg-8" fill="none" class="axis-tick-group">
                 <g
                   id="g-svg-288"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,75)"
+                  transform="matrix(1,0,0,1,10,75)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-299"
                       fill="none"
@@ -239,10 +192,10 @@
                 <g
                   id="g-svg-289"
                   fill="none"
-                  transform="matrix(1,0,0,1,50,75)"
+                  transform="matrix(1,0,0,1,60,75)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-300"
                       fill="none"
@@ -259,10 +212,10 @@
                 <g
                   id="g-svg-290"
                   fill="none"
-                  transform="matrix(1,0,0,1,100,75)"
+                  transform="matrix(1,0,0,1,110,75)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-301"
                       fill="none"
@@ -279,10 +232,10 @@
                 <g
                   id="g-svg-291"
                   fill="none"
-                  transform="matrix(1,0,0,1,150,75)"
+                  transform="matrix(1,0,0,1,160,75)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-302"
                       fill="none"
@@ -299,10 +252,10 @@
                 <g
                   id="g-svg-292"
                   fill="none"
-                  transform="matrix(1,0,0,1,200,75)"
+                  transform="matrix(1,0,0,1,210,75)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-303"
                       fill="none"
@@ -319,10 +272,10 @@
                 <g
                   id="g-svg-293"
                   fill="none"
-                  transform="matrix(1,0,0,1,250,75)"
+                  transform="matrix(1,0,0,1,260,75)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-304"
                       fill="none"
@@ -339,10 +292,10 @@
                 <g
                   id="g-svg-294"
                   fill="none"
-                  transform="matrix(1,0,0,1,300,75)"
+                  transform="matrix(1,0,0,1,310,75)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-305"
                       fill="none"
@@ -359,10 +312,10 @@
                 <g
                   id="g-svg-295"
                   fill="none"
-                  transform="matrix(1,0,0,1,350,75)"
+                  transform="matrix(1,0,0,1,360,75)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-306"
                       fill="none"
@@ -379,10 +332,10 @@
                 <g
                   id="g-svg-296"
                   fill="none"
-                  transform="matrix(1,0,0,1,400,75)"
+                  transform="matrix(1,0,0,1,410,75)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-307"
                       fill="none"
@@ -399,10 +352,10 @@
                 <g
                   id="g-svg-297"
                   fill="none"
-                  transform="matrix(1,0,0,1,450,75)"
+                  transform="matrix(1,0,0,1,460,75)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-308"
                       fill="none"
@@ -419,10 +372,10 @@
                 <g
                   id="g-svg-298"
                   fill="none"
-                  transform="matrix(1,0,0,1,500,75)"
+                  transform="matrix(1,0,0,1,510,75)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-309"
                       fill="none"
@@ -437,19 +390,14 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-9"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
+              <g id="g-svg-9" fill="none" class="axis-label-group">
                 <g
                   id="g-svg-310"
                   fill="none"
-                  transform="matrix(1,0,0,1,5,78)"
+                  transform="matrix(1,0,0,1,10,90)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-320"
                       fill="rgba(110,110,110,1)"
@@ -476,10 +424,10 @@
                 <g
                   id="g-svg-311"
                   fill="none"
-                  transform="matrix(1,0,0,1,55,78)"
+                  transform="matrix(1,0,0,1,60,90)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-321"
                       fill="rgba(110,110,110,1)"
@@ -503,10 +451,10 @@
                 <g
                   id="g-svg-312"
                   fill="none"
-                  transform="matrix(1,0,0,1,105,78)"
+                  transform="matrix(1,0,0,1,110,90)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-322"
                       fill="rgba(110,110,110,1)"
@@ -530,10 +478,10 @@
                 <g
                   id="g-svg-313"
                   fill="none"
-                  transform="matrix(1,0,0,1,155,78)"
+                  transform="matrix(1,0,0,1,160,90)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-323"
                       fill="rgba(110,110,110,1)"
@@ -557,10 +505,10 @@
                 <g
                   id="g-svg-314"
                   fill="none"
-                  transform="matrix(1,0,0,1,205,78)"
+                  transform="matrix(1,0,0,1,210,90)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-324"
                       fill="rgba(110,110,110,1)"
@@ -584,10 +532,10 @@
                 <g
                   id="g-svg-315"
                   fill="none"
-                  transform="matrix(1,0,0,1,255,78)"
+                  transform="matrix(1,0,0,1,260,90)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-325"
                       fill="rgba(110,110,110,1)"
@@ -611,10 +559,10 @@
                 <g
                   id="g-svg-316"
                   fill="none"
-                  transform="matrix(1,0,0,1,305,78)"
+                  transform="matrix(1,0,0,1,310,90)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-326"
                       fill="rgba(110,110,110,1)"
@@ -638,10 +586,10 @@
                 <g
                   id="g-svg-317"
                   fill="none"
-                  transform="matrix(1,0,0,1,355,78)"
+                  transform="matrix(1,0,0,1,360,90)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-327"
                       fill="rgba(110,110,110,1)"
@@ -665,10 +613,10 @@
                 <g
                   id="g-svg-318"
                   fill="none"
-                  transform="matrix(1,0,0,1,405,78)"
+                  transform="matrix(1,0,0,1,410,90)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-328"
                       fill="rgba(110,110,110,1)"
@@ -692,10 +640,10 @@
                 <g
                   id="g-svg-319"
                   fill="none"
-                  transform="matrix(1,0,0,1,455,78)"
+                  transform="matrix(1,0,0,1,460,90)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-329"
                       fill="rgba(110,110,110,1)"
@@ -721,248 +669,228 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-10"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-title-group"
-            />
+            <g id="g-svg-10" fill="none" class="axis-title-group" />
           </g>
-          <g
-            id="g-svg-347"
-            fill="none"
-            width="500"
-            height="40"
-            transform="matrix(1,0,0,1,0,110)"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-347" fill="none" x="10" y="110" width="500" height="40">
+            <g>
               <path
                 id="g-svg-348"
                 fill="rgba(251,253,255,1)"
-                d="M 0,0 l 500,0 l 0,40 l-500 0 z"
+                d="M 10,110 l 500,0 l 0,40 l-500 0 z"
+                x="10"
+                y="110"
                 width="500"
                 height="40"
                 stroke="rgba(235,237,240,1)"
               />
             </g>
-            <g id="g-svg-349" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g id="g-svg-160" fill="none" transform="matrix(1,0,0,1,150,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+            <g id="g-svg-349" fill="none">
+              <g id="g-svg-160" fill="none" x="160" y="130">
+                <g>
                   <path
                     id="g-svg-161"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 154,120 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="150"
+                    y="120"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-162" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-4.698970,-4.698970)">
+                <g id="g-svg-162" fill="none">
+                  <g>
                     <path
                       id="g-svg-163"
                       fill="none"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3010299956639813"
-                      d="M 1.3762964496778385,8.021643558994198 A 4.698970004336019 4.698970004336019 0 1 1 8.0216435589942 8.021643558994198"
+                      d="M 156.67732644534183,133.32267355465817 A 4.698970004336019 4.698970004336019 0 1 1 163.32267355465817 133.32267355465817"
                     />
-                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.376296,8.021644)">
+                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,156.677322,133.322678)">
                       <path
                         id="g-svg-165"
                         fill="rgba(86,87,88,1)"
-                        d="M 3.6020599913279625,3.6020599913279625 L 0,1.8010299956639813 L 3.6020599913279625,0 Z"
-                        transform="translate(-1.8010299956639813,-1.8010299956639813)"
+                        d="M 1.8010299956639813,1.8010299956639813 L -1.8010299956639813,0 L 1.8010299956639813,-1.8010299956639813 Z"
                       />
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-194" fill="none" transform="matrix(1,0,0,1,200,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-194" fill="none" x="210" y="130">
+                <g>
                   <path id="g-svg-195" fill="none" />
                 </g>
-                <g id="g-svg-196" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-196" fill="none">
+                  <g>
                     <line
                       id="g-svg-197"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="210"
+                      y1="124"
+                      x2="210"
+                      y2="136"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-202" fill="none" transform="matrix(1,0,0,1,225,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-202" fill="none" x="235" y="130">
+                <g>
                   <path
                     id="g-svg-203"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 229,120 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="225"
+                    y="120"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-204" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-204" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-205"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 0,3.464101615137755 6,6.92820323027551 6,3.464101615137755 12,0 12,6.92820323027551 6,3.464101615137755"
+                      points="235,130 235,126.53589838486225 229,130 235,133.46410161513776 235,130 241,126.53589838486225 241,133.46410161513776 235,130"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-210" fill="none" transform="matrix(1,0,0,1,250,20)">
-                <g id="g-svg-211" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-212"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-210" fill="none" x="260" y="130">
+                <g id="g-svg-211" fill="none">
+                  <g id="g-svg-212" fill="none" x="260" y="130" class="icon">
+                    <g>
                       <path
                         id="g-svg-213"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 254,120 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="250"
+                        y="120"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-214"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-2.771281,-4.800000)">
+                    <g id="g-svg-214" fill="none">
+                      <g>
                         <polygon
                           id="g-svg-215"
                           fill="rgba(86,87,88,1)"
-                          points="8.313843876330612,4.800000000000001 0,0 0,9.600000000000001 8.313843876330612,4.800000000000001"
+                          points="265.54256258422043,130 257.2287187078898,125.2 257.2287187078898,134.8 265.54256258422043,130"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-220" fill="none" transform="matrix(1,0,0,1,275,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-220" fill="none" x="285" y="130">
+                <g>
                   <path
                     id="g-svg-221"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 279,120 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="275"
+                    y="120"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-222" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-222" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-223"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 12,3.464101615137755 6,6.92820323027551 6,3.464101615137755 0,0 0,6.92820323027551 6,3.464101615137755"
+                      points="285,130 285,126.53589838486225 291,130 285,133.46410161513776 285,130 279,126.53589838486225 279,133.46410161513776 285,130"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-228" fill="none" transform="matrix(1,0,0,1,300,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-228" fill="none" x="310" y="130">
+                <g>
                   <path id="g-svg-229" fill="none" />
                 </g>
-                <g id="g-svg-230" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-230" fill="none">
+                  <g>
                     <line
                       id="g-svg-231"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="310"
+                      y1="124"
+                      x2="310"
+                      y2="136"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-236" fill="none" transform="matrix(1,0,0,1,325,20)">
-                <g id="g-svg-237" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-238"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-236" fill="none" x="335" y="130">
+                <g id="g-svg-237" fill="none">
+                  <g id="g-svg-238" fill="none" x="335" y="130" class="icon">
+                    <g>
                       <path
                         id="g-svg-239"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 329,120 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="325"
+                        y="120"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-240"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,-6)">
+                    <g id="g-svg-240" fill="none">
+                      <g>
                         <line
                           id="g-svg-241"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="335"
+                          y1="124"
+                          x2="335"
+                          y2="136"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,-8.602060,0)">
+                      <g>
                         <line
                           id="g-svg-242"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="6"
-                          y2="0"
+                          x1="326.39794000867204"
+                          y1="130"
+                          x2="332.39794000867204"
+                          y2="130"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(-1,0,-0,-1,6,0)">
+                        <g transform="matrix(-1,0,-0,-1,332.397949,130)">
                           <path
                             id="g-svg-253"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
-                      <g transform="matrix(1,0,0,1,2.602060,0)">
+                      <g>
                         <line
                           id="g-svg-245"
                           fill="none"
-                          x1="6"
-                          y1="0"
-                          x2="0"
-                          y2="0"
+                          x1="343.60205999132796"
+                          y1="130"
+                          x2="337.60205999132796"
+                          y2="130"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(1,0,0,1,0,0)">
+                        <g transform="matrix(1,0,0,1,337.602051,130)">
                           <path
                             id="g-svg-255"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
@@ -970,103 +898,92 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-256" fill="none" transform="matrix(1,0,0,1,350,20)">
-                <g id="g-svg-257" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-258"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-256" fill="none" x="360" y="130">
+                <g id="g-svg-257" fill="none">
+                  <g id="g-svg-258" fill="none" x="360" y="130" class="icon">
+                    <g>
                       <path
                         id="g-svg-259"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 354,120 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="350"
+                        y="120"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-260"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g id="g-svg-260" fill="none">
+                      <g>
                         <polyline
                           id="g-svg-261"
                           fill="none"
-                          points="0,0 0,12 12,12"
+                          points="354,124 354,136 366,136"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g
-                        id="g-svg-262"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,-3.397940,2.349485)">
+                      <g id="g-svg-262" fill="none">
+                        <g>
                           <line
                             id="g-svg-272"
                             fill="none"
-                            x1="0"
-                            y1="2.3494850021680094"
-                            x2="0"
-                            y2="0"
+                            x1="356.60205999132796"
+                            y1="134.69897000433602"
+                            x2="356.60205999132796"
+                            y2="132.34948500216802"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,-1.258146,-4.698970)">
+                        <g>
                           <line
                             id="g-svg-273"
                             fill="none"
-                            x1="0"
-                            y1="9.397940008672037"
-                            x2="0"
-                            y2="0"
+                            x1="358.74185399219516"
+                            y1="134.69897000433602"
+                            x2="358.74185399219516"
+                            y2="125.30102999566398"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,0.881648,0)">
+                        <g>
                           <line
                             id="g-svg-274"
                             fill="none"
-                            x1="0"
-                            y1="4.698970004336019"
-                            x2="0"
-                            y2="0"
+                            x1="360.88164799306236"
+                            y1="134.69897000433602"
+                            x2="360.88164799306236"
+                            y2="130"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,3.021442,-4.698970)">
+                        <g>
                           <line
                             id="g-svg-275"
                             fill="none"
-                            x1="0"
-                            y1="9.397940008672037"
-                            x2="0"
-                            y2="0"
+                            x1="363.02144199392956"
+                            y1="134.69897000433602"
+                            x2="363.02144199392956"
+                            y2="125.30102999566398"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,5.161236,-2.349485)">
+                        <g>
                           <line
                             id="g-svg-276"
                             fill="none"
-                            x1="0"
-                            y1="7.048455006504028"
-                            x2="0"
-                            y2="0"
+                            x1="365.16123599479675"
+                            y1="134.69897000433602"
+                            x2="365.16123599479675"
+                            y2="127.65051499783199"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
@@ -1079,87 +996,85 @@
               </g>
             </g>
           </g>
-          <g id="g-svg-346" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g
+            id="g-svg-346"
+            fill="none"
+            x="0"
+            y="0"
+            transform="matrix(1,0,0,1,10,0)"
+          >
+            <g>
               <path
                 id="g-svg-11"
                 fill="rgba(65,97,128,1)"
                 class="slider-track"
                 d="M 0,0 l 500,0 l 0,75 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="75"
                 opacity="0.05"
               />
             </g>
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-sparkline-group"
-            >
+            <g id="g-svg-12" fill="none" class="slider-sparkline-group">
               <g
                 id="g-svg-13"
                 fill="none"
+                x="0"
+                y="0"
                 width="500"
                 height="75"
-                transform="matrix(1,0,0,1,0,0)"
                 class="slider-sparkline"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path id="g-svg-14" fill="none" class="container" />
                 </g>
                 <g
                   id="g-svg-15"
                   fill="none"
                   class="spark sparkline"
-                  transform="matrix(1,0,0,1,0,0)"
+                  x="0"
+                  y="0"
                 >
-                  <g id="g-svg-16" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,0,15)">
+                  <g id="g-svg-16" fill="none">
+                    <g>
                       <path
                         id="g-svg-330"
                         fill="none"
                         class="line"
                         stroke="rgba(212,229,253,1)"
-                        d="M 0,20.000000000000004 C 0 20.000000000000004,31.772890265802527 52,55.55555555555555 52 C 76.21733471024697 52,88.88888888888889 49.599999999999994,111.1111111111111 48 C 133.33333333333331 46.400000000000006,147.10785503551938 48,166.66666666666666 44.000000000000014 C 191.55229947996375 38.91060432860516,197.9776306407205 0,222.2222222222222 0 C 242.42207508516492 0,255.55555555555554 12,277.77777777777777 20.000000000000004 C 300 28.000000000000004,311.1111111111111 32.000000000000014,333.3333333333333 40.000000000000014 C 355.55555555555554 48.000000000000014,366.2430331762201 60,388.8888888888889 60 C 410.68747762066454 60,422.0829108006077 48,444.4444444444444 48 C 466.52735524505215 48,500 56,500 56"
+                        d="M 0,35 C 0 35,31.772890265802527 67,55.55555555555555 67 C 76.21733471024697 67,88.88888888888889 64.6,111.1111111111111 63 C 133.33333333333331 61.400000000000006,147.10785503551938 63,166.66666666666666 59.00000000000001 C 191.55229947996375 53.91060432860515,197.9776306407205 14.999999999999996,222.2222222222222 14.999999999999996 C 242.42207508516492 14.999999999999996,255.55555555555554 26.999999999999996,277.77777777777777 35 C 300 43,311.1111111111111 47.00000000000001,333.3333333333333 55.00000000000001 C 355.55555555555554 63.000000000000014,366.2430331762201 75,388.8888888888889 75 C 410.68747762066454 75,422.0829108006077 63,444.4444444444444 63 C 466.52735524505215 63,500 71,500 71"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,0,15)">
+                    <g>
                       <path
                         id="g-svg-331"
                         fill="rgba(212,229,253,1)"
                         class="area"
-                        d="M 0,20.000000000000004 C 0 20.000000000000004,31.772890265802527 52,55.55555555555555 52 C 76.21733471024697 52,88.88888888888889 49.599999999999994,111.1111111111111 48 C 133.33333333333331 46.400000000000006,147.10785503551938 48,166.66666666666666 44.000000000000014 C 191.55229947996375 38.91060432860516,197.9776306407205 0,222.2222222222222 0 C 242.42207508516492 0,255.55555555555554 12,277.77777777777777 20.000000000000004 C 300 28.000000000000004,311.1111111111111 32.000000000000014,333.3333333333333 40.000000000000014 C 355.55555555555554 48.000000000000014,366.2430331762201 60,388.8888888888889 60 C 410.68747762066454 60,422.0829108006077 48,444.4444444444444 48 C 466.52735524505215 48,500 56,500 56 L 500,60 L 0,60 Z"
+                        d="M 0,35 C 0 35,31.772890265802527 67,55.55555555555555 67 C 76.21733471024697 67,88.88888888888889 64.6,111.1111111111111 63 C 133.33333333333331 61.400000000000006,147.10785503551938 63,166.66666666666666 59.00000000000001 C 191.55229947996375 53.91060432860515,197.9776306407205 14.999999999999996,222.2222222222222 14.999999999999996 C 242.42207508516492 14.999999999999996,255.55555555555554 26.999999999999996,277.77777777777777 35 C 300 43,311.1111111111111 47.00000000000001,333.3333333333333 55.00000000000001 C 355.55555555555554 63.000000000000014,366.2430331762201 75,388.8888888888889 75 C 410.68747762066454 75,422.0829108006077 63,444.4444444444444 63 C 466.52735524505215 63,500 71,500 71 L 500,75 L 0,75 Z"
                         stroke-width="0"
                       />
                     </g>
                   </g>
-                  <g
-                    id="g-svg-17"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                  />
+                  <g id="g-svg-17" fill="none" />
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-18"
                 fill="rgba(0,0,0,0)"
                 class="slider-brush-area"
                 d="M 0,0 l 500,0 l 0,75 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="75"
               />
             </g>
-            <g
-              id="g-svg-19"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-foreground"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-19" fill="none" class="slider-foreground">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="rgba(255,255,255,1)"
@@ -1171,95 +1086,97 @@
                   width="50"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,50,0)">
+              <g>
                 <path
                   id="g-svg-21"
                   fill="rgba(255,255,255,1)"
                   class="slider-selection"
                   visibility="hidden"
                   fill-opacity="0.5"
-                  d="M 0,0 l 200,0 l 0,75 l-200 0 z"
+                  d="M 50,0 l 200,0 l 0,75 l-200 0 z"
                   height="75"
                   width="200"
+                  x="50"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,250,0)">
+              <g>
                 <path
                   id="g-svg-22"
                   fill="rgba(255,255,255,1)"
                   class="slider-selection"
                   visibility="visible"
                   fill-opacity="0.5"
-                  d="M 0,0 l 250,0 l 0,75 l-250 0 z"
+                  d="M 250,0 l 250,0 l 0,75 l-250 0 z"
                   height="75"
+                  x="250"
                   width="250"
                 />
               </g>
               <g
                 id="g-svg-25"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,45,37.500000)"
                 class="slider-handle start-handle"
               >
-                <g
-                  id="g-svg-26"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
+                <g id="g-svg-26" fill="none" class="handle-icon-group">
                   <g
                     id="g-svg-334"
                     fill="none"
+                    x="0"
+                    y="0"
                     width="10"
                     height="75"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="handle-icon"
                   >
-                    <g transform="matrix(1,0,0,1,-5,-37.500000)">
+                    <g>
                       <path
                         id="g-svg-335"
                         fill="rgba(255,255,255,1)"
                         class="background"
-                        d="M 0,0 l 10,0 l 0,75 l-10 0 z"
+                        d="M -5,-37.5 l 10,0 l 0,75 l-10 0 z"
+                        x="-5"
+                        y="-37.5"
                         width="10"
                         height="75"
                         fill-opacity="0.5"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-1,-6.250000)">
+                    <g>
                       <line
                         id="g-svg-336"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12.5"
+                        x1="-1"
+                        y1="-6.25"
+                        x2="-1"
+                        y2="6.25"
                         class="icon-left-line"
                         stroke="rgba(154,154,154,1)"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,1,-6.250000)">
+                    <g>
                       <line
                         id="g-svg-337"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12.5"
+                        x1="1"
+                        y1="-6.25"
+                        x2="1"
+                        y2="6.25"
                         class="icon-right-line"
                         stroke="rgba(154,154,154,1)"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,5,-37.500000)">
+                    <g>
                       <line
                         id="g-svg-338"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="75"
+                        x1="5"
+                        y1="-37.5"
+                        x2="5"
+                        y2="37.5"
                         class="border"
                         stroke="rgba(232,232,232,1)"
                         stroke-width="1"
@@ -1267,78 +1184,73 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-31"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-31" fill="none" class="handle-label-group" />
               </g>
               <g
                 id="g-svg-35"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,255,37.500000)"
                 class="slider-handle end-handle"
               >
-                <g
-                  id="g-svg-36"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
+                <g id="g-svg-36" fill="none" class="handle-icon-group">
                   <g
                     id="g-svg-341"
                     fill="none"
+                    x="0"
+                    y="0"
                     width="10"
                     height="75"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="handle-icon"
                   >
-                    <g transform="matrix(1,0,0,1,-5,-37.500000)">
+                    <g>
                       <path
                         id="g-svg-342"
                         fill="rgba(255,255,255,1)"
                         class="background"
-                        d="M 0,0 l 10,0 l 0,75 l-10 0 z"
+                        d="M -5,-37.5 l 10,0 l 0,75 l-10 0 z"
+                        x="-5"
+                        y="-37.5"
                         width="10"
                         height="75"
                         fill-opacity="0.5"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-1,-6.250000)">
+                    <g>
                       <line
                         id="g-svg-343"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12.5"
+                        x1="-1"
+                        y1="-6.25"
+                        x2="-1"
+                        y2="6.25"
                         class="icon-left-line"
                         stroke="rgba(154,154,154,1)"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,1,-6.250000)">
+                    <g>
                       <line
                         id="g-svg-344"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="12.5"
+                        x1="1"
+                        y1="-6.25"
+                        x2="1"
+                        y2="6.25"
                         class="icon-right-line"
                         stroke="rgba(154,154,154,1)"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-5,-37.500000)">
+                    <g>
                       <line
                         id="g-svg-345"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="75"
+                        x1="-5"
+                        y1="-37.5"
+                        x2="-5"
+                        y2="37.5"
                         class="border"
                         stroke="rgba(232,232,232,1)"
                         stroke-width="1"
@@ -1346,20 +1258,19 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-41"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-41" fill="none" class="handle-label-group" />
               </g>
             </g>
           </g>
         </g>
       </g>
-      <g id="g-svg-166" fill="none" transform="matrix(1,0,0,1,160,110)">
-        <g id="g-svg-167" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-166" fill="none" x="160" y="110">
+        <g
+          id="g-svg-167"
+          fill="none"
+          transform="matrix(1,0,0,1,160,101.071800)"
+        >
+          <g>
             <path
               id="g-svg-169"
               fill="rgba(38,38,38,1)"
@@ -1367,43 +1278,40 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-168"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-168" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-170" fill="none" transform="matrix(1,0,0,1,185,130)">
-        <g transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-170" fill="none" x="185" y="130">
+        <g>
           <path id="g-svg-171" fill="none" />
         </g>
-        <g id="g-svg-172" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-172" fill="none">
           <g
             id="g-svg-173"
             fill="none"
+            x="175"
+            y="120"
             width="20"
             height="20"
-            transform="matrix(1,0,0,1,-10,-10)"
             class="speed"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-174"
                 fill="rgba(255,255,255,1)"
-                d="M 2,0 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                d="M 177,120 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                 class="select"
                 width="20"
                 height="20"
+                x="175"
+                y="120"
                 stroke="rgba(217,217,217,1)"
-                stroke-width="0"
               />
-              <g transform="matrix(1,0,0,1,0,0.500000)">
+              <g>
                 <text
                   id="g-svg-176"
                   fill="rgba(0,0,0,1)"
@@ -1418,13 +1326,15 @@
                   stroke-width="1"
                   text-anchor="left"
                   class="value"
+                  x="175"
+                  y="120.5"
                   dy="9.5px"
                 >
                   1x
                 </text>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,24)">
+            <g transform="matrix(1,0,0,1,175,144)">
               <path
                 id="g-svg-175"
                 fill="rgba(255,255,255,1)"
@@ -1436,20 +1346,9 @@
                 filter="url(#g-filter-dropshadow-175)"
                 visibility="hidden"
               />
-              <g
-                id="g-svg-177"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="dropdown-container"
-              >
-                <g
-                  id="g-svg-178"
-                  fill="none"
-                  class="dropdown-item"
-                  width="20"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-177" fill="none" class="dropdown-container">
+                <g id="g-svg-178" fill="none" class="dropdown-item" width="20">
+                  <g>
                     <path
                       id="g-svg-179"
                       fill="rgba(230,247,255,1)"
@@ -1458,12 +1357,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-180"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-180" fill="none">
+                      <g>
                         <text
                           id="g-svg-181"
                           fill="rgba(0,0,0,1)"
@@ -1494,7 +1389,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,19)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-183"
                       fill="rgba(255,255,255,1)"
@@ -1503,12 +1398,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-184"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-184" fill="none">
+                      <g>
                         <text
                           id="g-svg-185"
                           fill="rgba(0,0,0,1)"
@@ -1539,7 +1430,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,38)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-187"
                       fill="rgba(255,255,255,1)"
@@ -1548,12 +1439,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-188"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-188" fill="none">
+                      <g>
                         <text
                           id="g-svg-189"
                           fill="rgba(0,0,0,1)"
@@ -1582,9 +1469,9 @@
           </g>
         </g>
       </g>
-      <g id="g-svg-190" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-191" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-190" fill="none" x="10" y="-10">
+        <g id="g-svg-191" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-193"
               fill="rgba(38,38,38,1)"
@@ -1592,21 +1479,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-192"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-192" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-198" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-199" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-198" fill="none" x="10" y="-10">
+        <g id="g-svg-199" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-201"
               fill="rgba(38,38,38,1)"
@@ -1614,21 +1496,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-200"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-200" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-206" fill="none" transform="matrix(1,0,0,1,235,110)">
-        <g id="g-svg-207" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-206" fill="none" x="235" y="110">
+        <g
+          id="g-svg-207"
+          fill="none"
+          transform="matrix(1,0,0,1,235,101.071800)"
+        >
+          <g>
             <path
               id="g-svg-209"
               fill="rgba(38,38,38,1)"
@@ -1636,21 +1517,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-208"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-208" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-216" fill="none" transform="matrix(1,0,0,1,260,120)">
-        <g id="g-svg-217" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-216" fill="none" x="0" y="-10">
+        <g id="g-svg-217" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-219"
               fill="rgba(38,38,38,1)"
@@ -1658,21 +1534,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-218"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-218" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-224" fill="none" transform="matrix(1,0,0,1,285,110)">
-        <g id="g-svg-225" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-224" fill="none" x="285" y="110">
+        <g
+          id="g-svg-225"
+          fill="none"
+          transform="matrix(1,0,0,1,285,101.071800)"
+        >
+          <g>
             <path
               id="g-svg-227"
               fill="rgba(38,38,38,1)"
@@ -1680,21 +1555,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-226"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-226" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-232" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-233" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-232" fill="none" x="10" y="-10">
+        <g id="g-svg-233" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-235"
               fill="rgba(38,38,38,1)"
@@ -1702,21 +1572,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-234"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-234" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-248" fill="none" transform="matrix(1,0,0,1,335,120)">
-        <g id="g-svg-249" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-248" fill="none" x="0" y="-10">
+        <g id="g-svg-249" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-251"
               fill="rgba(38,38,38,1)"
@@ -1724,21 +1589,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-250"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-250" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-268" fill="none" transform="matrix(1,0,0,1,360,120)">
-        <g id="g-svg-269" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-268" fill="none" x="0" y="-10">
+        <g id="g-svg-269" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-271"
               fill="rgba(38,38,38,1)"
@@ -1746,16 +1606,11 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-270"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-270" fill="none" class="indicator-label-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/TimebarChart.svg b/__tests__/integration/snapshots/TimebarChart.svg
index 47cdb9777..df9ac83a6 100644
--- a/__tests__/integration/snapshots/TimebarChart.svg
+++ b/__tests__/integration/snapshots/TimebarChart.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="510"
-  height="430"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -55,36 +55,15 @@
       />
     </filter>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-780" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-781"
-          fill="none"
-          height="100"
-          width="500"
-          transform="matrix(1,0,0,1,10,0)"
-        >
-          <g id="g-svg-782" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid-group"
-            >
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-3"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,25)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-780" fill="none">
+        <g id="g-svg-781" fill="none" x="10" y="0" height="100" width="500">
+          <g id="g-svg-782" fill="none">
+            <g id="g-svg-1" fill="none" class="axis-grid-group">
+              <g id="g-svg-2" fill="none" class="axis-grid">
+                <g id="g-svg-3" fill="none" class="grid-line-group">
+                  <g>
                     <path
                       id="g-svg-277"
                       fill="none"
@@ -92,10 +71,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 10,25 L 10,25"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,50,25)">
+                  <g>
                     <path
                       id="g-svg-278"
                       fill="none"
@@ -103,10 +82,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 60,25 L 60,25"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,100,25)">
+                  <g>
                     <path
                       id="g-svg-279"
                       fill="none"
@@ -114,10 +93,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 110,25 L 110,25"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,25)">
+                  <g>
                     <path
                       id="g-svg-280"
                       fill="none"
@@ -125,10 +104,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 160,25 L 160,25"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,200,25)">
+                  <g>
                     <path
                       id="g-svg-281"
                       fill="none"
@@ -136,10 +115,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 210,25 L 210,25"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,250,25)">
+                  <g>
                     <path
                       id="g-svg-282"
                       fill="none"
@@ -147,10 +126,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 260,25 L 260,25"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,300,25)">
+                  <g>
                     <path
                       id="g-svg-283"
                       fill="none"
@@ -158,10 +137,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 310,25 L 310,25"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,350,25)">
+                  <g>
                     <path
                       id="g-svg-284"
                       fill="none"
@@ -169,10 +148,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 360,25 L 360,25"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,400,25)">
+                  <g>
                     <path
                       id="g-svg-285"
                       fill="none"
@@ -180,10 +159,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 410,25 L 410,25"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,450,25)">
+                  <g>
                     <path
                       id="g-svg-286"
                       fill="none"
@@ -191,10 +170,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 460,25 L 460,25"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,500,25)">
+                  <g>
                     <path
                       id="g-svg-287"
                       fill="none"
@@ -202,57 +181,37 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 510,25 L 510,25"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-4"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
+                <g id="g-svg-4" fill="none" class="grid-region-group" />
               </g>
             </g>
-            <g
-              id="g-svg-5"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,25)">
+            <g id="g-svg-5" fill="none" class="axis-main-group">
+              <g id="g-svg-6" fill="none" class="axis-line-group">
+                <g>
                   <line
                     id="g-svg-7"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="500"
-                    y2="0"
+                    x1="10"
+                    y1="25"
+                    x2="510"
+                    y2="25"
                     class="axis-line axis-line"
                     stroke-width="1"
                     stroke="rgba(202,205,209,1)"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-8"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
+              <g id="g-svg-8" fill="none" class="axis-tick-group">
                 <g
                   id="g-svg-288"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,25)"
+                  transform="matrix(1,0,0,1,10,25)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-299"
                       fill="none"
@@ -269,10 +228,10 @@
                 <g
                   id="g-svg-289"
                   fill="none"
-                  transform="matrix(1,0,0,1,50,25)"
+                  transform="matrix(1,0,0,1,60,25)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-300"
                       fill="none"
@@ -289,10 +248,10 @@
                 <g
                   id="g-svg-290"
                   fill="none"
-                  transform="matrix(1,0,0,1,100,25)"
+                  transform="matrix(1,0,0,1,110,25)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-301"
                       fill="none"
@@ -309,10 +268,10 @@
                 <g
                   id="g-svg-291"
                   fill="none"
-                  transform="matrix(1,0,0,1,150,25)"
+                  transform="matrix(1,0,0,1,160,25)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-302"
                       fill="none"
@@ -329,10 +288,10 @@
                 <g
                   id="g-svg-292"
                   fill="none"
-                  transform="matrix(1,0,0,1,200,25)"
+                  transform="matrix(1,0,0,1,210,25)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-303"
                       fill="none"
@@ -349,10 +308,10 @@
                 <g
                   id="g-svg-293"
                   fill="none"
-                  transform="matrix(1,0,0,1,250,25)"
+                  transform="matrix(1,0,0,1,260,25)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-304"
                       fill="none"
@@ -369,10 +328,10 @@
                 <g
                   id="g-svg-294"
                   fill="none"
-                  transform="matrix(1,0,0,1,300,25)"
+                  transform="matrix(1,0,0,1,310,25)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-305"
                       fill="none"
@@ -389,10 +348,10 @@
                 <g
                   id="g-svg-295"
                   fill="none"
-                  transform="matrix(1,0,0,1,350,25)"
+                  transform="matrix(1,0,0,1,360,25)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-306"
                       fill="none"
@@ -409,10 +368,10 @@
                 <g
                   id="g-svg-296"
                   fill="none"
-                  transform="matrix(1,0,0,1,400,25)"
+                  transform="matrix(1,0,0,1,410,25)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-307"
                       fill="none"
@@ -429,10 +388,10 @@
                 <g
                   id="g-svg-297"
                   fill="none"
-                  transform="matrix(1,0,0,1,450,25)"
+                  transform="matrix(1,0,0,1,460,25)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-308"
                       fill="none"
@@ -449,10 +408,10 @@
                 <g
                   id="g-svg-298"
                   fill="none"
-                  transform="matrix(1,0,0,1,500,25)"
+                  transform="matrix(1,0,0,1,510,25)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-309"
                       fill="none"
@@ -467,19 +426,14 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-9"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
+              <g id="g-svg-9" fill="none" class="axis-label-group">
                 <g
                   id="g-svg-310"
                   fill="none"
-                  transform="matrix(1,0,0,1,5,28)"
+                  transform="matrix(1,0,0,1,10,40)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-320"
                       fill="rgba(110,110,110,1)"
@@ -506,10 +460,10 @@
                 <g
                   id="g-svg-311"
                   fill="none"
-                  transform="matrix(1,0,0,1,55,28)"
+                  transform="matrix(1,0,0,1,60,40)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-321"
                       fill="rgba(110,110,110,1)"
@@ -533,10 +487,10 @@
                 <g
                   id="g-svg-312"
                   fill="none"
-                  transform="matrix(1,0,0,1,105,28)"
+                  transform="matrix(1,0,0,1,110,40)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-322"
                       fill="rgba(110,110,110,1)"
@@ -560,10 +514,10 @@
                 <g
                   id="g-svg-313"
                   fill="none"
-                  transform="matrix(1,0,0,1,155,28)"
+                  transform="matrix(1,0,0,1,160,40)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-323"
                       fill="rgba(110,110,110,1)"
@@ -587,10 +541,10 @@
                 <g
                   id="g-svg-314"
                   fill="none"
-                  transform="matrix(1,0,0,1,205,28)"
+                  transform="matrix(1,0,0,1,210,40)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-324"
                       fill="rgba(110,110,110,1)"
@@ -614,10 +568,10 @@
                 <g
                   id="g-svg-315"
                   fill="none"
-                  transform="matrix(1,0,0,1,255,28)"
+                  transform="matrix(1,0,0,1,260,40)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-325"
                       fill="rgba(110,110,110,1)"
@@ -641,10 +595,10 @@
                 <g
                   id="g-svg-316"
                   fill="none"
-                  transform="matrix(1,0,0,1,305,28)"
+                  transform="matrix(1,0,0,1,310,40)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-326"
                       fill="rgba(110,110,110,1)"
@@ -668,10 +622,10 @@
                 <g
                   id="g-svg-317"
                   fill="none"
-                  transform="matrix(1,0,0,1,355,28)"
+                  transform="matrix(1,0,0,1,360,40)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-327"
                       fill="rgba(110,110,110,1)"
@@ -695,10 +649,10 @@
                 <g
                   id="g-svg-318"
                   fill="none"
-                  transform="matrix(1,0,0,1,405,28)"
+                  transform="matrix(1,0,0,1,410,40)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-328"
                       fill="rgba(110,110,110,1)"
@@ -722,10 +676,10 @@
                 <g
                   id="g-svg-319"
                   fill="none"
-                  transform="matrix(1,0,0,1,455,28)"
+                  transform="matrix(1,0,0,1,460,40)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-329"
                       fill="rgba(110,110,110,1)"
@@ -751,248 +705,228 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-10"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-title-group"
-            />
+            <g id="g-svg-10" fill="none" class="axis-title-group" />
           </g>
-          <g
-            id="g-svg-784"
-            fill="none"
-            width="500"
-            height="40"
-            transform="matrix(1,0,0,1,0,60)"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-784" fill="none" x="10" y="60" width="500" height="40">
+            <g>
               <path
                 id="g-svg-785"
                 fill="rgba(251,253,255,1)"
-                d="M 0,0 l 500,0 l 0,40 l-500 0 z"
+                d="M 10,60 l 500,0 l 0,40 l-500 0 z"
+                x="10"
+                y="60"
                 width="500"
                 height="40"
                 stroke="rgba(235,237,240,1)"
               />
             </g>
-            <g id="g-svg-786" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g id="g-svg-160" fill="none" transform="matrix(1,0,0,1,170,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+            <g id="g-svg-786" fill="none">
+              <g id="g-svg-160" fill="none" x="180" y="80">
+                <g>
                   <path
                     id="g-svg-161"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 174,70 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="170"
+                    y="70"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-162" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-4.698970,-4.698970)">
+                <g id="g-svg-162" fill="none">
+                  <g>
                     <path
                       id="g-svg-163"
                       fill="none"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3010299956639813"
-                      d="M 1.3762964496778385,8.021643558994198 A 4.698970004336019 4.698970004336019 0 1 1 8.0216435589942 8.021643558994198"
+                      d="M 176.67732644534183,83.32267355465818 A 4.698970004336019 4.698970004336019 0 1 1 183.32267355465817 83.32267355465818"
                     />
-                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.376296,8.021644)">
+                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,176.677322,83.322670)">
                       <path
                         id="g-svg-165"
                         fill="rgba(86,87,88,1)"
-                        d="M 3.6020599913279625,3.6020599913279625 L 0,1.8010299956639813 L 3.6020599913279625,0 Z"
-                        transform="translate(-1.8010299956639813,-1.8010299956639813)"
+                        d="M 1.8010299956639813,1.8010299956639813 L -1.8010299956639813,0 L 1.8010299956639813,-1.8010299956639813 Z"
                       />
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-194" fill="none" transform="matrix(1,0,0,1,210,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-194" fill="none" x="220" y="80">
+                <g>
                   <path id="g-svg-195" fill="none" />
                 </g>
-                <g id="g-svg-196" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-196" fill="none">
+                  <g>
                     <line
                       id="g-svg-197"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="220"
+                      y1="74"
+                      x2="220"
+                      y2="86"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-202" fill="none" transform="matrix(1,0,0,1,230,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-202" fill="none" x="240" y="80">
+                <g>
                   <path
                     id="g-svg-203"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 234,70 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="230"
+                    y="70"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-204" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-204" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-205"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 0,3.464101615137755 6,6.92820323027551 6,3.464101615137755 12,0 12,6.92820323027551 6,3.464101615137755"
+                      points="240,80 240,76.53589838486225 234,80 240,83.46410161513775 240,80 246,76.53589838486225 246,83.46410161513775 240,80"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-210" fill="none" transform="matrix(1,0,0,1,250,20)">
-                <g id="g-svg-211" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-212"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-210" fill="none" x="260" y="80">
+                <g id="g-svg-211" fill="none">
+                  <g id="g-svg-212" fill="none" x="260" y="80" class="icon">
+                    <g>
                       <path
                         id="g-svg-213"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 254,70 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="250"
+                        y="70"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-214"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-2.771281,-4.800000)">
+                    <g id="g-svg-214" fill="none">
+                      <g>
                         <polygon
                           id="g-svg-215"
                           fill="rgba(86,87,88,1)"
-                          points="8.313843876330612,4.800000000000001 0,0 0,9.600000000000001 8.313843876330612,4.800000000000001"
+                          points="265.54256258422043,80 257.2287187078898,75.2 257.2287187078898,84.8 265.54256258422043,80"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-220" fill="none" transform="matrix(1,0,0,1,270,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-220" fill="none" x="280" y="80">
+                <g>
                   <path
                     id="g-svg-221"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 274,70 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="270"
+                    y="70"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-222" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-222" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-223"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 12,3.464101615137755 6,6.92820323027551 6,3.464101615137755 0,0 0,6.92820323027551 6,3.464101615137755"
+                      points="280,80 280,76.53589838486225 286,80 280,83.46410161513775 280,80 274,76.53589838486225 274,83.46410161513775 280,80"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-228" fill="none" transform="matrix(1,0,0,1,290,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-228" fill="none" x="300" y="80">
+                <g>
                   <path id="g-svg-229" fill="none" />
                 </g>
-                <g id="g-svg-230" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-230" fill="none">
+                  <g>
                     <line
                       id="g-svg-231"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="300"
+                      y1="74"
+                      x2="300"
+                      y2="86"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-236" fill="none" transform="matrix(1,0,0,1,310,20)">
-                <g id="g-svg-237" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-238"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-236" fill="none" x="320" y="80">
+                <g id="g-svg-237" fill="none">
+                  <g id="g-svg-238" fill="none" x="320" y="80" class="icon">
+                    <g>
                       <path
                         id="g-svg-239"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 314,70 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="310"
+                        y="70"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-240"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,-6)">
+                    <g id="g-svg-240" fill="none">
+                      <g>
                         <line
                           id="g-svg-241"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="320"
+                          y1="74"
+                          x2="320"
+                          y2="86"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,-8.602060,0)">
+                      <g>
                         <line
                           id="g-svg-242"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="6"
-                          y2="0"
+                          x1="311.39794000867204"
+                          y1="80"
+                          x2="317.39794000867204"
+                          y2="80"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(-1,0,-0,-1,6,0)">
+                        <g transform="matrix(-1,0,-0,-1,317.397949,80)">
                           <path
                             id="g-svg-253"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
-                      <g transform="matrix(1,0,0,1,2.602060,0)">
+                      <g>
                         <line
                           id="g-svg-245"
                           fill="none"
-                          x1="6"
-                          y1="0"
-                          x2="0"
-                          y2="0"
+                          x1="328.60205999132796"
+                          y1="80"
+                          x2="322.60205999132796"
+                          y2="80"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(1,0,0,1,0,0)">
+                        <g transform="matrix(1,0,0,1,322.602051,80)">
                           <path
                             id="g-svg-255"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
@@ -1000,103 +934,92 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-256" fill="none" transform="matrix(1,0,0,1,330,20)">
-                <g id="g-svg-257" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-258"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-256" fill="none" x="340" y="80">
+                <g id="g-svg-257" fill="none">
+                  <g id="g-svg-258" fill="none" x="340" y="80" class="icon">
+                    <g>
                       <path
                         id="g-svg-259"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 334,70 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="330"
+                        y="70"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-260"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g id="g-svg-260" fill="none">
+                      <g>
                         <polyline
                           id="g-svg-261"
                           fill="none"
-                          points="0,0 0,12 12,12"
+                          points="334,74 334,86 346,86"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g
-                        id="g-svg-262"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,-3.397940,2.349485)">
+                      <g id="g-svg-262" fill="none">
+                        <g>
                           <line
                             id="g-svg-272"
                             fill="none"
-                            x1="0"
-                            y1="2.3494850021680094"
-                            x2="0"
-                            y2="0"
+                            x1="336.60205999132796"
+                            y1="84.69897000433602"
+                            x2="336.60205999132796"
+                            y2="82.34948500216801"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,-1.258146,-4.698970)">
+                        <g>
                           <line
                             id="g-svg-273"
                             fill="none"
-                            x1="0"
-                            y1="9.397940008672037"
-                            x2="0"
-                            y2="0"
+                            x1="338.74185399219516"
+                            y1="84.69897000433602"
+                            x2="338.74185399219516"
+                            y2="75.30102999566398"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,0.881648,0)">
+                        <g>
                           <line
                             id="g-svg-274"
                             fill="none"
-                            x1="0"
-                            y1="4.698970004336019"
-                            x2="0"
-                            y2="0"
+                            x1="340.88164799306236"
+                            y1="84.69897000433602"
+                            x2="340.88164799306236"
+                            y2="80"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,3.021442,-4.698970)">
+                        <g>
                           <line
                             id="g-svg-275"
                             fill="none"
-                            x1="0"
-                            y1="9.397940008672037"
-                            x2="0"
-                            y2="0"
+                            x1="343.02144199392956"
+                            y1="84.69897000433602"
+                            x2="343.02144199392956"
+                            y2="75.30102999566398"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,5.161236,-2.349485)">
+                        <g>
                           <line
                             id="g-svg-276"
                             fill="none"
-                            x1="0"
-                            y1="7.048455006504028"
-                            x2="0"
-                            y2="0"
+                            x1="345.16123599479675"
+                            y1="84.69897000433602"
+                            x2="345.16123599479675"
+                            y2="77.65051499783199"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
@@ -1109,87 +1032,85 @@
               </g>
             </g>
           </g>
-          <g id="g-svg-783" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g
+            id="g-svg-783"
+            fill="none"
+            x="0"
+            y="0"
+            transform="matrix(1,0,0,1,10,0)"
+          >
+            <g>
               <path
                 id="g-svg-11"
                 fill="rgba(65,97,128,1)"
                 class="slider-track"
                 d="M 0,0 l 500,0 l 0,25 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="25"
                 opacity="0.05"
               />
             </g>
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-sparkline-group"
-            >
+            <g id="g-svg-12" fill="none" class="slider-sparkline-group">
               <g
                 id="g-svg-13"
                 fill="none"
+                x="0"
+                y="0"
                 width="500"
                 height="25"
-                transform="matrix(1,0,0,1,0,0)"
                 class="slider-sparkline"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path id="g-svg-14" fill="none" class="container" />
                 </g>
                 <g
                   id="g-svg-15"
                   fill="none"
                   class="spark sparkline"
-                  transform="matrix(1,0,0,1,0,0)"
+                  x="0"
+                  y="0"
                 >
-                  <g id="g-svg-16" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,0,5)">
+                  <g id="g-svg-16" fill="none">
+                    <g>
                       <path
                         id="g-svg-330"
                         fill="none"
                         class="line"
                         stroke="rgba(212,229,253,1)"
-                        d="M 0,6.666666666666667 C 0 6.666666666666667,33.135422238752426 17.333333333333336,55.55555555555555 17.333333333333336 C 77.57986668319685 17.333333333333336,88.88888888888889 16.533333333333335,111.1111111111111 16 C 133.33333333333331 15.466666666666665,144.81551362720143 16,166.66666666666666 14.666666666666668 C 189.25995807164585 13.288048866243745,199.70514402055812 0,222.2222222222222 0 C 244.14958846500255 0,255.55555555555554 3.999999999999999,277.77777777777777 6.666666666666667 C 300 9.333333333333332,311.1111111111111 10.666666666666671,333.3333333333333 13.333333333333336 C 355.55555555555554 16.000000000000004,366.61596289148514 20,388.8888888888889 20 C 411.0604073359296 20,422.3481232795594 18.6515585397862,444.4444444444444 16 C 466.79256772400385 13.318225206452865,500 6.666666666666667,500 6.666666666666667"
+                        d="M 0,11.666666666666666 C 0 11.666666666666666,33.135422238752426 22.333333333333336,55.55555555555555 22.333333333333336 C 77.57986668319685 22.333333333333336,88.88888888888889 21.533333333333335,111.1111111111111 21 C 133.33333333333331 20.466666666666665,144.81551362720143 21,166.66666666666666 19.666666666666668 C 189.25995807164585 18.288048866243745,199.70514402055812 4.999999999999999,222.2222222222222 4.999999999999999 C 244.14958846500255 4.999999999999999,255.55555555555554 8.999999999999998,277.77777777777777 11.666666666666666 C 300 14.333333333333332,311.1111111111111 15.666666666666671,333.3333333333333 18.333333333333336 C 355.55555555555554 21.000000000000004,366.61596289148514 25,388.8888888888889 25 C 411.0604073359296 25,422.3481232795594 23.6515585397862,444.4444444444444 21 C 466.79256772400385 18.318225206452865,500 11.666666666666666,500 11.666666666666666"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,0,5)">
+                    <g>
                       <path
                         id="g-svg-331"
                         fill="rgba(212,229,253,1)"
                         class="area"
-                        d="M 0,6.666666666666667 C 0 6.666666666666667,33.135422238752426 17.333333333333336,55.55555555555555 17.333333333333336 C 77.57986668319685 17.333333333333336,88.88888888888889 16.533333333333335,111.1111111111111 16 C 133.33333333333331 15.466666666666665,144.81551362720143 16,166.66666666666666 14.666666666666668 C 189.25995807164585 13.288048866243745,199.70514402055812 0,222.2222222222222 0 C 244.14958846500255 0,255.55555555555554 3.999999999999999,277.77777777777777 6.666666666666667 C 300 9.333333333333332,311.1111111111111 10.666666666666671,333.3333333333333 13.333333333333336 C 355.55555555555554 16.000000000000004,366.61596289148514 20,388.8888888888889 20 C 411.0604073359296 20,422.3481232795594 18.6515585397862,444.4444444444444 16 C 466.79256772400385 13.318225206452865,500 6.666666666666667,500 6.666666666666667 L 500,20 L 0,20 Z"
+                        d="M 0,11.666666666666666 C 0 11.666666666666666,33.135422238752426 22.333333333333336,55.55555555555555 22.333333333333336 C 77.57986668319685 22.333333333333336,88.88888888888889 21.533333333333335,111.1111111111111 21 C 133.33333333333331 20.466666666666665,144.81551362720143 21,166.66666666666666 19.666666666666668 C 189.25995807164585 18.288048866243745,199.70514402055812 4.999999999999999,222.2222222222222 4.999999999999999 C 244.14958846500255 4.999999999999999,255.55555555555554 8.999999999999998,277.77777777777777 11.666666666666666 C 300 14.333333333333332,311.1111111111111 15.666666666666671,333.3333333333333 18.333333333333336 C 355.55555555555554 21.000000000000004,366.61596289148514 25,388.8888888888889 25 C 411.0604073359296 25,422.3481232795594 23.6515585397862,444.4444444444444 21 C 466.79256772400385 18.318225206452865,500 11.666666666666666,500 11.666666666666666 L 500,25 L 0,25 Z"
                         stroke-width="0"
                       />
                     </g>
                   </g>
-                  <g
-                    id="g-svg-17"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                  />
+                  <g id="g-svg-17" fill="none" />
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-18"
                 fill="rgba(0,0,0,0)"
                 class="slider-brush-area"
                 d="M 0,0 l 500,0 l 0,25 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="25"
               />
             </g>
-            <g
-              id="g-svg-19"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-foreground"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-19" fill="none" class="slider-foreground">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="rgba(255,255,255,1)"
@@ -1201,95 +1122,97 @@
                   width="50"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,50,0)">
+              <g>
                 <path
                   id="g-svg-21"
                   fill="rgba(255,255,255,1)"
                   class="slider-selection"
                   visibility="hidden"
                   fill-opacity="0.5"
-                  d="M 0,0 l 350.00000000000006,0 l 0,25 l-350.00000000000006 0 z"
+                  d="M 50,0 l 350.00000000000006,0 l 0,25 l-350.00000000000006 0 z"
                   height="25"
                   width="350.00000000000006"
+                  x="50"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,400,0)">
+              <g>
                 <path
                   id="g-svg-22"
                   fill="rgba(255,255,255,1)"
                   class="slider-selection"
                   visibility="visible"
                   fill-opacity="0.5"
-                  d="M 0,0 l 99.99999999999997,0 l 0,25 l-99.99999999999997 0 z"
+                  d="M 400,0 l 99.99999999999997,0 l 0,25 l-99.99999999999997 0 z"
                   height="25"
+                  x="400"
                   width="99.99999999999997"
                 />
               </g>
               <g
                 id="g-svg-25"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,45,12.500000)"
                 class="slider-handle start-handle"
               >
-                <g
-                  id="g-svg-26"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
+                <g id="g-svg-26" fill="none" class="handle-icon-group">
                   <g
                     id="g-svg-334"
                     fill="none"
+                    x="0"
+                    y="0"
                     width="10"
                     height="25"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="handle-icon"
                   >
-                    <g transform="matrix(1,0,0,1,-5,-12.500000)">
+                    <g>
                       <path
                         id="g-svg-335"
                         fill="rgba(255,255,255,1)"
                         class="background"
-                        d="M 0,0 l 10,0 l 0,25 l-10 0 z"
+                        d="M -5,-12.5 l 10,0 l 0,25 l-10 0 z"
+                        x="-5"
+                        y="-12.5"
                         width="10"
                         height="25"
                         fill-opacity="0.5"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-1,-2.083333)">
+                    <g>
                       <line
                         id="g-svg-336"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="4.166666666666667"
+                        x1="-1"
+                        y1="-2.0833333333333335"
+                        x2="-1"
+                        y2="2.0833333333333335"
                         class="icon-left-line"
                         stroke="rgba(154,154,154,1)"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,1,-2.083333)">
+                    <g>
                       <line
                         id="g-svg-337"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="4.166666666666667"
+                        x1="1"
+                        y1="-2.0833333333333335"
+                        x2="1"
+                        y2="2.0833333333333335"
                         class="icon-right-line"
                         stroke="rgba(154,154,154,1)"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,5,-12.500000)">
+                    <g>
                       <line
                         id="g-svg-338"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="25"
+                        x1="5"
+                        y1="-12.5"
+                        x2="5"
+                        y2="12.5"
                         class="border"
                         stroke="rgba(232,232,232,1)"
                         stroke-width="1"
@@ -1297,78 +1220,73 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-31"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-31" fill="none" class="handle-label-group" />
               </g>
               <g
                 id="g-svg-35"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,405,12.500000)"
                 class="slider-handle end-handle"
               >
-                <g
-                  id="g-svg-36"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
+                <g id="g-svg-36" fill="none" class="handle-icon-group">
                   <g
                     id="g-svg-341"
                     fill="none"
+                    x="0"
+                    y="0"
                     width="10"
                     height="25"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="handle-icon"
                   >
-                    <g transform="matrix(1,0,0,1,-5,-12.500000)">
+                    <g>
                       <path
                         id="g-svg-342"
                         fill="rgba(255,255,255,1)"
                         class="background"
-                        d="M 0,0 l 10,0 l 0,25 l-10 0 z"
+                        d="M -5,-12.5 l 10,0 l 0,25 l-10 0 z"
+                        x="-5"
+                        y="-12.5"
                         width="10"
                         height="25"
                         fill-opacity="0.5"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-1,-2.083333)">
+                    <g>
                       <line
                         id="g-svg-343"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="4.166666666666667"
+                        x1="-1"
+                        y1="-2.0833333333333335"
+                        x2="-1"
+                        y2="2.0833333333333335"
                         class="icon-left-line"
                         stroke="rgba(154,154,154,1)"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,1,-2.083333)">
+                    <g>
                       <line
                         id="g-svg-344"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="4.166666666666667"
+                        x1="1"
+                        y1="-2.0833333333333335"
+                        x2="1"
+                        y2="2.0833333333333335"
                         class="icon-right-line"
                         stroke="rgba(154,154,154,1)"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-5,-12.500000)">
+                    <g>
                       <line
                         id="g-svg-345"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="25"
+                        x1="-5"
+                        y1="-12.5"
+                        x2="-5"
+                        y2="12.5"
                         class="border"
                         stroke="rgba(232,232,232,1)"
                         stroke-width="1"
@@ -1376,43 +1294,17 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-41"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-41" fill="none" class="handle-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g
-          id="g-svg-787"
-          fill="none"
-          height="100"
-          width="500"
-          transform="matrix(1,0,0,1,10,110)"
-        >
-          <g id="g-svg-788" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-346"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid-group"
-            >
-              <g
-                id="g-svg-347"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-348"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,25)">
+        <g id="g-svg-787" fill="none" x="10" y="110" height="100" width="500">
+          <g id="g-svg-788" fill="none">
+            <g id="g-svg-346" fill="none" class="axis-grid-group">
+              <g id="g-svg-347" fill="none" class="axis-grid">
+                <g id="g-svg-348" fill="none" class="grid-line-group">
+                  <g>
                     <path
                       id="g-svg-623"
                       fill="none"
@@ -1420,10 +1312,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 10,135 L 10,135"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,50,25)">
+                  <g>
                     <path
                       id="g-svg-624"
                       fill="none"
@@ -1431,10 +1323,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 60,135 L 60,135"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,100,25)">
+                  <g>
                     <path
                       id="g-svg-625"
                       fill="none"
@@ -1442,10 +1334,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 110,135 L 110,135"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,25)">
+                  <g>
                     <path
                       id="g-svg-626"
                       fill="none"
@@ -1453,10 +1345,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 160,135 L 160,135"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,200,25)">
+                  <g>
                     <path
                       id="g-svg-627"
                       fill="none"
@@ -1464,10 +1356,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 210,135 L 210,135"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,250,25)">
+                  <g>
                     <path
                       id="g-svg-628"
                       fill="none"
@@ -1475,10 +1367,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 260,135 L 260,135"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,300,25)">
+                  <g>
                     <path
                       id="g-svg-629"
                       fill="none"
@@ -1486,10 +1378,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 310,135 L 310,135"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,350,25)">
+                  <g>
                     <path
                       id="g-svg-630"
                       fill="none"
@@ -1497,10 +1389,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 360,135 L 360,135"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,400,25)">
+                  <g>
                     <path
                       id="g-svg-631"
                       fill="none"
@@ -1508,10 +1400,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 410,135 L 410,135"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,450,25)">
+                  <g>
                     <path
                       id="g-svg-632"
                       fill="none"
@@ -1519,10 +1411,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 460,135 L 460,135"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,500,25)">
+                  <g>
                     <path
                       id="g-svg-633"
                       fill="none"
@@ -1530,57 +1422,37 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 510,135 L 510,135"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-349"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
+                <g id="g-svg-349" fill="none" class="grid-region-group" />
               </g>
             </g>
-            <g
-              id="g-svg-350"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-351"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,25)">
+            <g id="g-svg-350" fill="none" class="axis-main-group">
+              <g id="g-svg-351" fill="none" class="axis-line-group">
+                <g>
                   <line
                     id="g-svg-352"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="500"
-                    y2="0"
+                    x1="10"
+                    y1="135"
+                    x2="510"
+                    y2="135"
                     class="axis-line axis-line"
                     stroke-width="1"
                     stroke="rgba(202,205,209,1)"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-353"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
+              <g id="g-svg-353" fill="none" class="axis-tick-group">
                 <g
                   id="g-svg-634"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,25)"
+                  transform="matrix(1,0,0,1,10,135)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-645"
                       fill="none"
@@ -1597,10 +1469,10 @@
                 <g
                   id="g-svg-635"
                   fill="none"
-                  transform="matrix(1,0,0,1,50,25)"
+                  transform="matrix(1,0,0,1,60,135)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-646"
                       fill="none"
@@ -1617,10 +1489,10 @@
                 <g
                   id="g-svg-636"
                   fill="none"
-                  transform="matrix(1,0,0,1,100,25)"
+                  transform="matrix(1,0,0,1,110,135)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-647"
                       fill="none"
@@ -1637,10 +1509,10 @@
                 <g
                   id="g-svg-637"
                   fill="none"
-                  transform="matrix(1,0,0,1,150,25)"
+                  transform="matrix(1,0,0,1,160,135)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-648"
                       fill="none"
@@ -1657,10 +1529,10 @@
                 <g
                   id="g-svg-638"
                   fill="none"
-                  transform="matrix(1,0,0,1,200,25)"
+                  transform="matrix(1,0,0,1,210,135)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-649"
                       fill="none"
@@ -1677,10 +1549,10 @@
                 <g
                   id="g-svg-639"
                   fill="none"
-                  transform="matrix(1,0,0,1,250,25)"
+                  transform="matrix(1,0,0,1,260,135)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-650"
                       fill="none"
@@ -1697,10 +1569,10 @@
                 <g
                   id="g-svg-640"
                   fill="none"
-                  transform="matrix(1,0,0,1,300,25)"
+                  transform="matrix(1,0,0,1,310,135)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-651"
                       fill="none"
@@ -1717,10 +1589,10 @@
                 <g
                   id="g-svg-641"
                   fill="none"
-                  transform="matrix(1,0,0,1,350,25)"
+                  transform="matrix(1,0,0,1,360,135)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-652"
                       fill="none"
@@ -1737,10 +1609,10 @@
                 <g
                   id="g-svg-642"
                   fill="none"
-                  transform="matrix(1,0,0,1,400,25)"
+                  transform="matrix(1,0,0,1,410,135)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-653"
                       fill="none"
@@ -1757,10 +1629,10 @@
                 <g
                   id="g-svg-643"
                   fill="none"
-                  transform="matrix(1,0,0,1,450,25)"
+                  transform="matrix(1,0,0,1,460,135)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-654"
                       fill="none"
@@ -1777,10 +1649,10 @@
                 <g
                   id="g-svg-644"
                   fill="none"
-                  transform="matrix(1,0,0,1,500,25)"
+                  transform="matrix(1,0,0,1,510,135)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-655"
                       fill="none"
@@ -1795,19 +1667,14 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-354"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
+              <g id="g-svg-354" fill="none" class="axis-label-group">
                 <g
                   id="g-svg-656"
                   fill="none"
-                  transform="matrix(1,0,0,1,5,28)"
+                  transform="matrix(1,0,0,1,10,150)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-666"
                       fill="rgba(110,110,110,1)"
@@ -1834,10 +1701,10 @@
                 <g
                   id="g-svg-657"
                   fill="none"
-                  transform="matrix(1,0,0,1,55,28)"
+                  transform="matrix(1,0,0,1,60,150)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-667"
                       fill="rgba(110,110,110,1)"
@@ -1861,10 +1728,10 @@
                 <g
                   id="g-svg-658"
                   fill="none"
-                  transform="matrix(1,0,0,1,105,28)"
+                  transform="matrix(1,0,0,1,110,150)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-668"
                       fill="rgba(110,110,110,1)"
@@ -1888,10 +1755,10 @@
                 <g
                   id="g-svg-659"
                   fill="none"
-                  transform="matrix(1,0,0,1,155,28)"
+                  transform="matrix(1,0,0,1,160,150)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-669"
                       fill="rgba(110,110,110,1)"
@@ -1915,10 +1782,10 @@
                 <g
                   id="g-svg-660"
                   fill="none"
-                  transform="matrix(1,0,0,1,205,28)"
+                  transform="matrix(1,0,0,1,210,150)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-670"
                       fill="rgba(110,110,110,1)"
@@ -1942,10 +1809,10 @@
                 <g
                   id="g-svg-661"
                   fill="none"
-                  transform="matrix(1,0,0,1,255,28)"
+                  transform="matrix(1,0,0,1,260,150)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-671"
                       fill="rgba(110,110,110,1)"
@@ -1969,10 +1836,10 @@
                 <g
                   id="g-svg-662"
                   fill="none"
-                  transform="matrix(1,0,0,1,305,28)"
+                  transform="matrix(1,0,0,1,310,150)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-672"
                       fill="rgba(110,110,110,1)"
@@ -1996,10 +1863,10 @@
                 <g
                   id="g-svg-663"
                   fill="none"
-                  transform="matrix(1,0,0,1,355,28)"
+                  transform="matrix(1,0,0,1,360,150)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-673"
                       fill="rgba(110,110,110,1)"
@@ -2023,10 +1890,10 @@
                 <g
                   id="g-svg-664"
                   fill="none"
-                  transform="matrix(1,0,0,1,405,28)"
+                  transform="matrix(1,0,0,1,410,150)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-674"
                       fill="rgba(110,110,110,1)"
@@ -2050,10 +1917,10 @@
                 <g
                   id="g-svg-665"
                   fill="none"
-                  transform="matrix(1,0,0,1,455,28)"
+                  transform="matrix(1,0,0,1,460,150)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-675"
                       fill="rgba(110,110,110,1)"
@@ -2079,260 +1946,240 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-355"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-title-group"
-            />
+            <g id="g-svg-355" fill="none" class="axis-title-group" />
           </g>
-          <g
-            id="g-svg-790"
-            fill="none"
-            width="500"
-            height="40"
-            transform="matrix(1,0,0,1,0,60)"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-790" fill="none" x="10" y="170" width="500" height="40">
+            <g>
               <path
                 id="g-svg-791"
                 fill="rgba(251,253,255,1)"
-                d="M 0,0 l 500,0 l 0,40 l-500 0 z"
+                d="M 10,170 l 500,0 l 0,40 l-500 0 z"
+                x="10"
+                y="170"
                 width="500"
                 height="40"
                 stroke="rgba(235,237,240,1)"
               />
             </g>
-            <g id="g-svg-792" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g id="g-svg-505" fill="none" transform="matrix(1,0,0,1,170,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+            <g id="g-svg-792" fill="none">
+              <g id="g-svg-505" fill="none" x="180" y="190">
+                <g>
                   <path
                     id="g-svg-506"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 174,180 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="170"
+                    y="180"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-507" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-4.698970,-4.698970)">
+                <g id="g-svg-507" fill="none">
+                  <g>
                     <path
                       id="g-svg-508"
                       fill="none"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3010299956639813"
-                      d="M 1.3762964496778385,8.021643558994198 A 4.698970004336019 4.698970004336019 0 1 1 8.0216435589942 8.021643558994198"
+                      d="M 176.67732644534183,193.32267355465817 A 4.698970004336019 4.698970004336019 0 1 1 183.32267355465817 193.32267355465817"
                     />
-                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.376296,8.021644)">
+                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,176.677322,193.322678)">
                       <path
                         id="g-svg-510"
                         fill="rgba(86,87,88,1)"
-                        d="M 3.6020599913279625,3.6020599913279625 L 0,1.8010299956639813 L 3.6020599913279625,0 Z"
-                        transform="translate(-1.8010299956639813,-1.8010299956639813)"
+                        d="M 1.8010299956639813,1.8010299956639813 L -1.8010299956639813,0 L 1.8010299956639813,-1.8010299956639813 Z"
                       />
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-539" fill="none" transform="matrix(1,0,0,1,210,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-539" fill="none" x="220" y="190">
+                <g>
                   <path id="g-svg-540" fill="none" />
                 </g>
-                <g id="g-svg-541" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-541" fill="none">
+                  <g>
                     <line
                       id="g-svg-542"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="220"
+                      y1="184"
+                      x2="220"
+                      y2="196"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-547" fill="none" transform="matrix(1,0,0,1,230,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-547" fill="none" x="240" y="190">
+                <g>
                   <path
                     id="g-svg-548"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 234,180 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="230"
+                    y="180"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-549" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-549" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-550"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 0,3.464101615137755 6,6.92820323027551 6,3.464101615137755 12,0 12,6.92820323027551 6,3.464101615137755"
+                      points="240,190 240,186.53589838486224 234,190 240,193.46410161513776 240,190 246,186.53589838486224 246,193.46410161513776 240,190"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-555" fill="none" transform="matrix(1,0,0,1,250,20)">
-                <g id="g-svg-556" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-557"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-555" fill="none" x="260" y="190">
+                <g id="g-svg-556" fill="none">
+                  <g id="g-svg-557" fill="none" x="260" y="190" class="icon">
+                    <g>
                       <path
                         id="g-svg-558"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 254,180 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="250"
+                        y="180"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-559"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-2.771281,-4.800000)">
+                    <g id="g-svg-559" fill="none">
+                      <g>
                         <polygon
                           id="g-svg-560"
                           fill="rgba(86,87,88,1)"
-                          points="8.313843876330612,4.800000000000001 0,0 0,9.600000000000001 8.313843876330612,4.800000000000001"
+                          points="265.54256258422043,190 257.2287187078898,185.2 257.2287187078898,194.8 265.54256258422043,190"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-565" fill="none" transform="matrix(1,0,0,1,270,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-565" fill="none" x="280" y="190">
+                <g>
                   <path
                     id="g-svg-566"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 274,180 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="270"
+                    y="180"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-567" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-567" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-568"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 12,3.464101615137755 6,6.92820323027551 6,3.464101615137755 0,0 0,6.92820323027551 6,3.464101615137755"
+                      points="280,190 280,186.53589838486224 286,190 280,193.46410161513776 280,190 274,186.53589838486224 274,193.46410161513776 280,190"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-573" fill="none" transform="matrix(1,0,0,1,290,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-573" fill="none" x="300" y="190">
+                <g>
                   <path id="g-svg-574" fill="none" />
                 </g>
-                <g id="g-svg-575" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-575" fill="none">
+                  <g>
                     <line
                       id="g-svg-576"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="300"
+                      y1="184"
+                      x2="300"
+                      y2="196"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-581" fill="none" transform="matrix(1,0,0,1,310,20)">
-                <g id="g-svg-582" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-583"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-581" fill="none" x="320" y="190">
+                <g id="g-svg-582" fill="none">
+                  <g id="g-svg-583" fill="none" x="320" y="190" class="icon">
+                    <g>
                       <path
                         id="g-svg-584"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 314,180 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="310"
+                        y="180"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-585"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g id="g-svg-585" fill="none">
+                      <g>
                         <line
                           id="g-svg-586"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="314"
+                          y1="184"
+                          x2="314"
+                          y2="196"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6,-6)">
+                      <g>
                         <line
                           id="g-svg-587"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="326"
+                          y1="184"
+                          x2="326"
+                          y2="196"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,-3.397940,0)">
+                      <g>
                         <line
                           id="g-svg-588"
                           fill="none"
-                          x1="3.3979400086720375"
-                          y1="0"
-                          x2="0"
-                          y2="0"
+                          x1="320"
+                          y1="190"
+                          x2="316.60205999132796"
+                          y2="190"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(1,0,0,1,0,0)">
+                        <g transform="matrix(1,0,0,1,316.602051,190)">
                           <path
                             id="g-svg-599"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-591"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="3.3979400086720375"
-                          y2="0"
+                          x1="320"
+                          y1="190"
+                          x2="323.39794000867204"
+                          y2="190"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(-1,0,-0,-1,3.397940,0)">
+                        <g transform="matrix(-1,0,-0,-1,323.397949,190)">
                           <path
                             id="g-svg-601"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
@@ -2340,103 +2187,92 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-602" fill="none" transform="matrix(1,0,0,1,330,20)">
-                <g id="g-svg-603" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-604"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-602" fill="none" x="340" y="190">
+                <g id="g-svg-603" fill="none">
+                  <g id="g-svg-604" fill="none" x="340" y="190" class="icon">
+                    <g>
                       <path
                         id="g-svg-605"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 334,180 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="330"
+                        y="180"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-606"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g id="g-svg-606" fill="none">
+                      <g>
                         <polyline
                           id="g-svg-607"
                           fill="none"
-                          points="0,0 0,12 12,12"
+                          points="334,184 334,196 346,196"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g
-                        id="g-svg-608"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,-3.397940,2.349485)">
+                      <g id="g-svg-608" fill="none">
+                        <g>
                           <line
                             id="g-svg-618"
                             fill="none"
-                            x1="0"
-                            y1="2.3494850021680094"
-                            x2="0"
-                            y2="0"
+                            x1="336.60205999132796"
+                            y1="194.69897000433602"
+                            x2="336.60205999132796"
+                            y2="192.34948500216802"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,-1.258146,-4.698970)">
+                        <g>
                           <line
                             id="g-svg-619"
                             fill="none"
-                            x1="0"
-                            y1="9.397940008672037"
-                            x2="0"
-                            y2="0"
+                            x1="338.74185399219516"
+                            y1="194.69897000433602"
+                            x2="338.74185399219516"
+                            y2="185.30102999566398"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,0.881648,0)">
+                        <g>
                           <line
                             id="g-svg-620"
                             fill="none"
-                            x1="0"
-                            y1="4.698970004336019"
-                            x2="0"
-                            y2="0"
+                            x1="340.88164799306236"
+                            y1="194.69897000433602"
+                            x2="340.88164799306236"
+                            y2="190"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,3.021442,-4.698970)">
+                        <g>
                           <line
                             id="g-svg-621"
                             fill="none"
-                            x1="0"
-                            y1="9.397940008672037"
-                            x2="0"
-                            y2="0"
+                            x1="343.02144199392956"
+                            y1="194.69897000433602"
+                            x2="343.02144199392956"
+                            y2="185.30102999566398"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
                           />
                         </g>
-                        <g transform="matrix(1,0,0,1,5.161236,-2.349485)">
+                        <g>
                           <line
                             id="g-svg-622"
                             fill="none"
-                            x1="0"
-                            y1="7.048455006504028"
-                            x2="0"
-                            y2="0"
+                            x1="345.16123599479675"
+                            y1="194.69897000433602"
+                            x2="345.16123599479675"
+                            y2="187.65051499783198"
                             class="column"
                             stroke="rgba(86,87,88,1)"
                             stroke-width="1.3010299956639813"
@@ -2449,149 +2285,118 @@
               </g>
             </g>
           </g>
-          <g id="g-svg-789" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g
+            id="g-svg-789"
+            fill="none"
+            x="0"
+            y="0"
+            transform="matrix(1,0,0,1,10,110)"
+          >
+            <g>
               <path
                 id="g-svg-356"
                 fill="rgba(65,97,128,1)"
                 class="slider-track"
                 d="M 0,0 l 500,0 l 0,25 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="25"
                 opacity="0.05"
               />
             </g>
-            <g
-              id="g-svg-357"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-sparkline-group"
-            >
+            <g id="g-svg-357" fill="none" class="slider-sparkline-group">
               <g
                 id="g-svg-358"
                 fill="none"
+                x="0"
+                y="0"
                 width="500"
                 height="25"
-                transform="matrix(1,0,0,1,0,0)"
                 class="slider-sparkline"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path id="g-svg-359" fill="none" class="container" />
                 </g>
                 <g
                   id="g-svg-360"
                   fill="none"
                   class="spark sparkline"
-                  transform="matrix(1,0,0,1,0,0)"
+                  x="0"
+                  y="0"
                 >
-                  <g id="g-svg-361" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,0,5)">
+                  <g id="g-svg-361" fill="none">
+                    <g>
                       <path
                         id="g-svg-676"
                         fill="none"
                         class="line"
                         stroke="rgba(212,229,253,1)"
-                        d="M 0,6.666666666666667 C 0 6.666666666666667,33.135422238752426 17.333333333333336,55.55555555555555 17.333333333333336 C 77.57986668319685 17.333333333333336,88.88888888888889 16.533333333333335,111.1111111111111 16 C 133.33333333333331 15.466666666666665,144.81551362720143 16,166.66666666666666 14.666666666666668 C 189.25995807164585 13.288048866243745,199.70514402055812 0,222.2222222222222 0 C 244.14958846500255 0,255.55555555555554 3.999999999999999,277.77777777777777 6.666666666666667 C 300 9.333333333333332,311.1111111111111 10.666666666666671,333.3333333333333 13.333333333333336 C 355.55555555555554 16.000000000000004,366.61596289148514 20,388.8888888888889 20 C 411.0604073359296 20,422.3481232795594 18.6515585397862,444.4444444444444 16 C 466.79256772400385 13.318225206452865,500 6.666666666666667,500 6.666666666666667"
+                        d="M 0,11.666666666666666 C 0 11.666666666666666,33.135422238752426 22.333333333333336,55.55555555555555 22.333333333333336 C 77.57986668319685 22.333333333333336,88.88888888888889 21.533333333333335,111.1111111111111 21 C 133.33333333333331 20.466666666666665,144.81551362720143 21,166.66666666666666 19.666666666666668 C 189.25995807164585 18.288048866243745,199.70514402055812 4.999999999999999,222.2222222222222 4.999999999999999 C 244.14958846500255 4.999999999999999,255.55555555555554 8.999999999999998,277.77777777777777 11.666666666666666 C 300 14.333333333333332,311.1111111111111 15.666666666666671,333.3333333333333 18.333333333333336 C 355.55555555555554 21.000000000000004,366.61596289148514 25,388.8888888888889 25 C 411.0604073359296 25,422.3481232795594 23.6515585397862,444.4444444444444 21 C 466.79256772400385 18.318225206452865,500 11.666666666666666,500 11.666666666666666"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,0,5)">
+                    <g>
                       <path
                         id="g-svg-677"
                         fill="rgba(212,229,253,1)"
                         class="area"
-                        d="M 0,6.666666666666667 C 0 6.666666666666667,33.135422238752426 17.333333333333336,55.55555555555555 17.333333333333336 C 77.57986668319685 17.333333333333336,88.88888888888889 16.533333333333335,111.1111111111111 16 C 133.33333333333331 15.466666666666665,144.81551362720143 16,166.66666666666666 14.666666666666668 C 189.25995807164585 13.288048866243745,199.70514402055812 0,222.2222222222222 0 C 244.14958846500255 0,255.55555555555554 3.999999999999999,277.77777777777777 6.666666666666667 C 300 9.333333333333332,311.1111111111111 10.666666666666671,333.3333333333333 13.333333333333336 C 355.55555555555554 16.000000000000004,366.61596289148514 20,388.8888888888889 20 C 411.0604073359296 20,422.3481232795594 18.6515585397862,444.4444444444444 16 C 466.79256772400385 13.318225206452865,500 6.666666666666667,500 6.666666666666667 L 500,20 L 0,20 Z"
+                        d="M 0,11.666666666666666 C 0 11.666666666666666,33.135422238752426 22.333333333333336,55.55555555555555 22.333333333333336 C 77.57986668319685 22.333333333333336,88.88888888888889 21.533333333333335,111.1111111111111 21 C 133.33333333333331 20.466666666666665,144.81551362720143 21,166.66666666666666 19.666666666666668 C 189.25995807164585 18.288048866243745,199.70514402055812 4.999999999999999,222.2222222222222 4.999999999999999 C 244.14958846500255 4.999999999999999,255.55555555555554 8.999999999999998,277.77777777777777 11.666666666666666 C 300 14.333333333333332,311.1111111111111 15.666666666666671,333.3333333333333 18.333333333333336 C 355.55555555555554 21.000000000000004,366.61596289148514 25,388.8888888888889 25 C 411.0604073359296 25,422.3481232795594 23.6515585397862,444.4444444444444 21 C 466.79256772400385 18.318225206452865,500 11.666666666666666,500 11.666666666666666 L 500,25 L 0,25 Z"
                         stroke-width="0"
                       />
                     </g>
                   </g>
-                  <g
-                    id="g-svg-362"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                  />
+                  <g id="g-svg-362" fill="none" />
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-363"
                 fill="rgba(0,0,0,0)"
                 class="slider-brush-area"
                 d="M 0,0 l 500,0 l 0,25 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="25"
               />
             </g>
-            <g
-              id="g-svg-364"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-foreground"
-            >
+            <g id="g-svg-364" fill="none" class="slider-foreground">
               <g
                 id="g-svg-380"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,250,12.500000)"
                 class="slider-handle end-handle"
               >
-                <g
-                  id="g-svg-381"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,-12.500000)">
+                <g id="g-svg-381" fill="none" class="handle-icon-group">
+                  <g>
                     <line
                       id="g-svg-680"
                       fill="none"
                       x1="0"
-                      y1="0"
+                      y1="-12.5"
                       x2="0"
-                      y2="25"
+                      y2="12.5"
                       stroke-width="2"
                       stroke="rgba(200,200,200,1)"
                       class="handle-icon"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-386"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-386" fill="none" class="handle-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g
-          id="g-svg-793"
-          fill="none"
-          height="100"
-          width="500"
-          transform="matrix(1,0,0,1,10,220)"
-        >
-          <g id="g-svg-794" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-681"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid-group"
-            >
-              <g
-                id="g-svg-682"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-683"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,25)">
+        <g id="g-svg-793" fill="none" x="10" y="220" height="100" width="500">
+          <g id="g-svg-794" fill="none">
+            <g id="g-svg-681" fill="none" class="axis-grid-group">
+              <g id="g-svg-682" fill="none" class="axis-grid">
+                <g id="g-svg-683" fill="none" class="grid-line-group">
+                  <g>
                     <path
                       id="g-svg-947"
                       fill="none"
@@ -2599,10 +2404,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 10,245 L 10,245"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,50,25)">
+                  <g>
                     <path
                       id="g-svg-948"
                       fill="none"
@@ -2610,10 +2415,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 60,245 L 60,245"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,100,25)">
+                  <g>
                     <path
                       id="g-svg-949"
                       fill="none"
@@ -2621,10 +2426,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 110,245 L 110,245"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,25)">
+                  <g>
                     <path
                       id="g-svg-950"
                       fill="none"
@@ -2632,10 +2437,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 160,245 L 160,245"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,200,25)">
+                  <g>
                     <path
                       id="g-svg-951"
                       fill="none"
@@ -2643,10 +2448,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 210,245 L 210,245"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,250,25)">
+                  <g>
                     <path
                       id="g-svg-952"
                       fill="none"
@@ -2654,10 +2459,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 260,245 L 260,245"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,300,25)">
+                  <g>
                     <path
                       id="g-svg-953"
                       fill="none"
@@ -2665,10 +2470,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 310,245 L 310,245"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,350,25)">
+                  <g>
                     <path
                       id="g-svg-954"
                       fill="none"
@@ -2676,10 +2481,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 360,245 L 360,245"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,400,25)">
+                  <g>
                     <path
                       id="g-svg-955"
                       fill="none"
@@ -2687,10 +2492,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 410,245 L 410,245"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,450,25)">
+                  <g>
                     <path
                       id="g-svg-956"
                       fill="none"
@@ -2698,10 +2503,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 460,245 L 460,245"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,500,25)">
+                  <g>
                     <path
                       id="g-svg-957"
                       fill="none"
@@ -2709,57 +2514,37 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 510,245 L 510,245"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-684"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
+                <g id="g-svg-684" fill="none" class="grid-region-group" />
               </g>
             </g>
-            <g
-              id="g-svg-685"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-686"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,25)">
+            <g id="g-svg-685" fill="none" class="axis-main-group">
+              <g id="g-svg-686" fill="none" class="axis-line-group">
+                <g>
                   <line
                     id="g-svg-687"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="500"
-                    y2="0"
+                    x1="10"
+                    y1="245"
+                    x2="510"
+                    y2="245"
                     class="axis-line axis-line"
                     stroke-width="1"
                     stroke="rgba(202,205,209,1)"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-688"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
+              <g id="g-svg-688" fill="none" class="axis-tick-group">
                 <g
                   id="g-svg-958"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,25)"
+                  transform="matrix(1,0,0,1,10,245)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-969"
                       fill="none"
@@ -2776,10 +2561,10 @@
                 <g
                   id="g-svg-959"
                   fill="none"
-                  transform="matrix(1,0,0,1,50,25)"
+                  transform="matrix(1,0,0,1,60,245)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-970"
                       fill="none"
@@ -2796,10 +2581,10 @@
                 <g
                   id="g-svg-960"
                   fill="none"
-                  transform="matrix(1,0,0,1,100,25)"
+                  transform="matrix(1,0,0,1,110,245)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-971"
                       fill="none"
@@ -2816,10 +2601,10 @@
                 <g
                   id="g-svg-961"
                   fill="none"
-                  transform="matrix(1,0,0,1,150,25)"
+                  transform="matrix(1,0,0,1,160,245)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-972"
                       fill="none"
@@ -2836,10 +2621,10 @@
                 <g
                   id="g-svg-962"
                   fill="none"
-                  transform="matrix(1,0,0,1,200,25)"
+                  transform="matrix(1,0,0,1,210,245)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-973"
                       fill="none"
@@ -2856,10 +2641,10 @@
                 <g
                   id="g-svg-963"
                   fill="none"
-                  transform="matrix(1,0,0,1,250,25)"
+                  transform="matrix(1,0,0,1,260,245)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-974"
                       fill="none"
@@ -2876,10 +2661,10 @@
                 <g
                   id="g-svg-964"
                   fill="none"
-                  transform="matrix(1,0,0,1,300,25)"
+                  transform="matrix(1,0,0,1,310,245)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-975"
                       fill="none"
@@ -2896,10 +2681,10 @@
                 <g
                   id="g-svg-965"
                   fill="none"
-                  transform="matrix(1,0,0,1,350,25)"
+                  transform="matrix(1,0,0,1,360,245)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-976"
                       fill="none"
@@ -2916,10 +2701,10 @@
                 <g
                   id="g-svg-966"
                   fill="none"
-                  transform="matrix(1,0,0,1,400,25)"
+                  transform="matrix(1,0,0,1,410,245)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-977"
                       fill="none"
@@ -2936,10 +2721,10 @@
                 <g
                   id="g-svg-967"
                   fill="none"
-                  transform="matrix(1,0,0,1,450,25)"
+                  transform="matrix(1,0,0,1,460,245)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-978"
                       fill="none"
@@ -2956,10 +2741,10 @@
                 <g
                   id="g-svg-968"
                   fill="none"
-                  transform="matrix(1,0,0,1,500,25)"
+                  transform="matrix(1,0,0,1,510,245)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-979"
                       fill="none"
@@ -2974,19 +2759,14 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-689"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
+              <g id="g-svg-689" fill="none" class="axis-label-group">
                 <g
                   id="g-svg-980"
                   fill="none"
-                  transform="matrix(1,0,0,1,5,28)"
+                  transform="matrix(1,0,0,1,10,260)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-990"
                       fill="rgba(110,110,110,1)"
@@ -3013,10 +2793,10 @@
                 <g
                   id="g-svg-981"
                   fill="none"
-                  transform="matrix(1,0,0,1,55,28)"
+                  transform="matrix(1,0,0,1,60,260)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-991"
                       fill="rgba(110,110,110,1)"
@@ -3040,10 +2820,10 @@
                 <g
                   id="g-svg-982"
                   fill="none"
-                  transform="matrix(1,0,0,1,105,28)"
+                  transform="matrix(1,0,0,1,110,260)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-992"
                       fill="rgba(110,110,110,1)"
@@ -3067,10 +2847,10 @@
                 <g
                   id="g-svg-983"
                   fill="none"
-                  transform="matrix(1,0,0,1,155,28)"
+                  transform="matrix(1,0,0,1,160,260)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-993"
                       fill="rgba(110,110,110,1)"
@@ -3094,10 +2874,10 @@
                 <g
                   id="g-svg-984"
                   fill="none"
-                  transform="matrix(1,0,0,1,205,28)"
+                  transform="matrix(1,0,0,1,210,260)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-994"
                       fill="rgba(110,110,110,1)"
@@ -3121,10 +2901,10 @@
                 <g
                   id="g-svg-985"
                   fill="none"
-                  transform="matrix(1,0,0,1,255,28)"
+                  transform="matrix(1,0,0,1,260,260)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-995"
                       fill="rgba(110,110,110,1)"
@@ -3148,10 +2928,10 @@
                 <g
                   id="g-svg-986"
                   fill="none"
-                  transform="matrix(1,0,0,1,305,28)"
+                  transform="matrix(1,0,0,1,310,260)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-996"
                       fill="rgba(110,110,110,1)"
@@ -3175,10 +2955,10 @@
                 <g
                   id="g-svg-987"
                   fill="none"
-                  transform="matrix(1,0,0,1,355,28)"
+                  transform="matrix(1,0,0,1,360,260)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-997"
                       fill="rgba(110,110,110,1)"
@@ -3202,10 +2982,10 @@
                 <g
                   id="g-svg-988"
                   fill="none"
-                  transform="matrix(1,0,0,1,405,28)"
+                  transform="matrix(1,0,0,1,410,260)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-998"
                       fill="rgba(110,110,110,1)"
@@ -3229,10 +3009,10 @@
                 <g
                   id="g-svg-989"
                   fill="none"
-                  transform="matrix(1,0,0,1,455,28)"
+                  transform="matrix(1,0,0,1,460,260)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-999"
                       fill="rgba(110,110,110,1)"
@@ -3258,248 +3038,228 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-690"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-title-group"
-            />
+            <g id="g-svg-690" fill="none" class="axis-title-group" />
           </g>
-          <g
-            id="g-svg-796"
-            fill="none"
-            width="500"
-            height="40"
-            transform="matrix(1,0,0,1,0,60)"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-796" fill="none" x="10" y="280" width="500" height="40">
+            <g>
               <path
                 id="g-svg-797"
                 fill="rgba(251,253,255,1)"
-                d="M 0,0 l 500,0 l 0,40 l-500 0 z"
+                d="M 10,280 l 500,0 l 0,40 l-500 0 z"
+                x="10"
+                y="280"
                 width="500"
                 height="40"
                 stroke="rgba(235,237,240,1)"
               />
             </g>
-            <g id="g-svg-798" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g id="g-svg-840" fill="none" transform="matrix(1,0,0,1,170,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+            <g id="g-svg-798" fill="none">
+              <g id="g-svg-840" fill="none" x="180" y="300">
+                <g>
                   <path
                     id="g-svg-841"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 174,290 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="170"
+                    y="290"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-842" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-4.698970,-4.698970)">
+                <g id="g-svg-842" fill="none">
+                  <g>
                     <path
                       id="g-svg-843"
                       fill="none"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3010299956639813"
-                      d="M 1.3762964496778385,8.021643558994198 A 4.698970004336019 4.698970004336019 0 1 1 8.0216435589942 8.021643558994198"
+                      d="M 176.67732644534183,303.3226735546582 A 4.698970004336019 4.698970004336019 0 1 1 183.32267355465817 303.3226735546582"
                     />
-                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.376296,8.021644)">
+                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,176.677322,303.322662)">
                       <path
                         id="g-svg-845"
                         fill="rgba(86,87,88,1)"
-                        d="M 3.6020599913279625,3.6020599913279625 L 0,1.8010299956639813 L 3.6020599913279625,0 Z"
-                        transform="translate(-1.8010299956639813,-1.8010299956639813)"
+                        d="M 1.8010299956639813,1.8010299956639813 L -1.8010299956639813,0 L 1.8010299956639813,-1.8010299956639813 Z"
                       />
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-874" fill="none" transform="matrix(1,0,0,1,210,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-874" fill="none" x="220" y="300">
+                <g>
                   <path id="g-svg-875" fill="none" />
                 </g>
-                <g id="g-svg-876" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-876" fill="none">
+                  <g>
                     <line
                       id="g-svg-877"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="220"
+                      y1="294"
+                      x2="220"
+                      y2="306"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-882" fill="none" transform="matrix(1,0,0,1,230,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-882" fill="none" x="240" y="300">
+                <g>
                   <path
                     id="g-svg-883"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 234,290 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="230"
+                    y="290"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-884" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-884" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-885"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 0,3.464101615137755 6,6.92820323027551 6,3.464101615137755 12,0 12,6.92820323027551 6,3.464101615137755"
+                      points="240,300 240,296.53589838486226 234,300 240,303.46410161513774 240,300 246,296.53589838486226 246,303.46410161513774 240,300"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-890" fill="none" transform="matrix(1,0,0,1,250,20)">
-                <g id="g-svg-891" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-892"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-890" fill="none" x="260" y="300">
+                <g id="g-svg-891" fill="none">
+                  <g id="g-svg-892" fill="none" x="260" y="300" class="icon">
+                    <g>
                       <path
                         id="g-svg-893"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 254,290 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="250"
+                        y="290"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-894"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-2.771281,-4.800000)">
+                    <g id="g-svg-894" fill="none">
+                      <g>
                         <polygon
                           id="g-svg-895"
                           fill="rgba(86,87,88,1)"
-                          points="8.313843876330612,4.800000000000001 0,0 0,9.600000000000001 8.313843876330612,4.800000000000001"
+                          points="265.54256258422043,300 257.2287187078898,295.2 257.2287187078898,304.8 265.54256258422043,300"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-900" fill="none" transform="matrix(1,0,0,1,270,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-900" fill="none" x="280" y="300">
+                <g>
                   <path
                     id="g-svg-901"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 274,290 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="270"
+                    y="290"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-902" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-902" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-903"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 12,3.464101615137755 6,6.92820323027551 6,3.464101615137755 0,0 0,6.92820323027551 6,3.464101615137755"
+                      points="280,300 280,296.53589838486226 286,300 280,303.46410161513774 280,300 274,296.53589838486226 274,303.46410161513774 280,300"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-908" fill="none" transform="matrix(1,0,0,1,290,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-908" fill="none" x="300" y="300">
+                <g>
                   <path id="g-svg-909" fill="none" />
                 </g>
-                <g id="g-svg-910" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-910" fill="none">
+                  <g>
                     <line
                       id="g-svg-911"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="300"
+                      y1="294"
+                      x2="300"
+                      y2="306"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-916" fill="none" transform="matrix(1,0,0,1,310,20)">
-                <g id="g-svg-917" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-918"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-916" fill="none" x="320" y="300">
+                <g id="g-svg-917" fill="none">
+                  <g id="g-svg-918" fill="none" x="320" y="300" class="icon">
+                    <g>
                       <path
                         id="g-svg-919"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 314,290 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="310"
+                        y="290"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-920"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,-6)">
+                    <g id="g-svg-920" fill="none">
+                      <g>
                         <line
                           id="g-svg-921"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="320"
+                          y1="294"
+                          x2="320"
+                          y2="306"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,-8.602060,0)">
+                      <g>
                         <line
                           id="g-svg-922"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="6"
-                          y2="0"
+                          x1="311.39794000867204"
+                          y1="300"
+                          x2="317.39794000867204"
+                          y2="300"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(-1,0,-0,-1,6,0)">
+                        <g transform="matrix(-1,0,-0,-1,317.397949,300)">
                           <path
                             id="g-svg-933"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
-                      <g transform="matrix(1,0,0,1,2.602060,0)">
+                      <g>
                         <line
                           id="g-svg-925"
                           fill="none"
-                          x1="6"
-                          y1="0"
-                          x2="0"
-                          y2="0"
+                          x1="328.60205999132796"
+                          y1="300"
+                          x2="322.60205999132796"
+                          y2="300"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(1,0,0,1,0,0)">
+                        <g transform="matrix(1,0,0,1,322.602051,300)">
                           <path
                             id="g-svg-935"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
@@ -3507,43 +3267,36 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-936" fill="none" transform="matrix(1,0,0,1,330,20)">
-                <g id="g-svg-937" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-938"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-936" fill="none" x="340" y="300">
+                <g id="g-svg-937" fill="none">
+                  <g id="g-svg-938" fill="none" x="340" y="300" class="icon">
+                    <g>
                       <path
                         id="g-svg-939"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 334,290 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="330"
+                        y="290"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-940"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g id="g-svg-940" fill="none">
+                      <g>
                         <polyline
                           id="g-svg-941"
                           fill="none"
-                          points="0,0 0,12 12,12"
+                          points="334,294 334,306 346,306"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,-4.698970,-4.698970)">
+                      <g>
                         <polyline
                           id="g-svg-942"
                           fill="none"
-                          points="0,8.096910013008056 2.024227503252014,4.048455006504028 4.048455006504028,8.096910013008056 8.096910013008056,0"
+                          points="335.30102999566395,303.39794000867204 337.32525749891596,299.349485002168 339.34948500216797,303.39794000867204 343.397940008672,295.30102999566395"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
@@ -3554,163 +3307,183 @@
               </g>
             </g>
           </g>
-          <g id="g-svg-795" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g
+            id="g-svg-795"
+            fill="none"
+            x="0"
+            y="0"
+            transform="matrix(1,0,0,1,10,220)"
+          >
+            <g>
               <path
                 id="g-svg-691"
                 fill="rgba(65,97,128,1)"
                 class="slider-track"
                 d="M 0,0 l 500,0 l 0,25 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="25"
                 opacity="0.05"
               />
             </g>
-            <g
-              id="g-svg-692"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-sparkline-group"
-            >
+            <g id="g-svg-692" fill="none" class="slider-sparkline-group">
               <g
                 id="g-svg-693"
                 fill="none"
+                x="0"
+                y="0"
                 width="500"
                 height="25"
-                transform="matrix(1,0,0,1,0,0)"
                 class="slider-sparkline"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path id="g-svg-694" fill="none" class="container" />
                 </g>
                 <g
                   id="g-svg-1000"
                   fill="none"
                   class="spark sparkcolumn"
-                  transform="matrix(1,0,0,1,0,0)"
+                  x="0"
+                  y="0"
                 >
-                  <g
-                    id="g-svg-1001"
-                    name="columns"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g transform="matrix(1,0,0,1,2.500000,11.666667)">
+                  <g id="g-svg-1001" name="columns" fill="none">
+                    <g>
                       <path
                         id="g-svg-1002"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,13.333333333333332 l-45 0 z"
+                        d="M 2.5,11.666666666666666 l 45,0 l 0,13.333333333333332 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="2.5"
+                        y="11.666666666666666"
                         width="45"
                         height="13.333333333333332"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,52.500000,22.333334)">
+                    <g>
                       <path
                         id="g-svg-1003"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,2.6666666666666665 l-45 0 z"
+                        d="M 52.5,22.333333333333336 l 45,0 l 0,2.6666666666666665 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="52.5"
+                        y="22.333333333333336"
                         width="45"
                         height="2.6666666666666665"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,102.500000,21)">
+                    <g>
                       <path
                         id="g-svg-1004"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,4 l-45 0 z"
+                        d="M 102.5,21 l 45,0 l 0,4 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="102.5"
+                        y="21"
                         width="45"
                         height="4"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,152.500000,19.666666)">
+                    <g>
                       <path
                         id="g-svg-1005"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,5.333333333333333 l-45 0 z"
+                        d="M 152.5,19.666666666666668 l 45,0 l 0,5.333333333333333 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="152.5"
+                        y="19.666666666666668"
                         width="45"
                         height="5.333333333333333"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,202.500000,5)">
+                    <g>
                       <path
                         id="g-svg-1006"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,20 l-45 0 z"
+                        d="M 202.5,4.999999999999999 l 45,0 l 0,20 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="202.5"
+                        y="4.999999999999999"
                         width="45"
                         height="20"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,252.500000,11.666667)">
+                    <g>
                       <path
                         id="g-svg-1007"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,13.333333333333332 l-45 0 z"
+                        d="M 252.5,11.666666666666666 l 45,0 l 0,13.333333333333332 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="252.5"
+                        y="11.666666666666666"
                         width="45"
                         height="13.333333333333332"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,302.500000,18.333334)">
+                    <g>
                       <path
                         id="g-svg-1008"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,6.666666666666666 l-45 0 z"
+                        d="M 302.5,18.333333333333336 l 45,0 l 0,6.666666666666666 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="302.5"
+                        y="18.333333333333336"
                         width="45"
                         height="6.666666666666666"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,352.500000,25)">
+                    <g>
                       <path
                         id="g-svg-1009"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,0 l-45 0 z"
+                        d="M 352.5,25 l 45,0 l 0,0 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="352.5"
+                        y="25"
                         width="45"
                         height="0"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,402.500000,21)">
+                    <g>
                       <path
                         id="g-svg-1010"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,4 l-45 0 z"
+                        d="M 402.5,21 l 45,0 l 0,4 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="402.5"
+                        y="21"
                         width="45"
                         height="4"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,452.500000,11.666667)">
+                    <g>
                       <path
                         id="g-svg-1011"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,13.333333333333332 l-45 0 z"
+                        d="M 452.5,11.666666666666666 l 45,0 l 0,13.333333333333332 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="452.5"
+                        y="11.666666666666666"
                         width="45"
                         height="13.333333333333332"
                       />
@@ -3719,23 +3492,20 @@
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-698"
                 fill="rgba(0,0,0,0)"
                 class="slider-brush-area"
                 d="M 0,0 l 500,0 l 0,25 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="25"
               />
             </g>
-            <g
-              id="g-svg-699"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-foreground"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-699" fill="none" class="slider-foreground">
+              <g>
                 <path
                   id="g-svg-700"
                   fill="rgba(255,255,255,1)"
@@ -3747,95 +3517,97 @@
                   width="100"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,100,0)">
+              <g>
                 <path
                   id="g-svg-701"
                   fill="rgba(255,255,255,1)"
                   class="slider-selection"
                   visibility="hidden"
                   fill-opacity="0.5"
-                  d="M 0,0 l 249.99999999999997,0 l 0,25 l-249.99999999999997 0 z"
+                  d="M 100,0 l 249.99999999999997,0 l 0,25 l-249.99999999999997 0 z"
                   height="25"
                   width="249.99999999999997"
+                  x="100"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,350,0)">
+              <g>
                 <path
                   id="g-svg-702"
                   fill="rgba(255,255,255,1)"
                   class="slider-selection"
                   visibility="visible"
                   fill-opacity="0.5"
-                  d="M 0,0 l 150.00000000000003,0 l 0,25 l-150.00000000000003 0 z"
+                  d="M 350,0 l 150.00000000000003,0 l 0,25 l-150.00000000000003 0 z"
                   height="25"
+                  x="350"
                   width="150.00000000000003"
                 />
               </g>
               <g
                 id="g-svg-705"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,95,12.500000)"
                 class="slider-handle start-handle"
               >
-                <g
-                  id="g-svg-706"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
+                <g id="g-svg-706" fill="none" class="handle-icon-group">
                   <g
                     id="g-svg-1014"
                     fill="none"
+                    x="0"
+                    y="0"
                     width="10"
                     height="25"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="handle-icon"
                   >
-                    <g transform="matrix(1,0,0,1,-5,-12.500000)">
+                    <g>
                       <path
                         id="g-svg-1015"
                         fill="rgba(255,255,255,1)"
                         class="background"
-                        d="M 0,0 l 10,0 l 0,25 l-10 0 z"
+                        d="M -5,-12.5 l 10,0 l 0,25 l-10 0 z"
+                        x="-5"
+                        y="-12.5"
                         width="10"
                         height="25"
                         fill-opacity="0.5"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-1,-2.083333)">
+                    <g>
                       <line
                         id="g-svg-1016"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="4.166666666666667"
+                        x1="-1"
+                        y1="-2.0833333333333335"
+                        x2="-1"
+                        y2="2.0833333333333335"
                         class="icon-left-line"
                         stroke="rgba(154,154,154,1)"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,1,-2.083333)">
+                    <g>
                       <line
                         id="g-svg-1017"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="4.166666666666667"
+                        x1="1"
+                        y1="-2.0833333333333335"
+                        x2="1"
+                        y2="2.0833333333333335"
                         class="icon-right-line"
                         stroke="rgba(154,154,154,1)"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,5,-12.500000)">
+                    <g>
                       <line
                         id="g-svg-1018"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="25"
+                        x1="5"
+                        y1="-12.5"
+                        x2="5"
+                        y2="12.5"
                         class="border"
                         stroke="rgba(232,232,232,1)"
                         stroke-width="1"
@@ -3843,78 +3615,73 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-711"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-711" fill="none" class="handle-label-group" />
               </g>
               <g
                 id="g-svg-715"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,355,12.500000)"
                 class="slider-handle end-handle"
               >
-                <g
-                  id="g-svg-716"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
+                <g id="g-svg-716" fill="none" class="handle-icon-group">
                   <g
                     id="g-svg-1021"
                     fill="none"
+                    x="0"
+                    y="0"
                     width="10"
                     height="25"
-                    transform="matrix(1,0,0,1,0,0)"
                     class="handle-icon"
                   >
-                    <g transform="matrix(1,0,0,1,-5,-12.500000)">
+                    <g>
                       <path
                         id="g-svg-1022"
                         fill="rgba(255,255,255,1)"
                         class="background"
-                        d="M 0,0 l 10,0 l 0,25 l-10 0 z"
+                        d="M -5,-12.5 l 10,0 l 0,25 l-10 0 z"
+                        x="-5"
+                        y="-12.5"
                         width="10"
                         height="25"
                         fill-opacity="0.5"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-1,-2.083333)">
+                    <g>
                       <line
                         id="g-svg-1023"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="4.166666666666667"
+                        x1="-1"
+                        y1="-2.0833333333333335"
+                        x2="-1"
+                        y2="2.0833333333333335"
                         class="icon-left-line"
                         stroke="rgba(154,154,154,1)"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,1,-2.083333)">
+                    <g>
                       <line
                         id="g-svg-1024"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="4.166666666666667"
+                        x1="1"
+                        y1="-2.0833333333333335"
+                        x2="1"
+                        y2="2.0833333333333335"
                         class="icon-right-line"
                         stroke="rgba(154,154,154,1)"
                         stroke-width="1"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-5,-12.500000)">
+                    <g>
                       <line
                         id="g-svg-1025"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="25"
+                        x1="-5"
+                        y1="-12.5"
+                        x2="-5"
+                        y2="12.5"
                         class="border"
                         stroke="rgba(232,232,232,1)"
                         stroke-width="1"
@@ -3922,43 +3689,17 @@
                     </g>
                   </g>
                 </g>
-                <g
-                  id="g-svg-721"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-721" fill="none" class="handle-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g
-          id="g-svg-799"
-          fill="none"
-          height="100"
-          width="500"
-          transform="matrix(1,0,0,1,10,330)"
-        >
-          <g id="g-svg-800" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-1026"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid-group"
-            >
-              <g
-                id="g-svg-1027"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-1028"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,25)">
+        <g id="g-svg-799" fill="none" x="10" y="330" height="100" width="500">
+          <g id="g-svg-800" fill="none">
+            <g id="g-svg-1026" fill="none" class="axis-grid-group">
+              <g id="g-svg-1027" fill="none" class="axis-grid">
+                <g id="g-svg-1028" fill="none" class="grid-line-group">
+                  <g>
                     <path
                       id="g-svg-1293"
                       fill="none"
@@ -3966,10 +3707,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 10,355 L 10,355"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,50,25)">
+                  <g>
                     <path
                       id="g-svg-1294"
                       fill="none"
@@ -3977,10 +3718,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 60,355 L 60,355"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,100,25)">
+                  <g>
                     <path
                       id="g-svg-1295"
                       fill="none"
@@ -3988,10 +3729,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 110,355 L 110,355"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,150,25)">
+                  <g>
                     <path
                       id="g-svg-1296"
                       fill="none"
@@ -3999,10 +3740,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 160,355 L 160,355"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,200,25)">
+                  <g>
                     <path
                       id="g-svg-1297"
                       fill="none"
@@ -4010,10 +3751,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 210,355 L 210,355"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,250,25)">
+                  <g>
                     <path
                       id="g-svg-1298"
                       fill="none"
@@ -4021,10 +3762,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 260,355 L 260,355"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,300,25)">
+                  <g>
                     <path
                       id="g-svg-1299"
                       fill="none"
@@ -4032,10 +3773,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 310,355 L 310,355"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,350,25)">
+                  <g>
                     <path
                       id="g-svg-1300"
                       fill="none"
@@ -4043,10 +3784,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 360,355 L 360,355"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,400,25)">
+                  <g>
                     <path
                       id="g-svg-1301"
                       fill="none"
@@ -4054,10 +3795,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 410,355 L 410,355"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,450,25)">
+                  <g>
                     <path
                       id="g-svg-1302"
                       fill="none"
@@ -4065,10 +3806,10 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 460,355 L 460,355"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,500,25)">
+                  <g>
                     <path
                       id="g-svg-1303"
                       fill="none"
@@ -4076,57 +3817,37 @@
                       stroke="rgba(217,217,217,1)"
                       stroke-width="1"
                       stroke-dasharray="4,4"
-                      d="M 0,0 L 0,0"
+                      d="M 510,355 L 510,355"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-1029"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
+                <g id="g-svg-1029" fill="none" class="grid-region-group" />
               </g>
             </g>
-            <g
-              id="g-svg-1030"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-1031"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,25)">
+            <g id="g-svg-1030" fill="none" class="axis-main-group">
+              <g id="g-svg-1031" fill="none" class="axis-line-group">
+                <g>
                   <line
                     id="g-svg-1032"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="500"
-                    y2="0"
+                    x1="10"
+                    y1="355"
+                    x2="510"
+                    y2="355"
                     class="axis-line axis-line"
                     stroke-width="1"
                     stroke="rgba(202,205,209,1)"
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-1033"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              >
+              <g id="g-svg-1033" fill="none" class="axis-tick-group">
                 <g
                   id="g-svg-1304"
                   fill="none"
-                  transform="matrix(1,0,0,1,0,25)"
+                  transform="matrix(1,0,0,1,10,355)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-1315"
                       fill="none"
@@ -4143,10 +3864,10 @@
                 <g
                   id="g-svg-1305"
                   fill="none"
-                  transform="matrix(1,0,0,1,50,25)"
+                  transform="matrix(1,0,0,1,60,355)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-1316"
                       fill="none"
@@ -4163,10 +3884,10 @@
                 <g
                   id="g-svg-1306"
                   fill="none"
-                  transform="matrix(1,0,0,1,100,25)"
+                  transform="matrix(1,0,0,1,110,355)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-1317"
                       fill="none"
@@ -4183,10 +3904,10 @@
                 <g
                   id="g-svg-1307"
                   fill="none"
-                  transform="matrix(1,0,0,1,150,25)"
+                  transform="matrix(1,0,0,1,160,355)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-1318"
                       fill="none"
@@ -4203,10 +3924,10 @@
                 <g
                   id="g-svg-1308"
                   fill="none"
-                  transform="matrix(1,0,0,1,200,25)"
+                  transform="matrix(1,0,0,1,210,355)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-1319"
                       fill="none"
@@ -4223,10 +3944,10 @@
                 <g
                   id="g-svg-1309"
                   fill="none"
-                  transform="matrix(1,0,0,1,250,25)"
+                  transform="matrix(1,0,0,1,260,355)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-1320"
                       fill="none"
@@ -4243,10 +3964,10 @@
                 <g
                   id="g-svg-1310"
                   fill="none"
-                  transform="matrix(1,0,0,1,300,25)"
+                  transform="matrix(1,0,0,1,310,355)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-1321"
                       fill="none"
@@ -4263,10 +3984,10 @@
                 <g
                   id="g-svg-1311"
                   fill="none"
-                  transform="matrix(1,0,0,1,350,25)"
+                  transform="matrix(1,0,0,1,360,355)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-1322"
                       fill="none"
@@ -4283,10 +4004,10 @@
                 <g
                   id="g-svg-1312"
                   fill="none"
-                  transform="matrix(1,0,0,1,400,25)"
+                  transform="matrix(1,0,0,1,410,355)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-1323"
                       fill="none"
@@ -4303,10 +4024,10 @@
                 <g
                   id="g-svg-1313"
                   fill="none"
-                  transform="matrix(1,0,0,1,450,25)"
+                  transform="matrix(1,0,0,1,460,355)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-1324"
                       fill="none"
@@ -4323,10 +4044,10 @@
                 <g
                   id="g-svg-1314"
                   fill="none"
-                  transform="matrix(1,0,0,1,500,25)"
+                  transform="matrix(1,0,0,1,510,355)"
                   class="axis-tick"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <line
                       id="g-svg-1325"
                       fill="none"
@@ -4341,19 +4062,14 @@
                   </g>
                 </g>
               </g>
-              <g
-                id="g-svg-1034"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              >
+              <g id="g-svg-1034" fill="none" class="axis-label-group">
                 <g
                   id="g-svg-1326"
                   fill="none"
-                  transform="matrix(1,0,0,1,5,28)"
+                  transform="matrix(1,0,0,1,10,370)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-1336"
                       fill="rgba(110,110,110,1)"
@@ -4380,10 +4096,10 @@
                 <g
                   id="g-svg-1327"
                   fill="none"
-                  transform="matrix(1,0,0,1,55,28)"
+                  transform="matrix(1,0,0,1,60,370)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-1337"
                       fill="rgba(110,110,110,1)"
@@ -4407,10 +4123,10 @@
                 <g
                   id="g-svg-1328"
                   fill="none"
-                  transform="matrix(1,0,0,1,105,28)"
+                  transform="matrix(1,0,0,1,110,370)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-1338"
                       fill="rgba(110,110,110,1)"
@@ -4434,10 +4150,10 @@
                 <g
                   id="g-svg-1329"
                   fill="none"
-                  transform="matrix(1,0,0,1,155,28)"
+                  transform="matrix(1,0,0,1,160,370)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-1339"
                       fill="rgba(110,110,110,1)"
@@ -4461,10 +4177,10 @@
                 <g
                   id="g-svg-1330"
                   fill="none"
-                  transform="matrix(1,0,0,1,205,28)"
+                  transform="matrix(1,0,0,1,210,370)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-1340"
                       fill="rgba(110,110,110,1)"
@@ -4488,10 +4204,10 @@
                 <g
                   id="g-svg-1331"
                   fill="none"
-                  transform="matrix(1,0,0,1,255,28)"
+                  transform="matrix(1,0,0,1,260,370)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-1341"
                       fill="rgba(110,110,110,1)"
@@ -4515,10 +4231,10 @@
                 <g
                   id="g-svg-1332"
                   fill="none"
-                  transform="matrix(1,0,0,1,305,28)"
+                  transform="matrix(1,0,0,1,310,370)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-1342"
                       fill="rgba(110,110,110,1)"
@@ -4542,10 +4258,10 @@
                 <g
                   id="g-svg-1333"
                   fill="none"
-                  transform="matrix(1,0,0,1,355,28)"
+                  transform="matrix(1,0,0,1,360,370)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-1343"
                       fill="rgba(110,110,110,1)"
@@ -4569,10 +4285,10 @@
                 <g
                   id="g-svg-1334"
                   fill="none"
-                  transform="matrix(1,0,0,1,405,28)"
+                  transform="matrix(1,0,0,1,410,370)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-1344"
                       fill="rgba(110,110,110,1)"
@@ -4596,10 +4312,10 @@
                 <g
                   id="g-svg-1335"
                   fill="none"
-                  transform="matrix(1,0,0,1,455,28)"
+                  transform="matrix(1,0,0,1,460,370)"
                   class="axis-label"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,5,-12)">
                     <text
                       id="g-svg-1345"
                       fill="rgba(110,110,110,1)"
@@ -4625,260 +4341,240 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-1035"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-title-group"
-            />
+            <g id="g-svg-1035" fill="none" class="axis-title-group" />
           </g>
-          <g
-            id="g-svg-802"
-            fill="none"
-            width="500"
-            height="40"
-            transform="matrix(1,0,0,1,0,60)"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-802" fill="none" x="10" y="390" width="500" height="40">
+            <g>
               <path
                 id="g-svg-803"
                 fill="rgba(251,253,255,1)"
-                d="M 0,0 l 500,0 l 0,40 l-500 0 z"
+                d="M 10,390 l 500,0 l 0,40 l-500 0 z"
+                x="10"
+                y="390"
                 width="500"
                 height="40"
                 stroke="rgba(235,237,240,1)"
               />
             </g>
-            <g id="g-svg-804" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g id="g-svg-1185" fill="none" transform="matrix(1,0,0,1,170,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+            <g id="g-svg-804" fill="none">
+              <g id="g-svg-1185" fill="none" x="180" y="410">
+                <g>
                   <path
                     id="g-svg-1186"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 174,400 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="170"
+                    y="400"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-1187" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-4.698970,-4.698970)">
+                <g id="g-svg-1187" fill="none">
+                  <g>
                     <path
                       id="g-svg-1188"
                       fill="none"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3010299956639813"
-                      d="M 1.3762964496778385,8.021643558994198 A 4.698970004336019 4.698970004336019 0 1 1 8.0216435589942 8.021643558994198"
+                      d="M 176.67732644534183,413.3226735546582 A 4.698970004336019 4.698970004336019 0 1 1 183.32267355465817 413.3226735546582"
                     />
-                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.376296,8.021644)">
+                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,176.677322,413.322662)">
                       <path
                         id="g-svg-1190"
                         fill="rgba(86,87,88,1)"
-                        d="M 3.6020599913279625,3.6020599913279625 L 0,1.8010299956639813 L 3.6020599913279625,0 Z"
-                        transform="translate(-1.8010299956639813,-1.8010299956639813)"
+                        d="M 1.8010299956639813,1.8010299956639813 L -1.8010299956639813,0 L 1.8010299956639813,-1.8010299956639813 Z"
                       />
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-1219" fill="none" transform="matrix(1,0,0,1,210,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-1219" fill="none" x="220" y="410">
+                <g>
                   <path id="g-svg-1220" fill="none" />
                 </g>
-                <g id="g-svg-1221" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-1221" fill="none">
+                  <g>
                     <line
                       id="g-svg-1222"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="220"
+                      y1="404"
+                      x2="220"
+                      y2="416"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-1227" fill="none" transform="matrix(1,0,0,1,230,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-1227" fill="none" x="240" y="410">
+                <g>
                   <path
                     id="g-svg-1228"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 234,400 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="230"
+                    y="400"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-1229" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-1229" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-1230"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 0,3.464101615137755 6,6.92820323027551 6,3.464101615137755 12,0 12,6.92820323027551 6,3.464101615137755"
+                      points="240,410 240,406.53589838486226 234,410 240,413.46410161513774 240,410 246,406.53589838486226 246,413.46410161513774 240,410"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-1235" fill="none" transform="matrix(1,0,0,1,250,20)">
-                <g id="g-svg-1236" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-1237"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-1235" fill="none" x="260" y="410">
+                <g id="g-svg-1236" fill="none">
+                  <g id="g-svg-1237" fill="none" x="260" y="410" class="icon">
+                    <g>
                       <path
                         id="g-svg-1238"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 254,400 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="250"
+                        y="400"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-1239"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-2.771281,-4.800000)">
+                    <g id="g-svg-1239" fill="none">
+                      <g>
                         <polygon
                           id="g-svg-1240"
                           fill="rgba(86,87,88,1)"
-                          points="8.313843876330612,4.800000000000001 0,0 0,9.600000000000001 8.313843876330612,4.800000000000001"
+                          points="265.54256258422043,410 257.2287187078898,405.2 257.2287187078898,414.8 265.54256258422043,410"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-1245" fill="none" transform="matrix(1,0,0,1,270,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-1245" fill="none" x="280" y="410">
+                <g>
                   <path
                     id="g-svg-1246"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 274,400 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="270"
+                    y="400"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-1247" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-1247" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-1248"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 12,3.464101615137755 6,6.92820323027551 6,3.464101615137755 0,0 0,6.92820323027551 6,3.464101615137755"
+                      points="280,410 280,406.53589838486226 286,410 280,413.46410161513774 280,410 274,406.53589838486226 274,413.46410161513774 280,410"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-1253" fill="none" transform="matrix(1,0,0,1,290,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-1253" fill="none" x="300" y="410">
+                <g>
                   <path id="g-svg-1254" fill="none" />
                 </g>
-                <g id="g-svg-1255" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-1255" fill="none">
+                  <g>
                     <line
                       id="g-svg-1256"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="300"
+                      y1="404"
+                      x2="300"
+                      y2="416"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-1261" fill="none" transform="matrix(1,0,0,1,310,20)">
-                <g id="g-svg-1262" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-1263"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-1261" fill="none" x="320" y="410">
+                <g id="g-svg-1262" fill="none">
+                  <g id="g-svg-1263" fill="none" x="320" y="410" class="icon">
+                    <g>
                       <path
                         id="g-svg-1264"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 314,400 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="310"
+                        y="400"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-1265"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g id="g-svg-1265" fill="none">
+                      <g>
                         <line
                           id="g-svg-1266"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="314"
+                          y1="404"
+                          x2="314"
+                          y2="416"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6,-6)">
+                      <g>
                         <line
                           id="g-svg-1267"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="326"
+                          y1="404"
+                          x2="326"
+                          y2="416"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,-3.397940,0)">
+                      <g>
                         <line
                           id="g-svg-1268"
                           fill="none"
-                          x1="3.3979400086720375"
-                          y1="0"
-                          x2="0"
-                          y2="0"
+                          x1="320"
+                          y1="410"
+                          x2="316.60205999132796"
+                          y2="410"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(1,0,0,1,0,0)">
+                        <g transform="matrix(1,0,0,1,316.602051,410)">
                           <path
                             id="g-svg-1279"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-1271"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="3.3979400086720375"
-                          y2="0"
+                          x1="320"
+                          y1="410"
+                          x2="323.39794000867204"
+                          y2="410"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(-1,0,-0,-1,3.397940,0)">
+                        <g transform="matrix(-1,0,-0,-1,323.397949,410)">
                           <path
                             id="g-svg-1281"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
@@ -4886,43 +4582,36 @@
                   </g>
                 </g>
               </g>
-              <g id="g-svg-1282" fill="none" transform="matrix(1,0,0,1,330,20)">
-                <g id="g-svg-1283" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-1284"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-1282" fill="none" x="340" y="410">
+                <g id="g-svg-1283" fill="none">
+                  <g id="g-svg-1284" fill="none" x="340" y="410" class="icon">
+                    <g>
                       <path
                         id="g-svg-1285"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 334,400 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="330"
+                        y="400"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-1286"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g id="g-svg-1286" fill="none">
+                      <g>
                         <polyline
                           id="g-svg-1287"
                           fill="none"
-                          points="0,0 0,12 12,12"
+                          points="334,404 334,416 346,416"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,-4.698970,-4.698970)">
+                      <g>
                         <polyline
                           id="g-svg-1288"
                           fill="none"
-                          points="0,8.096910013008056 2.024227503252014,4.048455006504028 4.048455006504028,8.096910013008056 8.096910013008056,0"
+                          points="335.30102999566395,413.39794000867204 337.32525749891596,409.349485002168 339.34948500216797,413.39794000867204 343.397940008672,405.30102999566395"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
@@ -4933,163 +4622,183 @@
               </g>
             </g>
           </g>
-          <g id="g-svg-801" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g
+            id="g-svg-801"
+            fill="none"
+            x="0"
+            y="0"
+            transform="matrix(1,0,0,1,10,330)"
+          >
+            <g>
               <path
                 id="g-svg-1036"
                 fill="rgba(65,97,128,1)"
                 class="slider-track"
                 d="M 0,0 l 500,0 l 0,25 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="25"
                 opacity="0.05"
               />
             </g>
-            <g
-              id="g-svg-1037"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-sparkline-group"
-            >
+            <g id="g-svg-1037" fill="none" class="slider-sparkline-group">
               <g
                 id="g-svg-1038"
                 fill="none"
+                x="0"
+                y="0"
                 width="500"
                 height="25"
-                transform="matrix(1,0,0,1,0,0)"
                 class="slider-sparkline"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path id="g-svg-1039" fill="none" class="container" />
                 </g>
                 <g
                   id="g-svg-1346"
                   fill="none"
                   class="spark sparkcolumn"
-                  transform="matrix(1,0,0,1,0,0)"
+                  x="0"
+                  y="0"
                 >
-                  <g
-                    id="g-svg-1347"
-                    name="columns"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                  >
-                    <g transform="matrix(1,0,0,1,2.500000,11.666667)">
+                  <g id="g-svg-1347" name="columns" fill="none">
+                    <g>
                       <path
                         id="g-svg-1348"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,13.333333333333332 l-45 0 z"
+                        d="M 2.5,11.666666666666666 l 45,0 l 0,13.333333333333332 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="2.5"
+                        y="11.666666666666666"
                         width="45"
                         height="13.333333333333332"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,52.500000,22.333334)">
+                    <g>
                       <path
                         id="g-svg-1349"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,2.6666666666666665 l-45 0 z"
+                        d="M 52.5,22.333333333333336 l 45,0 l 0,2.6666666666666665 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="52.5"
+                        y="22.333333333333336"
                         width="45"
                         height="2.6666666666666665"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,102.500000,21)">
+                    <g>
                       <path
                         id="g-svg-1350"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,4 l-45 0 z"
+                        d="M 102.5,21 l 45,0 l 0,4 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="102.5"
+                        y="21"
                         width="45"
                         height="4"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,152.500000,19.666666)">
+                    <g>
                       <path
                         id="g-svg-1351"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,5.333333333333333 l-45 0 z"
+                        d="M 152.5,19.666666666666668 l 45,0 l 0,5.333333333333333 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="152.5"
+                        y="19.666666666666668"
                         width="45"
                         height="5.333333333333333"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,202.500000,5)">
+                    <g>
                       <path
                         id="g-svg-1352"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,20 l-45 0 z"
+                        d="M 202.5,4.999999999999999 l 45,0 l 0,20 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="202.5"
+                        y="4.999999999999999"
                         width="45"
                         height="20"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,252.500000,11.666667)">
+                    <g>
                       <path
                         id="g-svg-1353"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,13.333333333333332 l-45 0 z"
+                        d="M 252.5,11.666666666666666 l 45,0 l 0,13.333333333333332 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="252.5"
+                        y="11.666666666666666"
                         width="45"
                         height="13.333333333333332"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,302.500000,18.333334)">
+                    <g>
                       <path
                         id="g-svg-1354"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,6.666666666666666 l-45 0 z"
+                        d="M 302.5,18.333333333333336 l 45,0 l 0,6.666666666666666 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="302.5"
+                        y="18.333333333333336"
                         width="45"
                         height="6.666666666666666"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,352.500000,25)">
+                    <g>
                       <path
                         id="g-svg-1355"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,0 l-45 0 z"
+                        d="M 352.5,25 l 45,0 l 0,0 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="352.5"
+                        y="25"
                         width="45"
                         height="0"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,402.500000,21)">
+                    <g>
                       <path
                         id="g-svg-1356"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,4 l-45 0 z"
+                        d="M 402.5,21 l 45,0 l 0,4 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="402.5"
+                        y="21"
                         width="45"
                         height="4"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,452.500000,11.666667)">
+                    <g>
                       <path
                         id="g-svg-1357"
                         fill="rgba(212,229,253,1)"
-                        d="M 0,0 l 45,0 l 0,13.333333333333332 l-45 0 z"
+                        d="M 452.5,11.666666666666666 l 45,0 l 0,13.333333333333332 l-45 0 z"
                         class="column"
                         stroke-width="0"
                         stroke="rgba(255,255,255,1)"
+                        x="452.5"
+                        y="11.666666666666666"
                         width="45"
                         height="13.333333333333332"
                       />
@@ -5098,62 +4807,51 @@
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-1043"
                 fill="rgba(0,0,0,0)"
                 class="slider-brush-area"
                 d="M 0,0 l 500,0 l 0,25 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="25"
               />
             </g>
-            <g
-              id="g-svg-1044"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-foreground"
-            >
+            <g id="g-svg-1044" fill="none" class="slider-foreground">
               <g
                 id="g-svg-1060"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,300,12.500000)"
                 class="slider-handle end-handle"
               >
-                <g
-                  id="g-svg-1061"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,-12.500000)">
+                <g id="g-svg-1061" fill="none" class="handle-icon-group">
+                  <g>
                     <line
                       id="g-svg-1360"
                       fill="none"
                       x1="0"
-                      y1="0"
+                      y1="-12.5"
                       x2="0"
-                      y2="25"
+                      y2="12.5"
                       stroke-width="2"
                       stroke="rgba(200,200,200,1)"
                       class="handle-icon"
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-1066"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-1066" fill="none" class="handle-label-group" />
               </g>
             </g>
           </g>
         </g>
       </g>
-      <g id="g-svg-166" fill="none" transform="matrix(1,0,0,1,180,60)">
-        <g id="g-svg-167" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-166" fill="none" x="180" y="60">
+        <g id="g-svg-167" fill="none" transform="matrix(1,0,0,1,180,51.071796)">
+          <g>
             <path
               id="g-svg-169"
               fill="rgba(38,38,38,1)"
@@ -5161,43 +4859,40 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-168"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-168" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-170" fill="none" transform="matrix(1,0,0,1,200,80)">
-        <g transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-170" fill="none" x="200" y="80">
+        <g>
           <path id="g-svg-171" fill="none" />
         </g>
-        <g id="g-svg-172" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-172" fill="none">
           <g
             id="g-svg-173"
             fill="none"
+            x="190"
+            y="70"
             width="20"
             height="20"
-            transform="matrix(1,0,0,1,-10,-10)"
             class="speed"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-174"
                 fill="rgba(255,255,255,1)"
-                d="M 2,0 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                d="M 192,70 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                 class="select"
                 width="20"
                 height="20"
+                x="190"
+                y="70"
                 stroke="rgba(217,217,217,1)"
-                stroke-width="0"
               />
-              <g transform="matrix(1,0,0,1,0,0.500000)">
+              <g>
                 <text
                   id="g-svg-176"
                   fill="rgba(0,0,0,1)"
@@ -5212,13 +4907,15 @@
                   stroke-width="1"
                   text-anchor="left"
                   class="value"
+                  x="190"
+                  y="70.5"
                   dy="9.5px"
                 >
                   1x
                 </text>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,24)">
+            <g transform="matrix(1,0,0,1,190,94)">
               <path
                 id="g-svg-175"
                 fill="rgba(255,255,255,1)"
@@ -5230,20 +4927,9 @@
                 filter="url(#g-filter-dropshadow-175)"
                 visibility="hidden"
               />
-              <g
-                id="g-svg-177"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="dropdown-container"
-              >
-                <g
-                  id="g-svg-178"
-                  fill="none"
-                  class="dropdown-item"
-                  width="20"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-177" fill="none" class="dropdown-container">
+                <g id="g-svg-178" fill="none" class="dropdown-item" width="20">
+                  <g>
                     <path
                       id="g-svg-179"
                       fill="rgba(230,247,255,1)"
@@ -5252,12 +4938,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-180"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-180" fill="none">
+                      <g>
                         <text
                           id="g-svg-181"
                           fill="rgba(0,0,0,1)"
@@ -5288,7 +4970,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,19)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-183"
                       fill="rgba(255,255,255,1)"
@@ -5297,12 +4979,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-184"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-184" fill="none">
+                      <g>
                         <text
                           id="g-svg-185"
                           fill="rgba(0,0,0,1)"
@@ -5333,7 +5011,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,38)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-187"
                       fill="rgba(255,255,255,1)"
@@ -5342,12 +5020,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-188"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-188" fill="none">
+                      <g>
                         <text
                           id="g-svg-189"
                           fill="rgba(0,0,0,1)"
@@ -5376,9 +5050,9 @@
           </g>
         </g>
       </g>
-      <g id="g-svg-190" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-191" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-190" fill="none" x="10" y="-10">
+        <g id="g-svg-191" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-193"
               fill="rgba(38,38,38,1)"
@@ -5386,21 +5060,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-192"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-192" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-198" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-199" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-198" fill="none" x="10" y="-10">
+        <g id="g-svg-199" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-201"
               fill="rgba(38,38,38,1)"
@@ -5408,21 +5077,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-200"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-200" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-206" fill="none" transform="matrix(1,0,0,1,240,60)">
-        <g id="g-svg-207" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-206" fill="none" x="240" y="60">
+        <g id="g-svg-207" fill="none" transform="matrix(1,0,0,1,240,51.071796)">
+          <g>
             <path
               id="g-svg-209"
               fill="rgba(38,38,38,1)"
@@ -5430,21 +5094,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-208"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-208" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-216" fill="none" transform="matrix(1,0,0,1,260,70)">
-        <g id="g-svg-217" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-216" fill="none" x="0" y="-10">
+        <g id="g-svg-217" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-219"
               fill="rgba(38,38,38,1)"
@@ -5452,21 +5111,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-218"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-218" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-224" fill="none" transform="matrix(1,0,0,1,280,60)">
-        <g id="g-svg-225" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-224" fill="none" x="280" y="60">
+        <g id="g-svg-225" fill="none" transform="matrix(1,0,0,1,280,51.071796)">
+          <g>
             <path
               id="g-svg-227"
               fill="rgba(38,38,38,1)"
@@ -5474,21 +5128,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-226"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-226" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-232" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-233" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-232" fill="none" x="10" y="-10">
+        <g id="g-svg-233" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-235"
               fill="rgba(38,38,38,1)"
@@ -5496,21 +5145,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-234"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-234" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-248" fill="none" transform="matrix(1,0,0,1,320,70)">
-        <g id="g-svg-249" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-248" fill="none" x="0" y="-10">
+        <g id="g-svg-249" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-251"
               fill="rgba(38,38,38,1)"
@@ -5518,21 +5162,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-250"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-250" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-268" fill="none" transform="matrix(1,0,0,1,340,70)">
-        <g id="g-svg-269" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-268" fill="none" x="0" y="-10">
+        <g id="g-svg-269" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-271"
               fill="rgba(38,38,38,1)"
@@ -5540,21 +5179,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-270"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-270" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-511" fill="none" transform="matrix(1,0,0,1,180,170)">
-        <g id="g-svg-512" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-511" fill="none" x="180" y="170">
+        <g
+          id="g-svg-512"
+          fill="none"
+          transform="matrix(1,0,0,1,180,161.071793)"
+        >
+          <g>
             <path
               id="g-svg-514"
               fill="rgba(38,38,38,1)"
@@ -5562,43 +5200,40 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-513"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-513" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-515" fill="none" transform="matrix(1,0,0,1,200,190)">
-        <g transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-515" fill="none" x="200" y="190">
+        <g>
           <path id="g-svg-516" fill="none" />
         </g>
-        <g id="g-svg-517" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-517" fill="none">
           <g
             id="g-svg-518"
             fill="none"
+            x="190"
+            y="180"
             width="20"
             height="20"
-            transform="matrix(1,0,0,1,-10,-10)"
             class="speed"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-519"
                 fill="rgba(255,255,255,1)"
-                d="M 2,0 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                d="M 192,180 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                 class="select"
                 width="20"
                 height="20"
+                x="190"
+                y="180"
                 stroke="rgba(217,217,217,1)"
-                stroke-width="0"
               />
-              <g transform="matrix(1,0,0,1,0,0.500000)">
+              <g>
                 <text
                   id="g-svg-521"
                   fill="rgba(0,0,0,1)"
@@ -5613,13 +5248,15 @@
                   stroke-width="1"
                   text-anchor="left"
                   class="value"
+                  x="190"
+                  y="180.5"
                   dy="9.5px"
                 >
                   1x
                 </text>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,24)">
+            <g transform="matrix(1,0,0,1,190,204)">
               <path
                 id="g-svg-520"
                 fill="rgba(255,255,255,1)"
@@ -5631,20 +5268,9 @@
                 filter="url(#g-filter-dropshadow-520)"
                 visibility="hidden"
               />
-              <g
-                id="g-svg-522"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="dropdown-container"
-              >
-                <g
-                  id="g-svg-523"
-                  fill="none"
-                  class="dropdown-item"
-                  width="20"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-522" fill="none" class="dropdown-container">
+                <g id="g-svg-523" fill="none" class="dropdown-item" width="20">
+                  <g>
                     <path
                       id="g-svg-524"
                       fill="rgba(230,247,255,1)"
@@ -5653,12 +5279,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-525"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-525" fill="none">
+                      <g>
                         <text
                           id="g-svg-526"
                           fill="rgba(0,0,0,1)"
@@ -5689,7 +5311,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,19)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-528"
                       fill="rgba(255,255,255,1)"
@@ -5698,12 +5320,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-529"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-529" fill="none">
+                      <g>
                         <text
                           id="g-svg-530"
                           fill="rgba(0,0,0,1)"
@@ -5734,7 +5352,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,38)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-532"
                       fill="rgba(255,255,255,1)"
@@ -5743,12 +5361,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-533"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-533" fill="none">
+                      <g>
                         <text
                           id="g-svg-534"
                           fill="rgba(0,0,0,1)"
@@ -5777,9 +5391,9 @@
           </g>
         </g>
       </g>
-      <g id="g-svg-535" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-536" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-535" fill="none" x="10" y="-10">
+        <g id="g-svg-536" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-538"
               fill="rgba(38,38,38,1)"
@@ -5787,21 +5401,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-537"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-537" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-543" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-544" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-543" fill="none" x="10" y="-10">
+        <g id="g-svg-544" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-546"
               fill="rgba(38,38,38,1)"
@@ -5809,21 +5418,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-545"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-545" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-551" fill="none" transform="matrix(1,0,0,1,240,170)">
-        <g id="g-svg-552" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-551" fill="none" x="240" y="170">
+        <g
+          id="g-svg-552"
+          fill="none"
+          transform="matrix(1,0,0,1,240,161.071793)"
+        >
+          <g>
             <path
               id="g-svg-554"
               fill="rgba(38,38,38,1)"
@@ -5831,21 +5439,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-553"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-553" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-561" fill="none" transform="matrix(1,0,0,1,260,180)">
-        <g id="g-svg-562" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-561" fill="none" x="0" y="-10">
+        <g id="g-svg-562" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-564"
               fill="rgba(38,38,38,1)"
@@ -5853,21 +5456,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-563"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-563" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-569" fill="none" transform="matrix(1,0,0,1,280,170)">
-        <g id="g-svg-570" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-569" fill="none" x="280" y="170">
+        <g
+          id="g-svg-570"
+          fill="none"
+          transform="matrix(1,0,0,1,280,161.071793)"
+        >
+          <g>
             <path
               id="g-svg-572"
               fill="rgba(38,38,38,1)"
@@ -5875,21 +5477,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-571"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-571" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-577" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-578" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-577" fill="none" x="10" y="-10">
+        <g id="g-svg-578" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-580"
               fill="rgba(38,38,38,1)"
@@ -5897,21 +5494,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-579"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-579" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-594" fill="none" transform="matrix(1,0,0,1,320,180)">
-        <g id="g-svg-595" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-594" fill="none" x="0" y="-10">
+        <g id="g-svg-595" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-597"
               fill="rgba(38,38,38,1)"
@@ -5919,21 +5511,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-596"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-596" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-614" fill="none" transform="matrix(1,0,0,1,340,180)">
-        <g id="g-svg-615" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-614" fill="none" x="0" y="-10">
+        <g id="g-svg-615" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-617"
               fill="rgba(38,38,38,1)"
@@ -5941,21 +5528,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-616"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-616" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-846" fill="none" transform="matrix(1,0,0,1,180,280)">
-        <g id="g-svg-847" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-846" fill="none" x="180" y="280">
+        <g
+          id="g-svg-847"
+          fill="none"
+          transform="matrix(1,0,0,1,180,271.071808)"
+        >
+          <g>
             <path
               id="g-svg-849"
               fill="rgba(38,38,38,1)"
@@ -5963,43 +5549,40 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-848"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-848" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-850" fill="none" transform="matrix(1,0,0,1,200,300)">
-        <g transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-850" fill="none" x="200" y="300">
+        <g>
           <path id="g-svg-851" fill="none" />
         </g>
-        <g id="g-svg-852" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-852" fill="none">
           <g
             id="g-svg-853"
             fill="none"
+            x="190"
+            y="290"
             width="20"
             height="20"
-            transform="matrix(1,0,0,1,-10,-10)"
             class="speed"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-854"
                 fill="rgba(255,255,255,1)"
-                d="M 2,0 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                d="M 192,290 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                 class="select"
                 width="20"
                 height="20"
+                x="190"
+                y="290"
                 stroke="rgba(217,217,217,1)"
-                stroke-width="0"
               />
-              <g transform="matrix(1,0,0,1,0,0.500000)">
+              <g>
                 <text
                   id="g-svg-856"
                   fill="rgba(0,0,0,1)"
@@ -6014,13 +5597,15 @@
                   stroke-width="1"
                   text-anchor="left"
                   class="value"
+                  x="190"
+                  y="290.5"
                   dy="9.5px"
                 >
                   1x
                 </text>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,24)">
+            <g transform="matrix(1,0,0,1,190,314)">
               <path
                 id="g-svg-855"
                 fill="rgba(255,255,255,1)"
@@ -6032,20 +5617,9 @@
                 filter="url(#g-filter-dropshadow-855)"
                 visibility="hidden"
               />
-              <g
-                id="g-svg-857"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="dropdown-container"
-              >
-                <g
-                  id="g-svg-858"
-                  fill="none"
-                  class="dropdown-item"
-                  width="20"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-857" fill="none" class="dropdown-container">
+                <g id="g-svg-858" fill="none" class="dropdown-item" width="20">
+                  <g>
                     <path
                       id="g-svg-859"
                       fill="rgba(230,247,255,1)"
@@ -6054,12 +5628,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-860"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-860" fill="none">
+                      <g>
                         <text
                           id="g-svg-861"
                           fill="rgba(0,0,0,1)"
@@ -6090,7 +5660,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,19)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-863"
                       fill="rgba(255,255,255,1)"
@@ -6099,12 +5669,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-864"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-864" fill="none">
+                      <g>
                         <text
                           id="g-svg-865"
                           fill="rgba(0,0,0,1)"
@@ -6135,7 +5701,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,38)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-867"
                       fill="rgba(255,255,255,1)"
@@ -6144,12 +5710,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-868"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-868" fill="none">
+                      <g>
                         <text
                           id="g-svg-869"
                           fill="rgba(0,0,0,1)"
@@ -6178,9 +5740,9 @@
           </g>
         </g>
       </g>
-      <g id="g-svg-870" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-871" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-870" fill="none" x="10" y="-10">
+        <g id="g-svg-871" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-873"
               fill="rgba(38,38,38,1)"
@@ -6188,21 +5750,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-872"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-872" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-878" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-879" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-878" fill="none" x="10" y="-10">
+        <g id="g-svg-879" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-881"
               fill="rgba(38,38,38,1)"
@@ -6210,21 +5767,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-880"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-880" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-886" fill="none" transform="matrix(1,0,0,1,240,280)">
-        <g id="g-svg-887" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-886" fill="none" x="240" y="280">
+        <g
+          id="g-svg-887"
+          fill="none"
+          transform="matrix(1,0,0,1,240,271.071808)"
+        >
+          <g>
             <path
               id="g-svg-889"
               fill="rgba(38,38,38,1)"
@@ -6232,21 +5788,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-888"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-888" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-896" fill="none" transform="matrix(1,0,0,1,260,290)">
-        <g id="g-svg-897" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-896" fill="none" x="0" y="-10">
+        <g id="g-svg-897" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-899"
               fill="rgba(38,38,38,1)"
@@ -6254,21 +5805,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-898"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-898" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-904" fill="none" transform="matrix(1,0,0,1,280,280)">
-        <g id="g-svg-905" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-904" fill="none" x="280" y="280">
+        <g
+          id="g-svg-905"
+          fill="none"
+          transform="matrix(1,0,0,1,280,271.071808)"
+        >
+          <g>
             <path
               id="g-svg-907"
               fill="rgba(38,38,38,1)"
@@ -6276,21 +5826,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-906"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-906" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-912" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-913" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-912" fill="none" x="10" y="-10">
+        <g id="g-svg-913" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-915"
               fill="rgba(38,38,38,1)"
@@ -6298,21 +5843,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-914"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-914" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-928" fill="none" transform="matrix(1,0,0,1,320,290)">
-        <g id="g-svg-929" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-928" fill="none" x="0" y="-10">
+        <g id="g-svg-929" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-931"
               fill="rgba(38,38,38,1)"
@@ -6320,21 +5860,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-930"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-930" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-943" fill="none" transform="matrix(1,0,0,1,340,290)">
-        <g id="g-svg-944" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-943" fill="none" x="0" y="-10">
+        <g id="g-svg-944" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-946"
               fill="rgba(38,38,38,1)"
@@ -6342,21 +5877,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-945"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-945" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-1191" fill="none" transform="matrix(1,0,0,1,180,390)">
-        <g id="g-svg-1192" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-1191" fill="none" x="180" y="390">
+        <g
+          id="g-svg-1192"
+          fill="none"
+          transform="matrix(1,0,0,1,180,381.071808)"
+        >
+          <g>
             <path
               id="g-svg-1194"
               fill="rgba(38,38,38,1)"
@@ -6364,43 +5898,40 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-1193"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-1193" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-1195" fill="none" transform="matrix(1,0,0,1,200,410)">
-        <g transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-1195" fill="none" x="200" y="410">
+        <g>
           <path id="g-svg-1196" fill="none" />
         </g>
-        <g id="g-svg-1197" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-1197" fill="none">
           <g
             id="g-svg-1198"
             fill="none"
+            x="190"
+            y="400"
             width="20"
             height="20"
-            transform="matrix(1,0,0,1,-10,-10)"
             class="speed"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-1199"
                 fill="rgba(255,255,255,1)"
-                d="M 2,0 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                d="M 192,400 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                 class="select"
                 width="20"
                 height="20"
+                x="190"
+                y="400"
                 stroke="rgba(217,217,217,1)"
-                stroke-width="0"
               />
-              <g transform="matrix(1,0,0,1,0,0.500000)">
+              <g>
                 <text
                   id="g-svg-1201"
                   fill="rgba(0,0,0,1)"
@@ -6415,13 +5946,15 @@
                   stroke-width="1"
                   text-anchor="left"
                   class="value"
+                  x="190"
+                  y="400.5"
                   dy="9.5px"
                 >
                   1x
                 </text>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,24)">
+            <g transform="matrix(1,0,0,1,190,424)">
               <path
                 id="g-svg-1200"
                 fill="rgba(255,255,255,1)"
@@ -6433,20 +5966,9 @@
                 filter="url(#g-filter-dropshadow-1200)"
                 visibility="hidden"
               />
-              <g
-                id="g-svg-1202"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="dropdown-container"
-              >
-                <g
-                  id="g-svg-1203"
-                  fill="none"
-                  class="dropdown-item"
-                  width="20"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-1202" fill="none" class="dropdown-container">
+                <g id="g-svg-1203" fill="none" class="dropdown-item" width="20">
+                  <g>
                     <path
                       id="g-svg-1204"
                       fill="rgba(230,247,255,1)"
@@ -6455,12 +5977,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-1205"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-1205" fill="none">
+                      <g>
                         <text
                           id="g-svg-1206"
                           fill="rgba(0,0,0,1)"
@@ -6491,7 +6009,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,19)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-1208"
                       fill="rgba(255,255,255,1)"
@@ -6500,12 +6018,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-1209"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-1209" fill="none">
+                      <g>
                         <text
                           id="g-svg-1210"
                           fill="rgba(0,0,0,1)"
@@ -6536,7 +6050,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,38)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-1212"
                       fill="rgba(255,255,255,1)"
@@ -6545,12 +6059,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-1213"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-1213" fill="none">
+                      <g>
                         <text
                           id="g-svg-1214"
                           fill="rgba(0,0,0,1)"
@@ -6579,9 +6089,13 @@
           </g>
         </g>
       </g>
-      <g id="g-svg-1215" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-1216" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-1215" fill="none" x="10" y="-10">
+        <g
+          id="g-svg-1216"
+          fill="none"
+          transform="matrix(1,0,0,1,10,-18.928204)"
+        >
+          <g>
             <path
               id="g-svg-1218"
               fill="rgba(38,38,38,1)"
@@ -6589,21 +6103,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-1217"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-1217" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-1223" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-1224" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-1223" fill="none" x="10" y="-10">
+        <g
+          id="g-svg-1224"
+          fill="none"
+          transform="matrix(1,0,0,1,10,-18.928204)"
+        >
+          <g>
             <path
               id="g-svg-1226"
               fill="rgba(38,38,38,1)"
@@ -6611,21 +6124,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-1225"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-1225" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-1231" fill="none" transform="matrix(1,0,0,1,240,390)">
-        <g id="g-svg-1232" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-1231" fill="none" x="240" y="390">
+        <g
+          id="g-svg-1232"
+          fill="none"
+          transform="matrix(1,0,0,1,240,381.071808)"
+        >
+          <g>
             <path
               id="g-svg-1234"
               fill="rgba(38,38,38,1)"
@@ -6633,21 +6145,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-1233"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-1233" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-1241" fill="none" transform="matrix(1,0,0,1,260,400)">
-        <g id="g-svg-1242" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-1241" fill="none" x="0" y="-10">
+        <g id="g-svg-1242" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-1244"
               fill="rgba(38,38,38,1)"
@@ -6655,21 +6162,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-1243"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-1243" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-1249" fill="none" transform="matrix(1,0,0,1,280,390)">
-        <g id="g-svg-1250" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-1249" fill="none" x="280" y="390">
+        <g
+          id="g-svg-1250"
+          fill="none"
+          transform="matrix(1,0,0,1,280,381.071808)"
+        >
+          <g>
             <path
               id="g-svg-1252"
               fill="rgba(38,38,38,1)"
@@ -6677,21 +6183,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-1251"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-1251" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-1257" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-1258" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-1257" fill="none" x="10" y="-10">
+        <g
+          id="g-svg-1258"
+          fill="none"
+          transform="matrix(1,0,0,1,10,-18.928204)"
+        >
+          <g>
             <path
               id="g-svg-1260"
               fill="rgba(38,38,38,1)"
@@ -6699,21 +6204,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-1259"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-1259" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-1274" fill="none" transform="matrix(1,0,0,1,320,400)">
-        <g id="g-svg-1275" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-1274" fill="none" x="0" y="-10">
+        <g id="g-svg-1275" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-1277"
               fill="rgba(38,38,38,1)"
@@ -6721,21 +6221,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-1276"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-1276" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-1289" fill="none" transform="matrix(1,0,0,1,340,400)">
-        <g id="g-svg-1290" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-1289" fill="none" x="0" y="-10">
+        <g id="g-svg-1290" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-1292"
               fill="rgba(38,38,38,1)"
@@ -6743,16 +6238,11 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-1291"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-1291" fill="none" class="indicator-label-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/TimebarController.svg b/__tests__/integration/snapshots/TimebarController.svg
index d0b900345..631c7ebce 100644
--- a/__tests__/integration/snapshots/TimebarController.svg
+++ b/__tests__/integration/snapshots/TimebarController.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="300"
-  height="150"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -43,264 +43,229 @@
       />
     </filter>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-13" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-14"
-          fill="none"
-          width="300"
-          height="50"
-          transform="matrix(1,0,0,1,0,0)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-13" fill="none">
+        <g id="g-svg-14" fill="none" x="0" y="0" width="300" height="50">
+          <g>
             <path
               id="g-svg-15"
               fill="rgba(251,253,255,1)"
               d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              x="0"
+              y="0"
               width="300"
               height="50"
               stroke="rgba(235,237,240,1)"
             />
           </g>
-          <g id="g-svg-16" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,12.500000,25)"
-            >
-              <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+          <g id="g-svg-16" fill="none">
+            <g id="g-svg-1" fill="none" x="12.5" y="25">
+              <g>
                 <path
                   id="g-svg-2"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  d="M 4,12.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  x="0"
+                  y="12.5"
                   width="25"
                   height="25"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-6.102060,-6.102060)">
+              <g id="g-svg-3" fill="none">
+                <g>
                   <path
                     id="g-svg-4"
                     fill="none"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.3979400086720377"
-                    d="M 1.787251992252834,10.416867990403091 A 6.1020599913279625 6.1020599913279625 0 1 1 10.416867990403091 10.416867990403091"
+                    d="M 8.185192000924872,29.31480799907513 A 6.1020599913279625 6.1020599913279625 0 1 1 16.81480799907513 29.31480799907513"
                   />
-                  <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.787252,10.416868)">
+                  <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,8.185192,29.314808)">
                     <path
                       id="g-svg-6"
                       fill="rgba(86,87,88,1)"
-                      d="M 3.7958800173440754,3.7958800173440754 L 0,1.8979400086720377 L 3.7958800173440754,0 Z"
-                      transform="translate(-1.8979400086720377,-1.8979400086720377)"
+                      d="M 1.8979400086720377,1.8979400086720377 L -1.8979400086720377,0 L 1.8979400086720377,-1.8979400086720377 Z"
                     />
                   </g>
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-35"
-              fill="none"
-              transform="matrix(1,0,0,1,62.500000,25)"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-35" fill="none" x="62.5" y="25">
+              <g>
                 <path id="g-svg-36" fill="none" />
               </g>
-              <g id="g-svg-37" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,-7.500000)">
+              <g id="g-svg-37" fill="none">
+                <g>
                   <line
                     id="g-svg-38"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="15"
+                    x1="62.5"
+                    y1="17.5"
+                    x2="62.5"
+                    y2="32.5"
                     stroke="rgba(216,217,217,1)"
                     stroke-width="1.3979400086720377"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-43"
-              fill="none"
-              transform="matrix(1,0,0,1,87.500000,25)"
-            >
-              <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-43" fill="none" x="87.5" y="25">
+              <g>
                 <path
                   id="g-svg-44"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  d="M 79,12.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  x="75"
+                  y="12.5"
                   width="25"
                   height="25"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-45" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-7.500000,-4.330127)">
+              <g id="g-svg-45" fill="none">
+                <g>
                   <polygon
                     id="g-svg-46"
                     fill="rgba(86,87,88,1)"
-                    points="7.5,4.330127018922194 7.5,0 0,4.330127018922194 7.5,8.660254037844387 7.5,4.330127018922194 15,0 15,8.660254037844387 7.5,4.330127018922194"
+                    points="87.5,25 87.5,20.669872981077805 80,25 87.5,29.330127018922195 87.5,25 95,20.669872981077805 95,29.330127018922195 87.5,25"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-51"
-              fill="none"
-              transform="matrix(1,0,0,1,112.500000,25)"
-            >
-              <g id="g-svg-52" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g
-                  id="g-svg-53"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="icon"
-                >
-                  <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-51" fill="none" x="112.5" y="25">
+              <g id="g-svg-52" fill="none">
+                <g id="g-svg-53" fill="none" x="112.5" y="25" class="icon">
+                  <g>
                     <path
                       id="g-svg-54"
                       fill="rgba(226,226,226,1)"
-                      d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      d="M 104,12.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      x="100"
+                      y="12.5"
                       width="25"
                       height="25"
                       opacity="0"
                     />
                   </g>
-                  <g id="g-svg-55" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,-3.464102,-6)">
+                  <g id="g-svg-55" fill="none">
+                    <g>
                       <polygon
                         id="g-svg-56"
                         fill="rgba(86,87,88,1)"
-                        points="10.392304845413264,6 0,0 0,12 10.392304845413264,6"
+                        points="119.42820323027551,25 109.03589838486225,19 109.03589838486225,31 119.42820323027551,25"
                       />
                     </g>
                   </g>
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-61"
-              fill="none"
-              transform="matrix(1,0,0,1,137.500000,25)"
-            >
-              <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-61" fill="none" x="137.5" y="25">
+              <g>
                 <path
                   id="g-svg-62"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  d="M 129,12.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  x="125"
+                  y="12.5"
                   width="25"
                   height="25"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-63" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-7.500000,-4.330127)">
+              <g id="g-svg-63" fill="none">
+                <g>
                   <polygon
                     id="g-svg-64"
                     fill="rgba(86,87,88,1)"
-                    points="7.5,4.330127018922194 7.5,0 15,4.330127018922194 7.5,8.660254037844387 7.5,4.330127018922194 0,0 0,8.660254037844387 7.5,4.330127018922194"
+                    points="137.5,25 137.5,20.669872981077805 145,25 137.5,29.330127018922195 137.5,25 130,20.669872981077805 130,29.330127018922195 137.5,25"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-69"
-              fill="none"
-              transform="matrix(1,0,0,1,162.500000,25)"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-69" fill="none" x="162.5" y="25">
+              <g>
                 <path id="g-svg-70" fill="none" />
               </g>
-              <g id="g-svg-71" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,-7.500000)">
+              <g id="g-svg-71" fill="none">
+                <g>
                   <line
                     id="g-svg-72"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="15"
+                    x1="162.5"
+                    y1="17.5"
+                    x2="162.5"
+                    y2="32.5"
                     stroke="rgba(216,217,217,1)"
                     stroke-width="1.3979400086720377"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-77"
-              fill="none"
-              transform="matrix(1,0,0,1,187.500000,25)"
-            >
-              <g id="g-svg-78" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g
-                  id="g-svg-79"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="icon"
-                >
-                  <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-77" fill="none" x="187.5" y="25">
+              <g id="g-svg-78" fill="none">
+                <g id="g-svg-79" fill="none" x="187.5" y="25" class="icon">
+                  <g>
                     <path
                       id="g-svg-80"
                       fill="rgba(226,226,226,1)"
-                      d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      d="M 179,12.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      x="175"
+                      y="12.5"
                       width="25"
                       height="25"
                       opacity="0"
                     />
                   </g>
-                  <g id="g-svg-81" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,0,-7.500000)">
+                  <g id="g-svg-81" fill="none">
+                    <g>
                       <line
                         id="g-svg-82"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="15"
+                        x1="187.5"
+                        y1="17.5"
+                        x2="187.5"
+                        y2="32.5"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-10.295880,0)">
+                    <g>
                       <line
                         id="g-svg-83"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="7.5"
-                        y2="0"
+                        x1="177.20411998265593"
+                        y1="25"
+                        x2="184.70411998265593"
+                        y2="25"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
-                      <g transform="matrix(-1,0,-0,-1,7.500000,0)">
+                      <g transform="matrix(-1,0,-0,-1,184.704117,25)">
                         <path
                           id="g-svg-94"
                           fill="rgba(86,87,88,1)"
-                          d="M 5.591760034688151,5.591760034688151 L 0,2.7958800173440754 L 5.591760034688151,0 Z"
-                          transform="translate(-2.7958800173440754,-2.7958800173440754)"
+                          d="M 2.7958800173440754,2.7958800173440754 L -2.7958800173440754,0 L 2.7958800173440754,-2.7958800173440754 Z"
                         />
                       </g>
                     </g>
-                    <g transform="matrix(1,0,0,1,2.795880,0)">
+                    <g>
                       <line
                         id="g-svg-86"
                         fill="none"
-                        x1="7.5"
-                        y1="0"
-                        x2="0"
-                        y2="0"
+                        x1="197.79588001734407"
+                        y1="25"
+                        x2="190.29588001734407"
+                        y2="25"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g transform="matrix(1,0,0,1,190.295883,25)">
                         <path
                           id="g-svg-96"
                           fill="rgba(86,87,88,1)"
-                          d="M 5.591760034688151,5.591760034688151 L 0,2.7958800173440754 L 5.591760034688151,0 Z"
-                          transform="translate(-2.7958800173440754,-2.7958800173440754)"
+                          d="M 2.7958800173440754,2.7958800173440754 L -2.7958800173440754,0 L 2.7958800173440754,-2.7958800173440754 Z"
                         />
                       </g>
                     </g>
@@ -308,103 +273,92 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-97"
-              fill="none"
-              transform="matrix(1,0,0,1,212.500000,25)"
-            >
-              <g id="g-svg-98" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g
-                  id="g-svg-99"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="icon"
-                >
-                  <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-97" fill="none" x="212.5" y="25">
+              <g id="g-svg-98" fill="none">
+                <g id="g-svg-99" fill="none" x="212.5" y="25" class="icon">
+                  <g>
                     <path
                       id="g-svg-100"
                       fill="rgba(226,226,226,1)"
-                      d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      d="M 204,12.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      x="200"
+                      y="12.5"
                       width="25"
                       height="25"
                       opacity="0"
                     />
                   </g>
-                  <g id="g-svg-101" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+                  <g id="g-svg-101" fill="none">
+                    <g>
                       <polyline
                         id="g-svg-102"
                         fill="none"
-                        points="0,0 0,15 15,15"
+                        points="205,17.5 205,32.5 220,32.5"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
                     </g>
-                    <g
-                      id="g-svg-103"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-4.704120,3.051030)">
+                    <g id="g-svg-103" fill="none">
+                      <g>
                         <line
                           id="g-svg-113"
                           fill="none"
-                          x1="0"
-                          y1="3.0510299956639813"
-                          x2="0"
-                          y2="0"
+                          x1="207.79588001734407"
+                          y1="31.102059991327963"
+                          x2="207.79588001734407"
+                          y2="28.05102999566398"
                           class="column"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3979400086720377"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,-1.983708,-6.102060)">
+                      <g>
                         <line
                           id="g-svg-114"
                           fill="none"
-                          x1="0"
-                          y1="12.204119982655925"
-                          x2="0"
-                          y2="0"
+                          x1="210.51629201560968"
+                          y1="31.102059991327963"
+                          x2="210.51629201560968"
+                          y2="18.897940008672037"
                           class="column"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3979400086720377"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,0.736704,0)">
+                      <g>
                         <line
                           id="g-svg-115"
                           fill="none"
-                          x1="0"
-                          y1="6.1020599913279625"
-                          x2="0"
-                          y2="0"
+                          x1="213.23670401387525"
+                          y1="31.102059991327963"
+                          x2="213.23670401387525"
+                          y2="25"
                           class="column"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3979400086720377"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,3.457116,-6.102060)">
+                      <g>
                         <line
                           id="g-svg-116"
                           fill="none"
-                          x1="0"
-                          y1="12.204119982655925"
-                          x2="0"
-                          y2="0"
+                          x1="215.95711601214086"
+                          y1="31.102059991327963"
+                          x2="215.95711601214086"
+                          y2="18.897940008672037"
                           class="column"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3979400086720377"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.177528,-3.051030)">
+                      <g>
                         <line
                           id="g-svg-117"
                           fill="none"
-                          x1="0"
-                          y1="9.153089986991944"
-                          x2="0"
-                          y2="0"
+                          x1="218.67752801040643"
+                          y1="31.102059991327963"
+                          x2="218.67752801040643"
+                          y2="21.94897000433602"
                           class="column"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3979400086720377"
@@ -417,233 +371,226 @@
             </g>
           </g>
         </g>
-        <g
-          id="g-svg-17"
-          fill="none"
-          width="300"
-          height="50"
-          transform="matrix(1,0,0,1,0,50)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-17" fill="none" x="0" y="50" width="300" height="50">
+          <g>
             <path
               id="g-svg-18"
               fill="rgba(251,253,255,1)"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 0,50 l 300,0 l 0,50 l-300 0 z"
+              x="0"
+              y="50"
               width="300"
               height="50"
               stroke="rgba(235,237,240,1)"
             />
           </g>
-          <g id="g-svg-19" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g id="g-svg-118" fill="none" transform="matrix(1,0,0,1,50,25)">
-              <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+          <g id="g-svg-19" fill="none">
+            <g id="g-svg-118" fill="none" x="50" y="75">
+              <g>
                 <path
                   id="g-svg-119"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  d="M 41.5,62.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  x="37.5"
+                  y="62.5"
                   width="25"
                   height="25"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-120" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-6.102060,-6.102060)">
+              <g id="g-svg-120" fill="none">
+                <g>
                   <path
                     id="g-svg-121"
                     fill="none"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.3979400086720377"
-                    d="M 1.787251992252834,10.416867990403091 A 6.1020599913279625 6.1020599913279625 0 1 1 10.416867990403091 10.416867990403091"
+                    d="M 45.68519200092487,79.31480799907513 A 6.1020599913279625 6.1020599913279625 0 1 1 54.31480799907513 79.31480799907513"
                   />
-                  <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.787252,10.416868)">
+                  <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,45.685192,79.314812)">
                     <path
                       id="g-svg-123"
                       fill="rgba(86,87,88,1)"
-                      d="M 3.7958800173440754,3.7958800173440754 L 0,1.8979400086720377 L 3.7958800173440754,0 Z"
-                      transform="translate(-1.8979400086720377,-1.8979400086720377)"
+                      d="M 1.8979400086720377,1.8979400086720377 L -1.8979400086720377,0 L 1.8979400086720377,-1.8979400086720377 Z"
                     />
                   </g>
                 </g>
               </g>
             </g>
-            <g id="g-svg-152" fill="none" transform="matrix(1,0,0,1,100,25)">
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-152" fill="none" x="100" y="75">
+              <g>
                 <path id="g-svg-153" fill="none" />
               </g>
-              <g id="g-svg-154" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,-7.500000)">
+              <g id="g-svg-154" fill="none">
+                <g>
                   <line
                     id="g-svg-155"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="15"
+                    x1="100"
+                    y1="67.5"
+                    x2="100"
+                    y2="82.5"
                     stroke="rgba(216,217,217,1)"
                     stroke-width="1.3979400086720377"
                   />
                 </g>
               </g>
             </g>
-            <g id="g-svg-160" fill="none" transform="matrix(1,0,0,1,125,25)">
-              <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-160" fill="none" x="125" y="75">
+              <g>
                 <path
                   id="g-svg-161"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  d="M 116.5,62.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  x="112.5"
+                  y="62.5"
                   width="25"
                   height="25"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-162" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-7.500000,-4.330127)">
+              <g id="g-svg-162" fill="none">
+                <g>
                   <polygon
                     id="g-svg-163"
                     fill="rgba(86,87,88,1)"
-                    points="7.5,4.330127018922194 7.5,0 0,4.330127018922194 7.5,8.660254037844387 7.5,4.330127018922194 15,0 15,8.660254037844387 7.5,4.330127018922194"
+                    points="125,75 125,70.6698729810778 117.5,75 125,79.3301270189222 125,75 132.5,70.6698729810778 132.5,79.3301270189222 125,75"
                   />
                 </g>
               </g>
             </g>
-            <g id="g-svg-168" fill="none" transform="matrix(1,0,0,1,150,25)">
-              <g id="g-svg-169" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g
-                  id="g-svg-170"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="icon"
-                >
-                  <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-168" fill="none" x="150" y="75">
+              <g id="g-svg-169" fill="none">
+                <g id="g-svg-170" fill="none" x="150" y="75" class="icon">
+                  <g>
                     <path
                       id="g-svg-171"
                       fill="rgba(226,226,226,1)"
-                      d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      d="M 141.5,62.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      x="137.5"
+                      y="62.5"
                       width="25"
                       height="25"
                       opacity="0"
                     />
                   </g>
-                  <g id="g-svg-172" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,-5,-7.500000)">
+                  <g id="g-svg-172" fill="none">
+                    <g>
                       <polygon
                         id="g-svg-173"
                         fill="rgba(86,87,88,1)"
-                        points="0,0 0,15 2.5,15 2.5,0 0,0 7.5,0 7.5,15 10,15 10,0"
+                        points="145,67.5 145,82.5 147.5,82.5 147.5,67.5 145,67.5 152.5,67.5 152.5,82.5 155,82.5 155,67.5"
                       />
                     </g>
                   </g>
                 </g>
               </g>
             </g>
-            <g id="g-svg-178" fill="none" transform="matrix(1,0,0,1,175,25)">
-              <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-178" fill="none" x="175" y="75">
+              <g>
                 <path
                   id="g-svg-179"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  d="M 166.5,62.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  x="162.5"
+                  y="62.5"
                   width="25"
                   height="25"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-180" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-7.500000,-4.330127)">
+              <g id="g-svg-180" fill="none">
+                <g>
                   <polygon
                     id="g-svg-181"
                     fill="rgba(86,87,88,1)"
-                    points="7.5,4.330127018922194 7.5,0 15,4.330127018922194 7.5,8.660254037844387 7.5,4.330127018922194 0,0 0,8.660254037844387 7.5,4.330127018922194"
+                    points="175,75 175,70.6698729810778 182.5,75 175,79.3301270189222 175,75 167.5,70.6698729810778 167.5,79.3301270189222 175,75"
                   />
                 </g>
               </g>
             </g>
-            <g id="g-svg-186" fill="none" transform="matrix(1,0,0,1,200,25)">
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-186" fill="none" x="200" y="75">
+              <g>
                 <path id="g-svg-187" fill="none" />
               </g>
-              <g id="g-svg-188" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,-7.500000)">
+              <g id="g-svg-188" fill="none">
+                <g>
                   <line
                     id="g-svg-189"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="15"
+                    x1="200"
+                    y1="67.5"
+                    x2="200"
+                    y2="82.5"
                     stroke="rgba(216,217,217,1)"
                     stroke-width="1.3979400086720377"
                   />
                 </g>
               </g>
             </g>
-            <g id="g-svg-194" fill="none" transform="matrix(1,0,0,1,225,25)">
-              <g id="g-svg-195" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g
-                  id="g-svg-196"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="icon"
-                >
-                  <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-194" fill="none" x="225" y="75">
+              <g id="g-svg-195" fill="none">
+                <g id="g-svg-196" fill="none" x="225" y="75" class="icon">
+                  <g>
                     <path
                       id="g-svg-197"
                       fill="rgba(226,226,226,1)"
-                      d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      d="M 216.5,62.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      x="212.5"
+                      y="62.5"
                       width="25"
                       height="25"
                       opacity="0"
                     />
                   </g>
-                  <g id="g-svg-198" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,0,-7.500000)">
+                  <g id="g-svg-198" fill="none">
+                    <g>
                       <line
                         id="g-svg-199"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="15"
+                        x1="225"
+                        y1="67.5"
+                        x2="225"
+                        y2="82.5"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-10.295880,0)">
+                    <g>
                       <line
                         id="g-svg-200"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="7.5"
-                        y2="0"
+                        x1="214.70411998265593"
+                        y1="75"
+                        x2="222.20411998265593"
+                        y2="75"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
-                      <g transform="matrix(-1,0,-0,-1,7.500000,0)">
+                      <g transform="matrix(-1,0,-0,-1,222.204117,75)">
                         <path
                           id="g-svg-211"
                           fill="rgba(86,87,88,1)"
-                          d="M 5.591760034688151,5.591760034688151 L 0,2.7958800173440754 L 5.591760034688151,0 Z"
-                          transform="translate(-2.7958800173440754,-2.7958800173440754)"
+                          d="M 2.7958800173440754,2.7958800173440754 L -2.7958800173440754,0 L 2.7958800173440754,-2.7958800173440754 Z"
                         />
                       </g>
                     </g>
-                    <g transform="matrix(1,0,0,1,2.795880,0)">
+                    <g>
                       <line
                         id="g-svg-203"
                         fill="none"
-                        x1="7.5"
-                        y1="0"
-                        x2="0"
-                        y2="0"
+                        x1="235.29588001734407"
+                        y1="75"
+                        x2="227.79588001734407"
+                        y2="75"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g transform="matrix(1,0,0,1,227.795883,75)">
                         <path
                           id="g-svg-213"
                           fill="rgba(86,87,88,1)"
-                          d="M 5.591760034688151,5.591760034688151 L 0,2.7958800173440754 L 5.591760034688151,0 Z"
-                          transform="translate(-2.7958800173440754,-2.7958800173440754)"
+                          d="M 2.7958800173440754,2.7958800173440754 L -2.7958800173440754,0 L 2.7958800173440754,-2.7958800173440754 Z"
                         />
                       </g>
                     </g>
@@ -651,99 +598,92 @@
                 </g>
               </g>
             </g>
-            <g id="g-svg-214" fill="none" transform="matrix(1,0,0,1,250,25)">
-              <g id="g-svg-215" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g
-                  id="g-svg-216"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="icon"
-                >
-                  <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-214" fill="none" x="250" y="75">
+              <g id="g-svg-215" fill="none">
+                <g id="g-svg-216" fill="none" x="250" y="75" class="icon">
+                  <g>
                     <path
                       id="g-svg-217"
                       fill="rgba(226,226,226,1)"
-                      d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      d="M 241.5,62.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      x="237.5"
+                      y="62.5"
                       width="25"
                       height="25"
                       opacity="0"
                     />
                   </g>
-                  <g id="g-svg-218" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+                  <g id="g-svg-218" fill="none">
+                    <g>
                       <polyline
                         id="g-svg-219"
                         fill="none"
-                        points="0,0 0,15 15,15"
+                        points="242.5,67.5 242.5,82.5 257.5,82.5"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
                     </g>
-                    <g
-                      id="g-svg-220"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-4.704120,3.051030)">
+                    <g id="g-svg-220" fill="none">
+                      <g>
                         <line
                           id="g-svg-230"
                           fill="none"
-                          x1="0"
-                          y1="3.0510299956639813"
-                          x2="0"
-                          y2="0"
+                          x1="245.29588001734407"
+                          y1="81.10205999132796"
+                          x2="245.29588001734407"
+                          y2="78.05102999566398"
                           class="column"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3979400086720377"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,-1.983708,-6.102060)">
+                      <g>
                         <line
                           id="g-svg-231"
                           fill="none"
-                          x1="0"
-                          y1="12.204119982655925"
-                          x2="0"
-                          y2="0"
+                          x1="248.01629201560968"
+                          y1="81.10205999132796"
+                          x2="248.01629201560968"
+                          y2="68.89794000867204"
                           class="column"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3979400086720377"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,0.736704,0)">
+                      <g>
                         <line
                           id="g-svg-232"
                           fill="none"
-                          x1="0"
-                          y1="6.1020599913279625"
-                          x2="0"
-                          y2="0"
+                          x1="250.73670401387525"
+                          y1="81.10205999132796"
+                          x2="250.73670401387525"
+                          y2="75"
                           class="column"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3979400086720377"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,3.457116,-6.102060)">
+                      <g>
                         <line
                           id="g-svg-233"
                           fill="none"
-                          x1="0"
-                          y1="12.204119982655925"
-                          x2="0"
-                          y2="0"
+                          x1="253.45711601214086"
+                          y1="81.10205999132796"
+                          x2="253.45711601214086"
+                          y2="68.89794000867204"
                           class="column"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3979400086720377"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6.177528,-3.051030)">
+                      <g>
                         <line
                           id="g-svg-234"
                           fill="none"
-                          x1="0"
-                          y1="9.153089986991944"
-                          x2="0"
-                          y2="0"
+                          x1="256.17752801040643"
+                          y1="81.10205999132796"
+                          x2="256.17752801040643"
+                          y2="71.94897000433602"
                           class="column"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3979400086720377"
@@ -756,273 +696,238 @@
             </g>
           </g>
         </g>
-        <g
-          id="g-svg-20"
-          fill="none"
-          width="300"
-          height="50"
-          transform="matrix(1,0,0,1,0,100)"
-        >
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-20" fill="none" x="0" y="100" width="300" height="50">
+          <g>
             <path
               id="g-svg-21"
               fill="rgba(251,253,255,1)"
-              d="M 0,0 l 300,0 l 0,50 l-300 0 z"
+              d="M 0,100 l 300,0 l 0,50 l-300 0 z"
+              x="0"
+              y="100"
               width="300"
               height="50"
               stroke="rgba(235,237,240,1)"
             />
           </g>
-          <g id="g-svg-22" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-235"
-              fill="none"
-              transform="matrix(1,0,0,1,87.500000,25)"
-            >
-              <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+          <g id="g-svg-22" fill="none">
+            <g id="g-svg-235" fill="none" x="87.5" y="125">
+              <g>
                 <path
                   id="g-svg-236"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  d="M 79,112.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  x="75"
+                  y="112.5"
                   width="25"
                   height="25"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-237" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-6.102060,-6.102060)">
+              <g id="g-svg-237" fill="none">
+                <g>
                   <path
                     id="g-svg-238"
                     fill="none"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.3979400086720377"
-                    d="M 1.787251992252834,10.416867990403091 A 6.1020599913279625 6.1020599913279625 0 1 1 10.416867990403091 10.416867990403091"
+                    d="M 83.18519200092487,129.31480799907513 A 6.1020599913279625 6.1020599913279625 0 1 1 91.81480799907513 129.31480799907513"
                   />
-                  <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.787252,10.416868)">
+                  <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,83.185188,129.314804)">
                     <path
                       id="g-svg-240"
                       fill="rgba(86,87,88,1)"
-                      d="M 3.7958800173440754,3.7958800173440754 L 0,1.8979400086720377 L 3.7958800173440754,0 Z"
-                      transform="translate(-1.8979400086720377,-1.8979400086720377)"
+                      d="M 1.8979400086720377,1.8979400086720377 L -1.8979400086720377,0 L 1.8979400086720377,-1.8979400086720377 Z"
                     />
                   </g>
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-269"
-              fill="none"
-              transform="matrix(1,0,0,1,137.500000,25)"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-269" fill="none" x="137.5" y="125">
+              <g>
                 <path id="g-svg-270" fill="none" />
               </g>
-              <g id="g-svg-271" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,-7.500000)">
+              <g id="g-svg-271" fill="none">
+                <g>
                   <line
                     id="g-svg-272"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="15"
+                    x1="137.5"
+                    y1="117.5"
+                    x2="137.5"
+                    y2="132.5"
                     stroke="rgba(216,217,217,1)"
                     stroke-width="1.3979400086720377"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-277"
-              fill="none"
-              transform="matrix(1,0,0,1,162.500000,25)"
-            >
-              <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-277" fill="none" x="162.5" y="125">
+              <g>
                 <path
                   id="g-svg-278"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  d="M 154,112.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  x="150"
+                  y="112.5"
                   width="25"
                   height="25"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-279" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-7.500000,-4.330127)">
+              <g id="g-svg-279" fill="none">
+                <g>
                   <polygon
                     id="g-svg-280"
                     fill="rgba(86,87,88,1)"
-                    points="7.5,4.330127018922194 7.5,0 0,4.330127018922194 7.5,8.660254037844387 7.5,4.330127018922194 15,0 15,8.660254037844387 7.5,4.330127018922194"
+                    points="162.5,125 162.5,120.6698729810778 155,125 162.5,129.33012701892218 162.5,125 170,120.6698729810778 170,129.33012701892218 162.5,125"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-285"
-              fill="none"
-              transform="matrix(1,0,0,1,187.500000,25)"
-            >
-              <g id="g-svg-286" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g
-                  id="g-svg-287"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="icon"
-                >
-                  <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-285" fill="none" x="187.5" y="125">
+              <g id="g-svg-286" fill="none">
+                <g id="g-svg-287" fill="none" x="187.5" y="125" class="icon">
+                  <g>
                     <path
                       id="g-svg-288"
                       fill="rgba(226,226,226,1)"
-                      d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      d="M 179,112.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      x="175"
+                      y="112.5"
                       width="25"
                       height="25"
                       opacity="0"
                     />
                   </g>
-                  <g id="g-svg-289" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,-3.464102,-6)">
+                  <g id="g-svg-289" fill="none">
+                    <g>
                       <polygon
                         id="g-svg-290"
                         fill="rgba(86,87,88,1)"
-                        points="10.392304845413264,6 0,0 0,12 10.392304845413264,6"
+                        points="194.4282032302755,125 184.03589838486224,119 184.03589838486224,131 194.4282032302755,125"
                       />
                     </g>
                   </g>
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-295"
-              fill="none"
-              transform="matrix(1,0,0,1,212.500000,25)"
-            >
-              <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-295" fill="none" x="212.5" y="125">
+              <g>
                 <path
                   id="g-svg-296"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  d="M 204,112.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  x="200"
+                  y="112.5"
                   width="25"
                   height="25"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-297" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-7.500000,-4.330127)">
+              <g id="g-svg-297" fill="none">
+                <g>
                   <polygon
                     id="g-svg-298"
                     fill="rgba(86,87,88,1)"
-                    points="7.5,4.330127018922194 7.5,0 15,4.330127018922194 7.5,8.660254037844387 7.5,4.330127018922194 0,0 0,8.660254037844387 7.5,4.330127018922194"
+                    points="212.5,125 212.5,120.6698729810778 220,125 212.5,129.33012701892218 212.5,125 205,120.6698729810778 205,129.33012701892218 212.5,125"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-303"
-              fill="none"
-              transform="matrix(1,0,0,1,237.500000,25)"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-303" fill="none" x="237.5" y="125">
+              <g>
                 <path id="g-svg-304" fill="none" />
               </g>
-              <g id="g-svg-305" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,0,-7.500000)">
+              <g id="g-svg-305" fill="none">
+                <g>
                   <line
                     id="g-svg-306"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="15"
+                    x1="237.5"
+                    y1="117.5"
+                    x2="237.5"
+                    y2="132.5"
                     stroke="rgba(216,217,217,1)"
                     stroke-width="1.3979400086720377"
                   />
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-311"
-              fill="none"
-              transform="matrix(1,0,0,1,262.500000,25)"
-            >
-              <g id="g-svg-312" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g
-                  id="g-svg-313"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="icon"
-                >
-                  <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-311" fill="none" x="262.5" y="125">
+              <g id="g-svg-312" fill="none">
+                <g id="g-svg-313" fill="none" x="262.5" y="125" class="icon">
+                  <g>
                     <path
                       id="g-svg-314"
                       fill="rgba(226,226,226,1)"
-                      d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      d="M 254,112.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      x="250"
+                      y="112.5"
                       width="25"
                       height="25"
                       opacity="0"
                     />
                   </g>
-                  <g id="g-svg-315" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+                  <g id="g-svg-315" fill="none">
+                    <g>
                       <line
                         id="g-svg-316"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="15"
+                        x1="255"
+                        y1="117.5"
+                        x2="255"
+                        y2="132.5"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,7.500000,-7.500000)">
+                    <g>
                       <line
                         id="g-svg-317"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="15"
+                        x1="270"
+                        y1="117.5"
+                        x2="270"
+                        y2="132.5"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-4.704120,0)">
+                    <g>
                       <line
                         id="g-svg-318"
                         fill="none"
-                        x1="4.704119982655925"
-                        y1="0"
-                        x2="0"
-                        y2="0"
+                        x1="262.5"
+                        y1="125"
+                        x2="257.7958800173441"
+                        y2="125"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g transform="matrix(1,0,0,1,257.795868,125)">
                         <path
                           id="g-svg-329"
                           fill="rgba(86,87,88,1)"
-                          d="M 5.591760034688151,5.591760034688151 L 0,2.7958800173440754 L 5.591760034688151,0 Z"
-                          transform="translate(-2.7958800173440754,-2.7958800173440754)"
+                          d="M 2.7958800173440754,2.7958800173440754 L -2.7958800173440754,0 L 2.7958800173440754,-2.7958800173440754 Z"
                         />
                       </g>
                     </g>
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <line
                         id="g-svg-321"
                         fill="none"
-                        x1="0"
-                        y1="0"
-                        x2="4.704119982655925"
-                        y2="0"
+                        x1="262.5"
+                        y1="125"
+                        x2="267.2041199826559"
+                        y2="125"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
-                      <g transform="matrix(-1,0,-0,-1,4.704120,0)">
+                      <g transform="matrix(-1,0,-0,-1,267.204132,125)">
                         <path
                           id="g-svg-331"
                           fill="rgba(86,87,88,1)"
-                          d="M 5.591760034688151,5.591760034688151 L 0,2.7958800173440754 L 5.591760034688151,0 Z"
-                          transform="translate(-2.7958800173440754,-2.7958800173440754)"
+                          d="M 2.7958800173440754,2.7958800173440754 L -2.7958800173440754,0 L 2.7958800173440754,-2.7958800173440754 Z"
                         />
                       </g>
                     </g>
@@ -1030,43 +935,36 @@
                 </g>
               </g>
             </g>
-            <g
-              id="g-svg-332"
-              fill="none"
-              transform="matrix(1,0,0,1,287.500000,25)"
-            >
-              <g id="g-svg-333" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g
-                  id="g-svg-334"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="icon"
-                >
-                  <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+            <g id="g-svg-332" fill="none" x="287.5" y="125">
+              <g id="g-svg-333" fill="none">
+                <g id="g-svg-334" fill="none" x="287.5" y="125" class="icon">
+                  <g>
                     <path
                       id="g-svg-335"
                       fill="rgba(226,226,226,1)"
-                      d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      d="M 279,112.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                      x="275"
+                      y="112.5"
                       width="25"
                       height="25"
                       opacity="0"
                     />
                   </g>
-                  <g id="g-svg-336" fill="none" transform="matrix(1,0,0,1,0,0)">
-                    <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+                  <g id="g-svg-336" fill="none">
+                    <g>
                       <polyline
                         id="g-svg-337"
                         fill="none"
-                        points="0,0 0,15 15,15"
+                        points="280,117.5 280,132.5 295,132.5"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
                     </g>
-                    <g transform="matrix(1,0,0,1,-6.102060,-6.102060)">
+                    <g>
                       <polyline
                         id="g-svg-338"
                         fill="none"
-                        points="0,10.806179973983888 2.701544993495972,5.403089986991944 5.403089986991944,10.806179973983888 10.806179973983888,0"
+                        points="281.39794000867204,129.70411998265593 284.099485002168,124.30102999566398 286.80102999566395,129.70411998265593 292.2041199826559,118.89794000867204"
                         stroke="rgba(86,87,88,1)"
                         stroke-width="1.3979400086720377"
                       />
@@ -1078,9 +976,13 @@
           </g>
         </g>
       </g>
-      <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,12.500000,0)">
-        <g id="g-svg-8" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-7" fill="none" x="12.5" y="0">
+        <g
+          id="g-svg-8"
+          fill="none"
+          transform="matrix(1,0,0,1,12.500000,-8.928204)"
+        >
+          <g>
             <path
               id="g-svg-10"
               fill="rgba(38,38,38,1)"
@@ -1088,43 +990,40 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-9"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-9" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-11" fill="none" transform="matrix(1,0,0,1,37.500000,25)">
-        <g transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-11" fill="none" x="37.5" y="25">
+        <g>
           <path id="g-svg-12" fill="none" />
         </g>
-        <g id="g-svg-13" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-13" fill="none">
           <g
             id="g-svg-14"
             fill="none"
+            x="25"
+            y="15"
             width="25"
             height="20"
-            transform="matrix(1,0,0,1,-12.500000,-10)"
             class="speed"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-15"
                 fill="rgba(255,255,255,1)"
-                d="M 2,0 l 21,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -21,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                d="M 27,15 l 21,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -21,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                 class="select"
                 width="25"
                 height="20"
+                x="25"
+                y="15"
                 stroke="rgba(217,217,217,1)"
-                stroke-width="0"
               />
-              <g transform="matrix(1,0,0,1,0,-2.500000)">
+              <g>
                 <text
                   id="g-svg-17"
                   fill="rgba(0,0,0,1)"
@@ -1139,13 +1038,15 @@
                   stroke-width="1"
                   text-anchor="left"
                   class="value"
+                  x="25"
+                  y="12.5"
                   dy="12.5px"
                 >
                   1x
                 </text>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,25)">
+            <g transform="matrix(1,0,0,1,25,40)">
               <path
                 id="g-svg-16"
                 fill="rgba(255,255,255,1)"
@@ -1157,20 +1058,9 @@
                 filter="url(#g-filter-dropshadow-16)"
                 visibility="hidden"
               />
-              <g
-                id="g-svg-18"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="dropdown-container"
-              >
-                <g
-                  id="g-svg-19"
-                  fill="none"
-                  class="dropdown-item"
-                  width="25"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-18" fill="none" class="dropdown-container">
+                <g id="g-svg-19" fill="none" class="dropdown-item" width="25">
+                  <g>
                     <path
                       id="g-svg-20"
                       fill="rgba(230,247,255,1)"
@@ -1179,12 +1069,8 @@
                       height="25"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-21"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-21" fill="none">
+                      <g>
                         <text
                           id="g-svg-22"
                           fill="rgba(0,0,0,1)"
@@ -1215,7 +1101,7 @@
                   width="25"
                   transform="matrix(1,0,0,1,0,25)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-24"
                       fill="rgba(255,255,255,1)"
@@ -1224,12 +1110,8 @@
                       height="25"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-25"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-25" fill="none">
+                      <g>
                         <text
                           id="g-svg-26"
                           fill="rgba(0,0,0,1)"
@@ -1260,7 +1142,7 @@
                   width="25"
                   transform="matrix(1,0,0,1,0,50)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-28"
                       fill="rgba(255,255,255,1)"
@@ -1269,12 +1151,8 @@
                       height="25"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-29"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-29" fill="none">
+                      <g>
                         <text
                           id="g-svg-30"
                           fill="rgba(0,0,0,1)"
@@ -1303,13 +1181,13 @@
           </g>
         </g>
       </g>
-      <g
-        id="g-svg-31"
-        fill="none"
-        transform="matrix(1,0,0,1,12.500000,-12.500000)"
-      >
-        <g id="g-svg-32" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-31" fill="none" x="12.5" y="-12.5">
+        <g
+          id="g-svg-32"
+          fill="none"
+          transform="matrix(1,0,0,1,12.500000,-21.428204)"
+        >
+          <g>
             <path
               id="g-svg-34"
               fill="rgba(38,38,38,1)"
@@ -1317,25 +1195,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-33"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-33" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g
-        id="g-svg-39"
-        fill="none"
-        transform="matrix(1,0,0,1,12.500000,-12.500000)"
-      >
-        <g id="g-svg-40" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-39" fill="none" x="12.5" y="-12.5">
+        <g
+          id="g-svg-40"
+          fill="none"
+          transform="matrix(1,0,0,1,12.500000,-21.428204)"
+        >
+          <g>
             <path
               id="g-svg-42"
               fill="rgba(38,38,38,1)"
@@ -1343,21 +1216,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-41"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-41" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-47" fill="none" transform="matrix(1,0,0,1,87.500000,0)">
-        <g id="g-svg-48" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-47" fill="none" x="87.5" y="0">
+        <g
+          id="g-svg-48"
+          fill="none"
+          transform="matrix(1,0,0,1,87.500000,-8.928204)"
+        >
+          <g>
             <path
               id="g-svg-50"
               fill="rgba(38,38,38,1)"
@@ -1365,21 +1237,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-49"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-49" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-57" fill="none" transform="matrix(1,0,0,1,112.500000,15)">
-        <g id="g-svg-58" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-57" fill="none" x="0" y="-10">
+        <g id="g-svg-58" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-60"
               fill="rgba(38,38,38,1)"
@@ -1387,21 +1254,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-59"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-59" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-65" fill="none" transform="matrix(1,0,0,1,137.500000,0)">
-        <g id="g-svg-66" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-65" fill="none" x="137.5" y="0">
+        <g
+          id="g-svg-66"
+          fill="none"
+          transform="matrix(1,0,0,1,137.500000,-8.928204)"
+        >
+          <g>
             <path
               id="g-svg-68"
               fill="rgba(38,38,38,1)"
@@ -1409,25 +1275,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-67"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-67" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g
-        id="g-svg-73"
-        fill="none"
-        transform="matrix(1,0,0,1,12.500000,-12.500000)"
-      >
-        <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-73" fill="none" x="12.5" y="-12.5">
+        <g
+          id="g-svg-74"
+          fill="none"
+          transform="matrix(1,0,0,1,12.500000,-21.428204)"
+        >
+          <g>
             <path
               id="g-svg-76"
               fill="rgba(38,38,38,1)"
@@ -1435,21 +1296,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-75"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-75" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-89" fill="none" transform="matrix(1,0,0,1,187.500000,15)">
-        <g id="g-svg-90" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-89" fill="none" x="0" y="-10">
+        <g id="g-svg-90" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-92"
               fill="rgba(38,38,38,1)"
@@ -1457,21 +1313,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-91"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-91" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-109" fill="none" transform="matrix(1,0,0,1,212.500000,15)">
-        <g id="g-svg-110" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-109" fill="none" x="0" y="-10">
+        <g id="g-svg-110" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-112"
               fill="rgba(38,38,38,1)"
@@ -1479,21 +1330,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-111"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-111" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-124" fill="none" transform="matrix(1,0,0,1,50,50)">
-        <g id="g-svg-125" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-124" fill="none" x="50" y="50">
+        <g id="g-svg-125" fill="none" transform="matrix(1,0,0,1,50,41.071796)">
+          <g>
             <path
               id="g-svg-127"
               fill="rgba(38,38,38,1)"
@@ -1501,43 +1347,40 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-126"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-126" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-128" fill="none" transform="matrix(1,0,0,1,75,75)">
-        <g transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-128" fill="none" x="75" y="75">
+        <g>
           <path id="g-svg-129" fill="none" />
         </g>
-        <g id="g-svg-130" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-130" fill="none">
           <g
             id="g-svg-131"
             fill="none"
+            x="62.5"
+            y="65"
             width="25"
             height="20"
-            transform="matrix(1,0,0,1,-12.500000,-10)"
             class="speed"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-132"
                 fill="rgba(255,255,255,1)"
-                d="M 2,0 l 21,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -21,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                d="M 64.5,65 l 21,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -21,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                 class="select"
                 width="25"
                 height="20"
+                x="62.5"
+                y="65"
                 stroke="rgba(217,217,217,1)"
-                stroke-width="0"
               />
-              <g transform="matrix(1,0,0,1,0,-2.500000)">
+              <g>
                 <text
                   id="g-svg-134"
                   fill="rgba(0,0,0,1)"
@@ -1552,13 +1395,15 @@
                   stroke-width="1"
                   text-anchor="left"
                   class="value"
+                  x="62.5"
+                  y="62.5"
                   dy="12.5px"
                 >
                   1.5x
                 </text>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,25)">
+            <g transform="matrix(1,0,0,1,62.500000,90)">
               <path
                 id="g-svg-133"
                 fill="rgba(255,255,255,1)"
@@ -1570,20 +1415,9 @@
                 filter="url(#g-filter-dropshadow-133)"
                 visibility="hidden"
               />
-              <g
-                id="g-svg-135"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="dropdown-container"
-              >
-                <g
-                  id="g-svg-136"
-                  fill="none"
-                  class="dropdown-item"
-                  width="25"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-135" fill="none" class="dropdown-container">
+                <g id="g-svg-136" fill="none" class="dropdown-item" width="25">
+                  <g>
                     <path
                       id="g-svg-137"
                       fill="rgba(255,255,255,1)"
@@ -1592,12 +1426,8 @@
                       height="25"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-138"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-138" fill="none">
+                      <g>
                         <text
                           id="g-svg-139"
                           fill="rgba(0,0,0,1)"
@@ -1628,7 +1458,7 @@
                   width="25"
                   transform="matrix(1,0,0,1,0,25)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-141"
                       fill="rgba(230,247,255,1)"
@@ -1637,12 +1467,8 @@
                       height="25"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-142"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-142" fill="none">
+                      <g>
                         <text
                           id="g-svg-143"
                           fill="rgba(0,0,0,1)"
@@ -1673,7 +1499,7 @@
                   width="25"
                   transform="matrix(1,0,0,1,0,50)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-145"
                       fill="rgba(255,255,255,1)"
@@ -1682,12 +1508,8 @@
                       height="25"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-146"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-146" fill="none">
+                      <g>
                         <text
                           id="g-svg-147"
                           fill="rgba(0,0,0,1)"
@@ -1716,13 +1538,13 @@
           </g>
         </g>
       </g>
-      <g
-        id="g-svg-148"
-        fill="none"
-        transform="matrix(1,0,0,1,12.500000,-12.500000)"
-      >
-        <g id="g-svg-149" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-148" fill="none" x="12.5" y="-12.5">
+        <g
+          id="g-svg-149"
+          fill="none"
+          transform="matrix(1,0,0,1,12.500000,-21.428204)"
+        >
+          <g>
             <path
               id="g-svg-151"
               fill="rgba(38,38,38,1)"
@@ -1730,25 +1552,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-150"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-150" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g
-        id="g-svg-156"
-        fill="none"
-        transform="matrix(1,0,0,1,12.500000,-12.500000)"
-      >
-        <g id="g-svg-157" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-156" fill="none" x="12.5" y="-12.5">
+        <g
+          id="g-svg-157"
+          fill="none"
+          transform="matrix(1,0,0,1,12.500000,-21.428204)"
+        >
+          <g>
             <path
               id="g-svg-159"
               fill="rgba(38,38,38,1)"
@@ -1756,21 +1573,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-158"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-158" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-164" fill="none" transform="matrix(1,0,0,1,125,50)">
-        <g id="g-svg-165" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-164" fill="none" x="125" y="50">
+        <g id="g-svg-165" fill="none" transform="matrix(1,0,0,1,125,41.071796)">
+          <g>
             <path
               id="g-svg-167"
               fill="rgba(38,38,38,1)"
@@ -1778,21 +1590,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-166"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-166" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-174" fill="none" transform="matrix(1,0,0,1,150,65)">
-        <g id="g-svg-175" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-174" fill="none" x="0" y="-10">
+        <g id="g-svg-175" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-177"
               fill="rgba(38,38,38,1)"
@@ -1800,21 +1607,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-176"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-176" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-182" fill="none" transform="matrix(1,0,0,1,175,50)">
-        <g id="g-svg-183" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-182" fill="none" x="175" y="50">
+        <g id="g-svg-183" fill="none" transform="matrix(1,0,0,1,175,41.071796)">
+          <g>
             <path
               id="g-svg-185"
               fill="rgba(38,38,38,1)"
@@ -1822,25 +1624,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-184"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-184" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g
-        id="g-svg-190"
-        fill="none"
-        transform="matrix(1,0,0,1,12.500000,-12.500000)"
-      >
-        <g id="g-svg-191" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-190" fill="none" x="12.5" y="-12.5">
+        <g
+          id="g-svg-191"
+          fill="none"
+          transform="matrix(1,0,0,1,12.500000,-21.428204)"
+        >
+          <g>
             <path
               id="g-svg-193"
               fill="rgba(38,38,38,1)"
@@ -1848,21 +1645,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-192"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-192" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-206" fill="none" transform="matrix(1,0,0,1,225,65)">
-        <g id="g-svg-207" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-206" fill="none" x="0" y="-10">
+        <g id="g-svg-207" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-209"
               fill="rgba(38,38,38,1)"
@@ -1870,21 +1662,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-208"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-208" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-226" fill="none" transform="matrix(1,0,0,1,250,65)">
-        <g id="g-svg-227" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-226" fill="none" x="0" y="-10">
+        <g id="g-svg-227" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-229"
               fill="rgba(38,38,38,1)"
@@ -1892,21 +1679,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-228"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-228" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-241" fill="none" transform="matrix(1,0,0,1,87.500000,100)">
-        <g id="g-svg-242" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-241" fill="none" x="87.5" y="100">
+        <g
+          id="g-svg-242"
+          fill="none"
+          transform="matrix(1,0,0,1,87.500000,91.071800)"
+        >
+          <g>
             <path
               id="g-svg-244"
               fill="rgba(38,38,38,1)"
@@ -1914,43 +1700,40 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-243"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-243" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-245" fill="none" transform="matrix(1,0,0,1,112.500000,125)">
-        <g transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-245" fill="none" x="112.5" y="125">
+        <g>
           <path id="g-svg-246" fill="none" />
         </g>
-        <g id="g-svg-247" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-247" fill="none">
           <g
             id="g-svg-248"
             fill="none"
+            x="100"
+            y="115"
             width="25"
             height="20"
-            transform="matrix(1,0,0,1,-12.500000,-10)"
             class="speed"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-249"
                 fill="rgba(255,255,255,1)"
-                d="M 2,0 l 21,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -21,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                d="M 102,115 l 21,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -21,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                 class="select"
                 width="25"
                 height="20"
+                x="100"
+                y="115"
                 stroke="rgba(217,217,217,1)"
-                stroke-width="0"
               />
-              <g transform="matrix(1,0,0,1,0,-2.500000)">
+              <g>
                 <text
                   id="g-svg-251"
                   fill="rgba(0,0,0,1)"
@@ -1965,13 +1748,15 @@
                   stroke-width="1"
                   text-anchor="left"
                   class="value"
+                  x="100"
+                  y="112.5"
                   dy="12.5px"
                 >
                   2x
                 </text>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,25)">
+            <g transform="matrix(1,0,0,1,100,140)">
               <path
                 id="g-svg-250"
                 fill="rgba(255,255,255,1)"
@@ -1983,20 +1768,9 @@
                 filter="url(#g-filter-dropshadow-250)"
                 visibility="hidden"
               />
-              <g
-                id="g-svg-252"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="dropdown-container"
-              >
-                <g
-                  id="g-svg-253"
-                  fill="none"
-                  class="dropdown-item"
-                  width="25"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-252" fill="none" class="dropdown-container">
+                <g id="g-svg-253" fill="none" class="dropdown-item" width="25">
+                  <g>
                     <path
                       id="g-svg-254"
                       fill="rgba(255,255,255,1)"
@@ -2005,12 +1779,8 @@
                       height="25"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-255"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-255" fill="none">
+                      <g>
                         <text
                           id="g-svg-256"
                           fill="rgba(0,0,0,1)"
@@ -2041,7 +1811,7 @@
                   width="25"
                   transform="matrix(1,0,0,1,0,25)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-258"
                       fill="rgba(255,255,255,1)"
@@ -2050,12 +1820,8 @@
                       height="25"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-259"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-259" fill="none">
+                      <g>
                         <text
                           id="g-svg-260"
                           fill="rgba(0,0,0,1)"
@@ -2086,7 +1852,7 @@
                   width="25"
                   transform="matrix(1,0,0,1,0,50)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-262"
                       fill="rgba(230,247,255,1)"
@@ -2095,12 +1861,8 @@
                       height="25"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-263"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-263" fill="none">
+                      <g>
                         <text
                           id="g-svg-264"
                           fill="rgba(0,0,0,1)"
@@ -2129,13 +1891,13 @@
           </g>
         </g>
       </g>
-      <g
-        id="g-svg-265"
-        fill="none"
-        transform="matrix(1,0,0,1,12.500000,-12.500000)"
-      >
-        <g id="g-svg-266" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-265" fill="none" x="12.5" y="-12.5">
+        <g
+          id="g-svg-266"
+          fill="none"
+          transform="matrix(1,0,0,1,12.500000,-21.428204)"
+        >
+          <g>
             <path
               id="g-svg-268"
               fill="rgba(38,38,38,1)"
@@ -2143,25 +1905,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-267"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-267" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g
-        id="g-svg-273"
-        fill="none"
-        transform="matrix(1,0,0,1,12.500000,-12.500000)"
-      >
-        <g id="g-svg-274" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-273" fill="none" x="12.5" y="-12.5">
+        <g
+          id="g-svg-274"
+          fill="none"
+          transform="matrix(1,0,0,1,12.500000,-21.428204)"
+        >
+          <g>
             <path
               id="g-svg-276"
               fill="rgba(38,38,38,1)"
@@ -2169,21 +1926,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-275"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-275" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-281" fill="none" transform="matrix(1,0,0,1,162.500000,100)">
-        <g id="g-svg-282" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-281" fill="none" x="162.5" y="100">
+        <g
+          id="g-svg-282"
+          fill="none"
+          transform="matrix(1,0,0,1,162.500000,91.071800)"
+        >
+          <g>
             <path
               id="g-svg-284"
               fill="rgba(38,38,38,1)"
@@ -2191,21 +1947,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-283"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-283" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-291" fill="none" transform="matrix(1,0,0,1,187.500000,115)">
-        <g id="g-svg-292" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-291" fill="none" x="0" y="-10">
+        <g id="g-svg-292" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-294"
               fill="rgba(38,38,38,1)"
@@ -2213,21 +1964,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-293"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-293" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-299" fill="none" transform="matrix(1,0,0,1,212.500000,100)">
-        <g id="g-svg-300" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-299" fill="none" x="212.5" y="100">
+        <g
+          id="g-svg-300"
+          fill="none"
+          transform="matrix(1,0,0,1,212.500000,91.071800)"
+        >
+          <g>
             <path
               id="g-svg-302"
               fill="rgba(38,38,38,1)"
@@ -2235,25 +1985,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-301"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-301" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g
-        id="g-svg-307"
-        fill="none"
-        transform="matrix(1,0,0,1,12.500000,-12.500000)"
-      >
-        <g id="g-svg-308" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-307" fill="none" x="12.5" y="-12.5">
+        <g
+          id="g-svg-308"
+          fill="none"
+          transform="matrix(1,0,0,1,12.500000,-21.428204)"
+        >
+          <g>
             <path
               id="g-svg-310"
               fill="rgba(38,38,38,1)"
@@ -2261,21 +2006,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-309"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-309" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-324" fill="none" transform="matrix(1,0,0,1,262.500000,115)">
-        <g id="g-svg-325" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-324" fill="none" x="0" y="-10">
+        <g id="g-svg-325" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-327"
               fill="rgba(38,38,38,1)"
@@ -2283,21 +2023,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-326"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-326" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-339" fill="none" transform="matrix(1,0,0,1,287.500000,115)">
-        <g id="g-svg-340" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-339" fill="none" x="0" y="-10">
+        <g id="g-svg-340" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-342"
               fill="rgba(38,38,38,1)"
@@ -2305,16 +2040,11 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-341"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-341" fill="none" class="indicator-label-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/TimebarHandle.svg b/__tests__/integration/snapshots/TimebarHandle.svg
index a35df2f56..8336af0fd 100644
--- a/__tests__/integration/snapshots/TimebarHandle.svg
+++ b/__tests__/integration/snapshots/TimebarHandle.svg
@@ -6,16 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g
-        id="g-svg-835"
-        fill="none"
-        width="50"
-        height="80"
-        transform="matrix(1,0,0,1,0,0)"
-      >
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-835" fill="none" width="50" height="80">
+        <g>
           <path
             id="g-svg-836"
             fill="rgba(114,205,246,1)"
@@ -24,187 +18,174 @@
             height="80"
           />
         </g>
-        <g transform="matrix(1,0,0,1,10,10)">
+        <g>
           <circle
             id="g-svg-837"
             fill="rgba(63,124,247,1)"
-            transform="translate(-5,-5)"
-            cx="5"
-            cy="5"
             r="5"
             stroke-width="0"
             stroke="rgba(63,124,247,1)"
             stroke-opacity="0.5"
+            cx="10"
+            cy="10"
           />
         </g>
-        <g
-          id="g-svg-838"
-          fill="none"
-          width="10"
-          height="50"
-          transform="matrix(1,0,0,1,10,50)"
-        >
-          <g transform="matrix(1,0,0,1,-5,-25)">
+        <g id="g-svg-838" fill="none" x="10" y="50" width="10" height="50">
+          <g>
             <path
               id="g-svg-1"
               fill="rgba(255,255,255,1)"
               class="background"
-              d="M 0,0 l 10,0 l 0,50 l-10 0 z"
+              d="M 5,25 l 10,0 l 0,50 l-10 0 z"
+              x="5"
+              y="25"
               width="10"
               height="50"
               fill-opacity="0.5"
             />
           </g>
-          <g transform="matrix(1,0,0,1,-1,-5)">
+          <g>
             <line
               id="g-svg-2"
               fill="none"
-              x1="0"
-              y1="0"
-              x2="0"
-              y2="10"
+              x1="9"
+              y1="45"
+              x2="9"
+              y2="55"
               class="icon-left-line"
               stroke="rgba(154,154,154,1)"
               stroke-width="1"
             />
           </g>
-          <g transform="matrix(1,0,0,1,1,-5)">
+          <g>
             <line
               id="g-svg-3"
               fill="none"
-              x1="0"
-              y1="0"
-              x2="0"
-              y2="10"
+              x1="11"
+              y1="45"
+              x2="11"
+              y2="55"
               class="icon-right-line"
               stroke="rgba(154,154,154,1)"
               stroke-width="1"
             />
           </g>
-          <g transform="matrix(1,0,0,1,5,-25)">
+          <g>
             <line
               id="g-svg-4"
               fill="none"
-              x1="0"
-              y1="0"
-              x2="0"
-              y2="50"
+              x1="15"
+              y1="25"
+              x2="15"
+              y2="75"
               class="border"
               stroke="rgba(232,232,232,1)"
               stroke-width="1"
             />
           </g>
         </g>
-        <g
-          id="g-svg-839"
-          fill="none"
-          width="10"
-          height="50"
-          transform="matrix(1,0,0,1,25,50)"
-        >
-          <g transform="matrix(1,0,0,1,-5,-25)">
+        <g id="g-svg-839" fill="none" x="25" y="50" width="10" height="50">
+          <g>
             <path
               id="g-svg-5"
               fill="rgba(255,255,255,1)"
               class="background"
-              d="M 0,0 l 10,0 l 0,50 l-10 0 z"
+              d="M 20,25 l 10,0 l 0,50 l-10 0 z"
+              x="20"
+              y="25"
               width="10"
               height="50"
               fill-opacity="0.5"
             />
           </g>
-          <g transform="matrix(1,0,0,1,-1,-5)">
+          <g>
             <line
               id="g-svg-6"
               fill="none"
-              x1="0"
-              y1="0"
-              x2="0"
-              y2="10"
+              x1="24"
+              y1="45"
+              x2="24"
+              y2="55"
               class="icon-left-line"
               stroke="rgba(154,154,154,1)"
               stroke-width="1"
             />
           </g>
-          <g transform="matrix(1,0,0,1,1,-5)">
+          <g>
             <line
               id="g-svg-7"
               fill="none"
-              x1="0"
-              y1="0"
-              x2="0"
-              y2="10"
+              x1="26"
+              y1="45"
+              x2="26"
+              y2="55"
               class="icon-right-line"
               stroke="rgba(154,154,154,1)"
               stroke-width="1"
             />
           </g>
-          <g transform="matrix(1,0,0,1,-5,-25)">
+          <g>
             <line
               id="g-svg-8"
               fill="none"
-              x1="0"
-              y1="0"
-              x2="0"
-              y2="50"
+              x1="20"
+              y1="25"
+              x2="20"
+              y2="75"
               class="border"
               stroke="rgba(232,232,232,1)"
               stroke-width="1"
             />
           </g>
         </g>
-        <g
-          id="g-svg-840"
-          fill="none"
-          width="10"
-          height="50"
-          transform="matrix(1,0,0,1,40,50)"
-        >
-          <g transform="matrix(1,0,0,1,-5,-25)">
+        <g id="g-svg-840" fill="none" x="40" y="50" width="10" height="50">
+          <g>
             <path
               id="g-svg-9"
               fill="rgba(255,255,255,1)"
               class="background"
-              d="M 0,0 l 10,0 l 0,50 l-10 0 z"
+              d="M 35,25 l 10,0 l 0,50 l-10 0 z"
+              x="35"
+              y="25"
               width="10"
               height="50"
               fill-opacity="0.5"
             />
           </g>
-          <g transform="matrix(1,0,0,1,-1,-10)">
+          <g>
             <line
               id="g-svg-10"
               fill="none"
-              x1="0"
-              y1="0"
-              x2="0"
-              y2="20"
+              x1="39"
+              y1="40"
+              x2="39"
+              y2="60"
               class="icon-left-line"
               stroke="rgba(154,154,154,1)"
               stroke-width="1"
             />
           </g>
-          <g transform="matrix(1,0,0,1,1,-10)">
+          <g>
             <line
               id="g-svg-11"
               fill="none"
-              x1="0"
-              y1="0"
-              x2="0"
-              y2="20"
+              x1="41"
+              y1="40"
+              x2="41"
+              y2="60"
               class="icon-right-line"
               stroke="rgba(154,154,154,1)"
               stroke-width="1"
             />
           </g>
-          <g transform="matrix(1,0,0,1,-5,-25)">
+          <g>
             <line
               id="g-svg-12"
               fill="none"
-              x1="0"
-              y1="0"
-              x2="0"
-              y2="50"
+              x1="35"
+              y1="25"
+              x2="35"
+              y2="75"
               class="border"
               stroke="rgba(232,232,232,1)"
               stroke-width="1"
diff --git a/__tests__/integration/snapshots/TimebarIcons.svg b/__tests__/integration/snapshots/TimebarIcons.svg
index 3b9159a41..351b2be49 100644
--- a/__tests__/integration/snapshots/TimebarIcons.svg
+++ b/__tests__/integration/snapshots/TimebarIcons.svg
@@ -79,472 +79,503 @@
       />
     </filter>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,17.500000,17.500000)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1" fill="none">
+        <g>
           <path
             id="g-svg-2"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 17.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="17.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,20,20)">
-          <g transform="matrix(1,0,0,1,-2.500000,-2.500000)">
+        <g id="g-svg-3" fill="none" x="20" y="20">
+          <g>
             <path
               id="g-svg-4"
               fill="rgba(226,226,226,1)"
-              d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              d="M 20,17.5 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              x="17.5"
+              y="17.5"
               width="5"
               height="5"
               opacity="0"
             />
           </g>
-          <g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-0.801030,-0.801030)">
+          <g id="g-svg-5" fill="none">
+            <g>
               <path
                 id="g-svg-1"
                 fill="none"
                 stroke="rgba(255,0,0,1)"
                 stroke-width="0.6989700043360189"
-                d="M 0.23461625379614925,1.367443737531813 A 0.8010299956639811 0.8010299956639811 0 1 1 1.3674437375318131 1.367443737531813"
+                d="M 19.433586258132166,20.56641374186783 A 0.8010299956639811 0.8010299956639811 0 1 1 20.566413741867834 20.56641374186783"
               />
-              <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,0.234616,1.367444)">
+              <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,19.433586,20.566414)">
                 <path
                   id="g-svg-3"
                   fill="rgba(255,0,0,1)"
-                  d="M 2.3979400086720375,2.3979400086720375 L 0,1.1989700043360187 L 2.3979400086720375,0 Z"
-                  transform="translate(-1.1989700043360187,-1.1989700043360187)"
+                  d="M 1.1989700043360187,1.1989700043360187 L -1.1989700043360187,0 L 1.1989700043360187,-1.1989700043360187 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,67.500000,17.500000)">
+        <g>
           <path
             id="g-svg-6"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 67.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="67.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-7" fill="none" transform="matrix(1,0,0,1,70,20)">
-          <g transform="matrix(1,0,0,1,-2.500000,-2.500000)">
+        <g id="g-svg-7" fill="none" x="70" y="20">
+          <g>
             <path
               id="g-svg-8"
               fill="rgba(226,226,226,1)"
-              d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              d="M 70,17.5 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              x="67.5"
+              y="17.5"
               width="5"
               height="5"
               opacity="0"
             />
           </g>
-          <g id="g-svg-9" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-1.500000,-0.866025)">
+          <g id="g-svg-9" fill="none">
+            <g>
               <polygon
                 id="g-svg-8"
                 fill="rgba(255,0,0,1)"
-                points="1.5,0.8660254037844387 1.5,0 0,0.8660254037844387 1.5,1.7320508075688774 1.5,0.8660254037844387 3,0 3,1.7320508075688774 1.5,0.8660254037844387"
+                points="70,20 70,19.133974596215563 68.5,20 70,20.866025403784437 70,20 71.5,19.133974596215563 71.5,20.866025403784437 70,20"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,117.500000,17.500000)">
+        <g>
           <path
             id="g-svg-10"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 117.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="117.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-11" fill="none" transform="matrix(1,0,0,1,120,20)">
-          <g transform="matrix(1,0,0,1,-2.500000,-2.500000)">
+        <g id="g-svg-11" fill="none" x="120" y="20">
+          <g>
             <path
               id="g-svg-12"
               fill="rgba(226,226,226,1)"
-              d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              d="M 120,17.5 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              x="117.5"
+              y="17.5"
               width="5"
               height="5"
               opacity="0"
             />
           </g>
-          <g id="g-svg-13" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-0.692820,-1.200000)">
+          <g id="g-svg-13" fill="none">
+            <g>
               <polygon
                 id="g-svg-13"
                 fill="rgba(255,0,0,1)"
-                points="2.078460969082653,1.2000000000000002 0,0 0,2.4000000000000004 2.078460969082653,1.2000000000000002"
+                points="121.38564064605511,20 119.30717967697245,18.8 119.30717967697245,21.2 121.38564064605511,20"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,167.500000,17.500000)">
+        <g>
           <path
             id="g-svg-14"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 167.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="167.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,170,20)">
-          <g transform="matrix(1,0,0,1,-2.500000,-2.500000)">
+        <g id="g-svg-15" fill="none" x="170" y="20">
+          <g>
             <path
               id="g-svg-16"
               fill="rgba(226,226,226,1)"
-              d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              d="M 170,17.5 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              x="167.5"
+              y="17.5"
               width="5"
               height="5"
               opacity="0"
             />
           </g>
-          <g id="g-svg-17" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-1.500000,-0.866025)">
+          <g id="g-svg-17" fill="none">
+            <g>
               <polygon
                 id="g-svg-18"
                 fill="rgba(255,0,0,1)"
-                points="1.5,0.8660254037844387 1.5,0 3,0.8660254037844387 1.5,1.7320508075688774 1.5,0.8660254037844387 0,0 0,1.7320508075688774 1.5,0.8660254037844387"
+                points="170,20 170,19.133974596215563 171.5,20 170,20.866025403784437 170,20 168.5,19.133974596215563 168.5,20.866025403784437 170,20"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,217.500000,17.500000)">
+        <g>
           <path
             id="g-svg-18"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 217.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="217.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-19" fill="none" transform="matrix(1,0,0,1,220,20)">
-          <g transform="matrix(1,0,0,1,-2.500000,-2.500000)">
+        <g id="g-svg-19" fill="none" x="220" y="20">
+          <g>
             <path
               id="g-svg-20"
               fill="rgba(226,226,226,1)"
-              d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              d="M 220,17.5 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              x="217.5"
+              y="17.5"
               width="5"
               height="5"
               opacity="0"
             />
           </g>
-          <g id="g-svg-21" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-1,-1.500000)">
+          <g id="g-svg-21" fill="none">
+            <g>
               <polygon
                 id="g-svg-23"
                 fill="rgba(255,0,0,1)"
-                points="0,0 0,3 0.5,3 0.5,0 0,0 1.5,0 1.5,3 2,3 2,0"
+                points="219,18.5 219,21.5 219.5,21.5 219.5,18.5 219,18.5 220.5,18.5 220.5,21.5 221,21.5 221,18.5"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,267.500000,17.500000)">
+        <g>
           <path
             id="g-svg-22"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 267.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="267.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-23" fill="none" transform="matrix(1,0,0,1,270,20)">
-          <g transform="matrix(1,0,0,1,-2.500000,-2.500000)">
+        <g id="g-svg-23" fill="none" x="270" y="20">
+          <g>
             <path
               id="g-svg-24"
               fill="rgba(226,226,226,1)"
-              d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              d="M 270,17.5 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              x="267.5"
+              y="17.5"
               width="5"
               height="5"
               opacity="0"
             />
           </g>
-          <g id="g-svg-25" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-1.500000,-1.500000)">
+          <g id="g-svg-25" fill="none">
+            <g>
               <line
                 id="g-svg-28"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="3"
+                x1="268.5"
+                y1="18.5"
+                x2="268.5"
+                y2="21.5"
                 stroke="rgba(255,0,0,1)"
                 stroke-width="0.6989700043360189"
               />
             </g>
-            <g transform="matrix(1,0,0,1,1.500000,-1.500000)">
+            <g>
               <line
                 id="g-svg-29"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="3"
+                x1="271.5"
+                y1="18.5"
+                x2="271.5"
+                y2="21.5"
                 stroke="rgba(255,0,0,1)"
                 stroke-width="0.6989700043360189"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-0.102060,0)">
+            <g>
               <line
                 id="g-svg-30"
                 fill="none"
-                x1="0.10205999132796229"
-                y1="0"
-                x2="0"
-                y2="0"
+                x1="270"
+                y1="20"
+                x2="269.89794000867204"
+                y2="20"
                 stroke="rgba(255,0,0,1)"
                 stroke-width="0.6989700043360189"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,269.897949,20)">
                 <path
                   id="g-svg-32"
                   fill="rgba(255,0,0,1)"
-                  d="M 2.7958800173440754,2.7958800173440754 L 0,1.3979400086720377 L 2.7958800173440754,0 Z"
-                  transform="translate(-1.3979400086720377,-1.3979400086720377)"
+                  d="M 1.3979400086720377,1.3979400086720377 L -1.3979400086720377,0 L 1.3979400086720377,-1.3979400086720377 Z"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <line
                 id="g-svg-33"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0.10205999132796229"
-                y2="0"
+                x1="270"
+                y1="20"
+                x2="270.10205999132796"
+                y2="20"
                 stroke="rgba(255,0,0,1)"
                 stroke-width="0.6989700043360189"
               />
-              <g transform="matrix(-1,0,-0,-1,0.102060,0)">
+              <g transform="matrix(-1,0,-0,-1,270.102051,20)">
                 <path
                   id="g-svg-35"
                   fill="rgba(255,0,0,1)"
-                  d="M 2.7958800173440754,2.7958800173440754 L 0,1.3979400086720377 L 2.7958800173440754,0 Z"
-                  transform="translate(-1.3979400086720377,-1.3979400086720377)"
+                  d="M 1.3979400086720377,1.3979400086720377 L -1.3979400086720377,0 L 1.3979400086720377,-1.3979400086720377 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,317.500000,17.500000)">
+        <g>
           <path
             id="g-svg-26"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 317.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="317.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-27" fill="none" transform="matrix(1,0,0,1,320,20)">
-          <g transform="matrix(1,0,0,1,-2.500000,-2.500000)">
+        <g id="g-svg-27" fill="none" x="320" y="20">
+          <g>
             <path
               id="g-svg-28"
               fill="rgba(226,226,226,1)"
-              d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              d="M 320,17.5 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              x="317.5"
+              y="17.5"
               width="5"
               height="5"
               opacity="0"
             />
           </g>
-          <g id="g-svg-29" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,-1.500000)">
+          <g id="g-svg-29" fill="none">
+            <g>
               <line
                 id="g-svg-40"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="3"
+                x1="320"
+                y1="18.5"
+                x2="320"
+                y2="21.5"
                 stroke="rgba(255,0,0,1)"
                 stroke-width="0.6989700043360189"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-2.897940,0)">
+            <g>
               <line
                 id="g-svg-41"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="1.4999999999999998"
-                y2="0"
+                x1="317.10205999132796"
+                y1="20"
+                x2="318.60205999132796"
+                y2="20"
                 stroke="rgba(255,0,0,1)"
                 stroke-width="0.6989700043360189"
               />
-              <g transform="matrix(-1,0,-0,-1,1.500000,0)">
+              <g transform="matrix(-1,0,-0,-1,318.602051,20)">
                 <path
                   id="g-svg-43"
                   fill="rgba(255,0,0,1)"
-                  d="M 2.7958800173440754,2.7958800173440754 L 0,1.3979400086720377 L 2.7958800173440754,0 Z"
-                  transform="translate(-1.3979400086720377,-1.3979400086720377)"
+                  d="M 1.3979400086720377,1.3979400086720377 L -1.3979400086720377,0 L 1.3979400086720377,-1.3979400086720377 Z"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,1.397940,0)">
+            <g>
               <line
                 id="g-svg-44"
                 fill="none"
-                x1="1.4999999999999998"
-                y1="0"
-                x2="0"
-                y2="0"
+                x1="322.89794000867204"
+                y1="20"
+                x2="321.39794000867204"
+                y2="20"
                 stroke="rgba(255,0,0,1)"
                 stroke-width="0.6989700043360189"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,321.397949,20)">
                 <path
                   id="g-svg-46"
                   fill="rgba(255,0,0,1)"
-                  d="M 2.7958800173440754,2.7958800173440754 L 0,1.3979400086720377 L 2.7958800173440754,0 Z"
-                  transform="translate(-1.3979400086720377,-1.3979400086720377)"
+                  d="M 1.3979400086720377,1.3979400086720377 L -1.3979400086720377,0 L 1.3979400086720377,-1.3979400086720377 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,367.500000,17.500000)">
+        <g>
           <path
             id="g-svg-30"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 367.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="367.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-31" fill="none" transform="matrix(1,0,0,1,370,20)">
-          <g transform="matrix(1,0,0,1,-2.500000,-2.500000)">
+        <g id="g-svg-31" fill="none" x="370" y="20">
+          <g>
             <path
               id="g-svg-32"
               fill="rgba(226,226,226,1)"
-              d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              d="M 370,17.5 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              x="367.5"
+              y="17.5"
               width="5"
               height="5"
               opacity="0"
             />
           </g>
-          <g id="g-svg-33" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-1.500000,-1.500000)">
+          <g id="g-svg-33" fill="none">
+            <g>
               <polyline
                 id="g-svg-51"
                 fill="none"
-                points="0,0 0,3 3,3"
+                points="368.5,18.5 368.5,21.5 371.5,21.5"
                 stroke="rgba(255,0,0,1)"
                 stroke-width="0.6989700043360189"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-0.801030,-0.801030)">
+            <g>
               <polyline
                 id="g-svg-52"
                 fill="none"
-                points="0,0.9030899869919434 0.22577249674798583,0.4515449934959717 0.4515449934959717,0.9030899869919434 0.9030899869919434,0"
+                points="369.19897000433605,20.102059991327963 369.42474250108404,19.65051499783199 369.65051499783203,20.102059991327963 370.10205999132796,19.19897000433602"
                 stroke="rgba(255,0,0,1)"
                 stroke-width="0.6989700043360189"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,417.500000,17.500000)">
+        <g>
           <path
             id="g-svg-34"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 417.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="417.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-35" fill="none" transform="matrix(1,0,0,1,420,20)">
-          <g transform="matrix(1,0,0,1,-2.500000,-2.500000)">
+        <g id="g-svg-35" fill="none" x="420" y="20">
+          <g>
             <path
               id="g-svg-36"
               fill="rgba(226,226,226,1)"
-              d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              d="M 420,17.5 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+              x="417.5"
+              y="17.5"
               width="5"
               height="5"
               opacity="0"
             />
           </g>
-          <g id="g-svg-37" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-1.500000,-1.500000)">
+          <g id="g-svg-37" fill="none">
+            <g>
               <polyline
                 id="g-svg-57"
                 fill="none"
-                points="0,0 0,3 3,3"
+                points="418.5,18.5 418.5,21.5 421.5,21.5"
                 stroke="rgba(255,0,0,1)"
                 stroke-width="0.6989700043360189"
               />
             </g>
-            <g id="g-svg-58" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,-0.102060,0.400515)">
+            <g id="g-svg-58" fill="none">
+              <g>
                 <line
                   id="g-svg-59"
                   fill="none"
-                  x1="0"
-                  y1="0.40051499783199057"
-                  x2="0"
-                  y2="0"
+                  x1="419.89794000867204"
+                  y1="20.80102999566398"
+                  x2="419.89794000867204"
+                  y2="20.40051499783199"
                   class="column"
                   stroke="rgba(255,0,0,1)"
                   stroke-width="0.6989700043360189"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0.358146,-0.801030)">
+              <g>
                 <line
                   id="g-svg-60"
                   fill="none"
-                  x1="0"
-                  y1="1.6020599913279623"
-                  x2="0"
-                  y2="0"
+                  x1="420.35814600780486"
+                  y1="20.80102999566398"
+                  x2="420.35814600780486"
+                  y2="19.19897000433602"
                   class="column"
                   stroke="rgba(255,0,0,1)"
                   stroke-width="0.6989700043360189"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0.818352,0)">
+              <g>
                 <line
                   id="g-svg-61"
                   fill="none"
-                  x1="0"
-                  y1="0.8010299956639811"
-                  x2="0"
-                  y2="0"
+                  x1="420.81835200693763"
+                  y1="20.80102999566398"
+                  x2="420.81835200693763"
+                  y2="20"
                   class="column"
                   stroke="rgba(255,0,0,1)"
                   stroke-width="0.6989700043360189"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,1.278558,-0.801030)">
+              <g>
                 <line
                   id="g-svg-62"
                   fill="none"
-                  x1="0"
-                  y1="1.6020599913279623"
-                  x2="0"
-                  y2="0"
+                  x1="421.2785580060704"
+                  y1="20.80102999566398"
+                  x2="421.2785580060704"
+                  y2="19.19897000433602"
                   class="column"
                   stroke="rgba(255,0,0,1)"
                   stroke-width="0.6989700043360189"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,1.738764,-0.400515)">
+              <g>
                 <line
                   id="g-svg-63"
                   fill="none"
-                  x1="0"
-                  y1="1.2015449934959717"
-                  x2="0"
-                  y2="0"
+                  x1="421.7387640052032"
+                  y1="20.80102999566398"
+                  x2="421.7387640052032"
+                  y2="19.59948500216801"
                   class="column"
                   stroke="rgba(255,0,0,1)"
                   stroke-width="0.6989700043360189"
@@ -553,136 +584,132 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,467.500000,17.500000)">
+        <g>
           <path
             id="g-svg-38"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 467.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="467.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-39" fill="none" transform="matrix(1,0,0,1,470,20)">
-          <g id="g-svg-40" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-68"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-2.500000,-2.500000)">
+        <g id="g-svg-39" fill="none" x="470" y="20">
+          <g id="g-svg-40" fill="none">
+            <g id="g-svg-68" fill="none" x="470" y="20" class="icon">
+              <g>
                 <path
                   id="g-svg-69"
                   fill="rgba(226,226,226,1)"
-                  d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+                  d="M 470,17.5 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+                  x="467.5"
+                  y="17.5"
                   width="5"
                   height="5"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-70" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-0.692820,-1.200000)">
+              <g id="g-svg-70" fill="none">
+                <g>
                   <polygon
                     id="g-svg-71"
                     fill="rgba(255,0,0,1)"
-                    points="2.078460969082653,1.2000000000000002 0,0 0,2.4000000000000004 2.078460969082653,1.2000000000000002"
+                    points="471.3856406460551,20 469.30717967697245,18.8 469.30717967697245,21.2 471.3856406460551,20"
                   />
                 </g>
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,517.500000,17.500000)">
+        <g>
           <path
             id="g-svg-41"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 517.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="517.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-42" fill="none" transform="matrix(1,0,0,1,520,20)">
-          <g id="g-svg-43" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-76"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-2.500000,-2.500000)">
+        <g id="g-svg-42" fill="none" x="520" y="20">
+          <g id="g-svg-43" fill="none">
+            <g id="g-svg-76" fill="none" x="520" y="20" class="icon">
+              <g>
                 <path
                   id="g-svg-77"
                   fill="rgba(226,226,226,1)"
-                  d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+                  d="M 520,17.5 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+                  x="517.5"
+                  y="17.5"
                   width="5"
                   height="5"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-78" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-1.500000,-1.500000)">
+              <g id="g-svg-78" fill="none">
+                <g>
                   <line
                     id="g-svg-79"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="3"
+                    x1="518.5"
+                    y1="18.5"
+                    x2="518.5"
+                    y2="21.5"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="0.6989700043360189"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,1.500000,-1.500000)">
+                <g>
                   <line
                     id="g-svg-80"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="3"
+                    x1="521.5"
+                    y1="18.5"
+                    x2="521.5"
+                    y2="21.5"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="0.6989700043360189"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,-0.102060,0)">
+                <g>
                   <line
                     id="g-svg-81"
                     fill="none"
-                    x1="0.10205999132796229"
-                    y1="0"
-                    x2="0"
-                    y2="0"
+                    x1="520"
+                    y1="20"
+                    x2="519.8979400086721"
+                    y2="20"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="0.6989700043360189"
                   />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,519.897949,20)">
                     <path
                       id="g-svg-92"
                       fill="rgba(255,0,0,1)"
-                      d="M 2.7958800173440754,2.7958800173440754 L 0,1.3979400086720377 L 2.7958800173440754,0 Z"
-                      transform="translate(-1.3979400086720377,-1.3979400086720377)"
+                      d="M 1.3979400086720377,1.3979400086720377 L -1.3979400086720377,0 L 1.3979400086720377,-1.3979400086720377 Z"
                     />
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-84"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0.10205999132796229"
-                    y2="0"
+                    x1="520"
+                    y1="20"
+                    x2="520.1020599913279"
+                    y2="20"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="0.6989700043360189"
                   />
-                  <g transform="matrix(-1,0,-0,-1,0.102060,0)">
+                  <g transform="matrix(-1,0,-0,-1,520.102051,20)">
                     <path
                       id="g-svg-94"
                       fill="rgba(255,0,0,1)"
-                      d="M 2.7958800173440754,2.7958800173440754 L 0,1.3979400086720377 L 2.7958800173440754,0 Z"
-                      transform="translate(-1.3979400086720377,-1.3979400086720377)"
+                      d="M 1.3979400086720377,1.3979400086720377 L -1.3979400086720377,0 L 1.3979400086720377,-1.3979400086720377 Z"
                     />
                   </g>
                 </g>
@@ -690,105 +717,104 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,567.500000,17.500000)">
+        <g>
           <path
             id="g-svg-44"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 567.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="567.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-45" fill="none" transform="matrix(1,0,0,1,570,20)">
-          <g id="g-svg-46" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-95"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-2.500000,-2.500000)">
+        <g id="g-svg-45" fill="none" x="570" y="20">
+          <g id="g-svg-46" fill="none">
+            <g id="g-svg-95" fill="none" x="570" y="20" class="icon">
+              <g>
                 <path
                   id="g-svg-96"
                   fill="rgba(226,226,226,1)"
-                  d="M 2.5,0 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+                  d="M 570,17.5 l 0,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+                  x="567.5"
+                  y="17.5"
                   width="5"
                   height="5"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-97" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-1.500000,-1.500000)">
+              <g id="g-svg-97" fill="none">
+                <g>
                   <polyline
                     id="g-svg-98"
                     fill="none"
-                    points="0,0 0,3 3,3"
+                    points="568.5,18.5 568.5,21.5 571.5,21.5"
                     stroke="rgba(255,0,0,1)"
                     stroke-width="0.6989700043360189"
                   />
                 </g>
-                <g id="g-svg-99" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-0.102060,0.400515)">
+                <g id="g-svg-99" fill="none">
+                  <g>
                     <line
                       id="g-svg-109"
                       fill="none"
-                      x1="0"
-                      y1="0.40051499783199057"
-                      x2="0"
-                      y2="0"
+                      x1="569.8979400086721"
+                      y1="20.80102999566398"
+                      x2="569.8979400086721"
+                      y2="20.40051499783199"
                       class="column"
                       stroke="rgba(255,0,0,1)"
                       stroke-width="0.6989700043360189"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0.358146,-0.801030)">
+                  <g>
                     <line
                       id="g-svg-110"
                       fill="none"
-                      x1="0"
-                      y1="1.6020599913279623"
-                      x2="0"
-                      y2="0"
+                      x1="570.3581460078049"
+                      y1="20.80102999566398"
+                      x2="570.3581460078049"
+                      y2="19.19897000433602"
                       class="column"
                       stroke="rgba(255,0,0,1)"
                       stroke-width="0.6989700043360189"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0.818352,0)">
+                  <g>
                     <line
                       id="g-svg-111"
                       fill="none"
-                      x1="0"
-                      y1="0.8010299956639811"
-                      x2="0"
-                      y2="0"
+                      x1="570.8183520069376"
+                      y1="20.80102999566398"
+                      x2="570.8183520069376"
+                      y2="20"
                       class="column"
                       stroke="rgba(255,0,0,1)"
                       stroke-width="0.6989700043360189"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,1.278558,-0.801030)">
+                  <g>
                     <line
                       id="g-svg-112"
                       fill="none"
-                      x1="0"
-                      y1="1.6020599913279623"
-                      x2="0"
-                      y2="0"
+                      x1="571.2785580060705"
+                      y1="20.80102999566398"
+                      x2="571.2785580060705"
+                      y2="19.19897000433602"
                       class="column"
                       stroke="rgba(255,0,0,1)"
                       stroke-width="0.6989700043360189"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,1.738764,-0.400515)">
+                  <g>
                     <line
                       id="g-svg-113"
                       fill="none"
-                      x1="0"
-                      y1="1.2015449934959717"
-                      x2="0"
-                      y2="0"
+                      x1="571.7387640052033"
+                      y1="20.80102999566398"
+                      x2="571.7387640052033"
+                      y2="19.59948500216801"
                       class="column"
                       stroke="rgba(255,0,0,1)"
                       stroke-width="0.6989700043360189"
@@ -799,70 +825,76 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,617.500000,17.500000)">
+        <g>
           <path
             id="g-svg-47"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 617.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="617.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-48" fill="none" transform="matrix(1,0,0,1,620,20)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-48" fill="none" x="620" y="20">
+          <g>
             <path id="g-svg-49" fill="none" />
           </g>
-          <g id="g-svg-50" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,-1.500000)">
+          <g id="g-svg-50" fill="none">
+            <g>
               <line
                 id="g-svg-114"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="3"
+                x1="620"
+                y1="18.5"
+                x2="620"
+                y2="21.5"
                 stroke="rgba(255,0,0,1)"
                 stroke-width="0.6989700043360189"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,667.500000,17.500000)">
+        <g>
           <path
             id="g-svg-51"
             fill="none"
-            d="M 0,0 l 5,0 l 0,5 l-5 0 z"
+            d="M 667.5,17.5 l 5,0 l 0,5 l-5 0 z"
+            x="667.5"
+            y="17.5"
             width="5"
             height="5"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-52" fill="none" transform="matrix(1,0,0,1,670,20)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-52" fill="none" x="670" y="20">
+          <g>
             <path id="g-svg-53" fill="none" />
           </g>
-          <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-54" fill="none">
             <g
               id="g-svg-119"
               fill="none"
+              x="660"
+              y="10"
               width="20"
               height="20"
-              transform="matrix(1,0,0,1,-10,-10)"
               class="speed"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-120"
                   fill="rgba(255,255,255,1)"
-                  d="M 2,0 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                  d="M 662,10 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                   class="select"
                   width="20"
                   height="20"
+                  x="660"
+                  y="10"
                   stroke="rgba(217,217,217,1)"
-                  stroke-width="0"
                 />
-                <g transform="matrix(1,0,0,1,0,6.500000)">
+                <g>
                   <text
                     id="g-svg-122"
                     fill="rgba(0,0,0,1)"
@@ -877,13 +909,15 @@
                     stroke-width="1"
                     text-anchor="left"
                     class="value"
+                    x="660"
+                    y="16.5"
                     dy="3.5px"
                   >
                     1x
                   </text>
                 </g>
               </g>
-              <g transform="matrix(1,0,0,1,0,21)">
+              <g transform="matrix(1,0,0,1,660,31)">
                 <path
                   id="g-svg-121"
                   fill="rgba(255,255,255,1)"
@@ -895,20 +929,14 @@
                   filter="url(#g-filter-dropshadow-121)"
                   visibility="hidden"
                 />
-                <g
-                  id="g-svg-123"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="dropdown-container"
-                >
+                <g id="g-svg-123" fill="none" class="dropdown-container">
                   <g
                     id="g-svg-124"
                     fill="none"
                     class="dropdown-item"
                     width="20"
-                    transform="matrix(1,0,0,1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-125"
                         fill="rgba(230,247,255,1)"
@@ -917,12 +945,8 @@
                         height="7"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-126"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-126" fill="none">
+                        <g>
                           <text
                             id="g-svg-127"
                             fill="rgba(0,0,0,1)"
@@ -953,7 +977,7 @@
                     width="20"
                     transform="matrix(1,0,0,1,0,7)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-129"
                         fill="rgba(255,255,255,1)"
@@ -962,12 +986,8 @@
                         height="7"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-130"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-130" fill="none">
+                        <g>
                           <text
                             id="g-svg-131"
                             fill="rgba(0,0,0,1)"
@@ -998,7 +1018,7 @@
                     width="20"
                     transform="matrix(1,0,0,1,0,14)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-133"
                         fill="rgba(255,255,255,1)"
@@ -1007,12 +1027,8 @@
                         height="7"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-134"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-134" fill="none">
+                        <g>
                           <text
                             id="g-svg-135"
                             fill="rgba(0,0,0,1)"
@@ -1041,469 +1057,500 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,15,65)">
+        <g>
           <path
             id="g-svg-55"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 15,65 l 10,0 l 0,10 l-10 0 z"
+            x="15"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-56" fill="none" transform="matrix(1,0,0,1,20,70)">
-          <g transform="matrix(1,0,0,1,-5,-5)">
+        <g id="g-svg-56" fill="none" x="20" y="70">
+          <g>
             <path
               id="g-svg-57"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              d="M 19,65 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              x="15"
+              y="65"
               width="10"
               height="10"
               opacity="0"
             />
           </g>
-          <g id="g-svg-58" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-2,-2)">
+          <g id="g-svg-58" fill="none">
+            <g>
               <path
                 id="g-svg-140"
                 fill="none"
                 stroke="rgba(0,128,0,1)"
                 stroke-width="1"
-                d="M 0.5857864376269046,3.414213562373095 A 2 2 0 1 1 3.414213562373095 3.414213562373095"
+                d="M 18.585786437626904,71.41421356237309 A 2 2 0 1 1 21.414213562373096 71.41421356237309"
               />
-              <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,0.585786,3.414214)">
+              <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,18.585787,71.414215)">
                 <path
                   id="g-svg-142"
                   fill="rgba(0,128,0,1)"
-                  d="M 3,3 L 0,1.5 L 3,0 Z"
-                  transform="translate(-1.5,-1.5)"
+                  d="M 1.5,1.5 L -1.5,0 L 1.5,-1.5 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,65,65)">
+        <g>
           <path
             id="g-svg-59"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 65,65 l 10,0 l 0,10 l-10 0 z"
+            x="65"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-60" fill="none" transform="matrix(1,0,0,1,70,70)">
-          <g transform="matrix(1,0,0,1,-5,-5)">
+        <g id="g-svg-60" fill="none" x="70" y="70">
+          <g>
             <path
               id="g-svg-61"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              d="M 69,65 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              x="65"
+              y="65"
               width="10"
               height="10"
               opacity="0"
             />
           </g>
-          <g id="g-svg-62" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-3,-1.732051)">
+          <g id="g-svg-62" fill="none">
+            <g>
               <polygon
                 id="g-svg-147"
                 fill="rgba(0,128,0,1)"
-                points="3,1.7320508075688774 3,0 0,1.7320508075688774 3,3.464101615137755 3,1.7320508075688774 6,0 6,3.464101615137755 3,1.7320508075688774"
+                points="70,70 70,68.26794919243112 67,70 70,71.73205080756888 70,70 73,68.26794919243112 73,71.73205080756888 70,70"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,115,65)">
+        <g>
           <path
             id="g-svg-63"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 115,65 l 10,0 l 0,10 l-10 0 z"
+            x="115"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-64" fill="none" transform="matrix(1,0,0,1,120,70)">
-          <g transform="matrix(1,0,0,1,-5,-5)">
+        <g id="g-svg-64" fill="none" x="120" y="70">
+          <g>
             <path
               id="g-svg-65"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              d="M 119,65 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              x="115"
+              y="65"
               width="10"
               height="10"
               opacity="0"
             />
           </g>
-          <g id="g-svg-66" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-1.385641,-2.400000)">
+          <g id="g-svg-66" fill="none">
+            <g>
               <polygon
                 id="g-svg-152"
                 fill="rgba(0,128,0,1)"
-                points="4.156921938165306,2.4000000000000004 0,0 0,4.800000000000001 4.156921938165306,2.4000000000000004"
+                points="122.7712812921102,70 118.61435935394489,67.6 118.61435935394489,72.4 122.7712812921102,70"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,165,65)">
+        <g>
           <path
             id="g-svg-67"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 165,65 l 10,0 l 0,10 l-10 0 z"
+            x="165"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-68" fill="none" transform="matrix(1,0,0,1,170,70)">
-          <g transform="matrix(1,0,0,1,-5,-5)">
+        <g id="g-svg-68" fill="none" x="170" y="70">
+          <g>
             <path
               id="g-svg-69"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              d="M 169,65 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              x="165"
+              y="65"
               width="10"
               height="10"
               opacity="0"
             />
           </g>
-          <g id="g-svg-70" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-3,-1.732051)">
+          <g id="g-svg-70" fill="none">
+            <g>
               <polygon
                 id="g-svg-157"
                 fill="rgba(0,128,0,1)"
-                points="3,1.7320508075688774 3,0 6,1.7320508075688774 3,3.464101615137755 3,1.7320508075688774 0,0 0,3.464101615137755 3,1.7320508075688774"
+                points="170,70 170,68.26794919243112 173,70 170,71.73205080756888 170,70 167,68.26794919243112 167,71.73205080756888 170,70"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,215,65)">
+        <g>
           <path
             id="g-svg-71"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 215,65 l 10,0 l 0,10 l-10 0 z"
+            x="215"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-72" fill="none" transform="matrix(1,0,0,1,220,70)">
-          <g transform="matrix(1,0,0,1,-5,-5)">
+        <g id="g-svg-72" fill="none" x="220" y="70">
+          <g>
             <path
               id="g-svg-73"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              d="M 219,65 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              x="215"
+              y="65"
               width="10"
               height="10"
               opacity="0"
             />
           </g>
-          <g id="g-svg-74" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-2,-3)">
+          <g id="g-svg-74" fill="none">
+            <g>
               <polygon
                 id="g-svg-162"
                 fill="rgba(0,128,0,1)"
-                points="0,0 0,6 1,6 1,0 0,0 3,0 3,6 4,6 4,0"
+                points="218,67 218,73 219,73 219,67 218,67 221,67 221,73 222,73 222,67"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,265,65)">
+        <g>
           <path
             id="g-svg-75"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 265,65 l 10,0 l 0,10 l-10 0 z"
+            x="265"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-76" fill="none" transform="matrix(1,0,0,1,270,70)">
-          <g transform="matrix(1,0,0,1,-5,-5)">
+        <g id="g-svg-76" fill="none" x="270" y="70">
+          <g>
             <path
               id="g-svg-77"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              d="M 269,65 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              x="265"
+              y="65"
               width="10"
               height="10"
               opacity="0"
             />
           </g>
-          <g id="g-svg-78" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-3,-3)">
+          <g id="g-svg-78" fill="none">
+            <g>
               <line
                 id="g-svg-167"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="6"
+                x1="267"
+                y1="67"
+                x2="267"
+                y2="73"
                 stroke="rgba(0,128,0,1)"
                 stroke-width="1"
               />
             </g>
-            <g transform="matrix(1,0,0,1,3,-3)">
+            <g>
               <line
                 id="g-svg-168"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="6"
+                x1="273"
+                y1="67"
+                x2="273"
+                y2="73"
                 stroke="rgba(0,128,0,1)"
                 stroke-width="1"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-1,0)">
+            <g>
               <line
                 id="g-svg-169"
                 fill="none"
-                x1="1"
-                y1="0"
-                x2="0"
-                y2="0"
+                x1="270"
+                y1="70"
+                x2="269"
+                y2="70"
                 stroke="rgba(0,128,0,1)"
                 stroke-width="1"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,269,70)">
                 <path
                   id="g-svg-171"
                   fill="rgba(0,128,0,1)"
-                  d="M 4,4 L 0,2 L 4,0 Z"
-                  transform="translate(-2,-2)"
+                  d="M 2,2 L -2,0 L 2,-2 Z"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <line
                 id="g-svg-172"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="1"
-                y2="0"
+                x1="270"
+                y1="70"
+                x2="271"
+                y2="70"
                 stroke="rgba(0,128,0,1)"
                 stroke-width="1"
               />
-              <g transform="matrix(-1,0,-0,-1,1,0)">
+              <g transform="matrix(-1,0,-0,-1,271,70)">
                 <path
                   id="g-svg-174"
                   fill="rgba(0,128,0,1)"
-                  d="M 4,4 L 0,2 L 4,0 Z"
-                  transform="translate(-2,-2)"
+                  d="M 2,2 L -2,0 L 2,-2 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,315,65)">
+        <g>
           <path
             id="g-svg-79"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 315,65 l 10,0 l 0,10 l-10 0 z"
+            x="315"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-80" fill="none" transform="matrix(1,0,0,1,320,70)">
-          <g transform="matrix(1,0,0,1,-5,-5)">
+        <g id="g-svg-80" fill="none" x="320" y="70">
+          <g>
             <path
               id="g-svg-81"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              d="M 319,65 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              x="315"
+              y="65"
               width="10"
               height="10"
               opacity="0"
             />
           </g>
-          <g id="g-svg-82" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,-3)">
+          <g id="g-svg-82" fill="none">
+            <g>
               <line
                 id="g-svg-179"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="6"
+                x1="320"
+                y1="67"
+                x2="320"
+                y2="73"
                 stroke="rgba(0,128,0,1)"
                 stroke-width="1"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-5,0)">
+            <g>
               <line
                 id="g-svg-180"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="3"
-                y2="0"
+                x1="315"
+                y1="70"
+                x2="318"
+                y2="70"
                 stroke="rgba(0,128,0,1)"
                 stroke-width="1"
               />
-              <g transform="matrix(-1,0,-0,-1,3,0)">
+              <g transform="matrix(-1,0,-0,-1,318,70)">
                 <path
                   id="g-svg-182"
                   fill="rgba(0,128,0,1)"
-                  d="M 4,4 L 0,2 L 4,0 Z"
-                  transform="translate(-2,-2)"
+                  d="M 2,2 L -2,0 L 2,-2 Z"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,2,0)">
+            <g>
               <line
                 id="g-svg-183"
                 fill="none"
-                x1="3"
-                y1="0"
-                x2="0"
-                y2="0"
+                x1="325"
+                y1="70"
+                x2="322"
+                y2="70"
                 stroke="rgba(0,128,0,1)"
                 stroke-width="1"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,322,70)">
                 <path
                   id="g-svg-185"
                   fill="rgba(0,128,0,1)"
-                  d="M 4,4 L 0,2 L 4,0 Z"
-                  transform="translate(-2,-2)"
+                  d="M 2,2 L -2,0 L 2,-2 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,365,65)">
+        <g>
           <path
             id="g-svg-83"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 365,65 l 10,0 l 0,10 l-10 0 z"
+            x="365"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-84" fill="none" transform="matrix(1,0,0,1,370,70)">
-          <g transform="matrix(1,0,0,1,-5,-5)">
+        <g id="g-svg-84" fill="none" x="370" y="70">
+          <g>
             <path
               id="g-svg-85"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              d="M 369,65 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              x="365"
+              y="65"
               width="10"
               height="10"
               opacity="0"
             />
           </g>
-          <g id="g-svg-86" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-3,-3)">
+          <g id="g-svg-86" fill="none">
+            <g>
               <polyline
                 id="g-svg-190"
                 fill="none"
-                points="0,0 0,6 6,6"
+                points="367,67 367,73 373,73"
                 stroke="rgba(0,128,0,1)"
                 stroke-width="1"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-2,-2)">
+            <g>
               <polyline
                 id="g-svg-191"
                 fill="none"
-                points="0,3 0.75,1.5 1.5,3 3,0"
+                points="368,71 368.75,69.5 369.5,71 371,68"
                 stroke="rgba(0,128,0,1)"
                 stroke-width="1"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,415,65)">
+        <g>
           <path
             id="g-svg-87"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 415,65 l 10,0 l 0,10 l-10 0 z"
+            x="415"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,420,70)">
-          <g transform="matrix(1,0,0,1,-5,-5)">
+        <g id="g-svg-88" fill="none" x="420" y="70">
+          <g>
             <path
               id="g-svg-89"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              d="M 419,65 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+              x="415"
+              y="65"
               width="10"
               height="10"
               opacity="0"
             />
           </g>
-          <g id="g-svg-90" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-3,-3)">
+          <g id="g-svg-90" fill="none">
+            <g>
               <polyline
                 id="g-svg-196"
                 fill="none"
-                points="0,0 0,6 6,6"
+                points="417,67 417,73 423,73"
                 stroke="rgba(0,128,0,1)"
                 stroke-width="1"
               />
             </g>
-            <g id="g-svg-197" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,-1,1)">
+            <g id="g-svg-197" fill="none">
+              <g>
                 <line
                   id="g-svg-198"
                   fill="none"
-                  x1="0"
-                  y1="1"
-                  x2="0"
-                  y2="0"
+                  x1="419"
+                  y1="72"
+                  x2="419"
+                  y2="71"
                   class="column"
                   stroke="rgba(0,128,0,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0,-2)">
+              <g>
                 <line
                   id="g-svg-199"
                   fill="none"
-                  x1="0"
-                  y1="4"
-                  x2="0"
-                  y2="0"
+                  x1="420"
+                  y1="72"
+                  x2="420"
+                  y2="68"
                   class="column"
                   stroke="rgba(0,128,0,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,1,0)">
+              <g>
                 <line
                   id="g-svg-200"
                   fill="none"
-                  x1="0"
-                  y1="2"
-                  x2="0"
-                  y2="0"
+                  x1="421"
+                  y1="72"
+                  x2="421"
+                  y2="70"
                   class="column"
                   stroke="rgba(0,128,0,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,2,-2)">
+              <g>
                 <line
                   id="g-svg-201"
                   fill="none"
-                  x1="0"
-                  y1="4"
-                  x2="0"
-                  y2="0"
+                  x1="422"
+                  y1="72"
+                  x2="422"
+                  y2="68"
                   class="column"
                   stroke="rgba(0,128,0,1)"
                   stroke-width="1"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,3,-1)">
+              <g>
                 <line
                   id="g-svg-202"
                   fill="none"
-                  x1="0"
-                  y1="3"
-                  x2="0"
-                  y2="0"
+                  x1="423"
+                  y1="72"
+                  x2="423"
+                  y2="69"
                   class="column"
                   stroke="rgba(0,128,0,1)"
                   stroke-width="1"
@@ -1512,136 +1559,132 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,465,65)">
+        <g>
           <path
             id="g-svg-91"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 465,65 l 10,0 l 0,10 l-10 0 z"
+            x="465"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-92" fill="none" transform="matrix(1,0,0,1,470,70)">
-          <g id="g-svg-93" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-207"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-5,-5)">
+        <g id="g-svg-92" fill="none" x="470" y="70">
+          <g id="g-svg-93" fill="none">
+            <g id="g-svg-207" fill="none" x="470" y="70" class="icon">
+              <g>
                 <path
                   id="g-svg-208"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+                  d="M 469,65 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+                  x="465"
+                  y="65"
                   width="10"
                   height="10"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-209" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-1.385641,-2.400000)">
+              <g id="g-svg-209" fill="none">
+                <g>
                   <polygon
                     id="g-svg-210"
                     fill="rgba(0,128,0,1)"
-                    points="4.156921938165306,2.4000000000000004 0,0 0,4.800000000000001 4.156921938165306,2.4000000000000004"
+                    points="472.7712812921102,70 468.6143593539449,67.6 468.6143593539449,72.4 472.7712812921102,70"
                   />
                 </g>
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,515,65)">
+        <g>
           <path
             id="g-svg-94"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 515,65 l 10,0 l 0,10 l-10 0 z"
+            x="515"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-95" fill="none" transform="matrix(1,0,0,1,520,70)">
-          <g id="g-svg-96" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-215"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-5,-5)">
+        <g id="g-svg-95" fill="none" x="520" y="70">
+          <g id="g-svg-96" fill="none">
+            <g id="g-svg-215" fill="none" x="520" y="70" class="icon">
+              <g>
                 <path
                   id="g-svg-216"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+                  d="M 519,65 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+                  x="515"
+                  y="65"
                   width="10"
                   height="10"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-217" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-3,-3)">
+              <g id="g-svg-217" fill="none">
+                <g>
                   <line
                     id="g-svg-218"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="6"
+                    x1="517"
+                    y1="67"
+                    x2="517"
+                    y2="73"
                     stroke="rgba(0,128,0,1)"
                     stroke-width="1"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,3,-3)">
+                <g>
                   <line
                     id="g-svg-219"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="6"
+                    x1="523"
+                    y1="67"
+                    x2="523"
+                    y2="73"
                     stroke="rgba(0,128,0,1)"
                     stroke-width="1"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,-1,0)">
+                <g>
                   <line
                     id="g-svg-220"
                     fill="none"
-                    x1="1"
-                    y1="0"
-                    x2="0"
-                    y2="0"
+                    x1="520"
+                    y1="70"
+                    x2="519"
+                    y2="70"
                     stroke="rgba(0,128,0,1)"
                     stroke-width="1"
                   />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,519,70)">
                     <path
                       id="g-svg-231"
                       fill="rgba(0,128,0,1)"
-                      d="M 4,4 L 0,2 L 4,0 Z"
-                      transform="translate(-2,-2)"
+                      d="M 2,2 L -2,0 L 2,-2 Z"
                     />
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-223"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="1"
-                    y2="0"
+                    x1="520"
+                    y1="70"
+                    x2="521"
+                    y2="70"
                     stroke="rgba(0,128,0,1)"
                     stroke-width="1"
                   />
-                  <g transform="matrix(-1,0,-0,-1,1,0)">
+                  <g transform="matrix(-1,0,-0,-1,521,70)">
                     <path
                       id="g-svg-233"
                       fill="rgba(0,128,0,1)"
-                      d="M 4,4 L 0,2 L 4,0 Z"
-                      transform="translate(-2,-2)"
+                      d="M 2,2 L -2,0 L 2,-2 Z"
                     />
                   </g>
                 </g>
@@ -1649,105 +1692,104 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,565,65)">
+        <g>
           <path
             id="g-svg-97"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 565,65 l 10,0 l 0,10 l-10 0 z"
+            x="565"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-98" fill="none" transform="matrix(1,0,0,1,570,70)">
-          <g id="g-svg-99" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-234"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-5,-5)">
+        <g id="g-svg-98" fill="none" x="570" y="70">
+          <g id="g-svg-99" fill="none">
+            <g id="g-svg-234" fill="none" x="570" y="70" class="icon">
+              <g>
                 <path
                   id="g-svg-235"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+                  d="M 569,65 l 2,0 a 4,4,0,0,1,4,4 l 0,2 a 4,4,0,0,1,-4,4 l -2,0 a 4,4,0,0,1,-4,-4 l 0,-2 a 4,4,0,0,1,4,-4 z"
+                  x="565"
+                  y="65"
                   width="10"
                   height="10"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-236" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-3,-3)">
+              <g id="g-svg-236" fill="none">
+                <g>
                   <polyline
                     id="g-svg-237"
                     fill="none"
-                    points="0,0 0,6 6,6"
+                    points="567,67 567,73 573,73"
                     stroke="rgba(0,128,0,1)"
                     stroke-width="1"
                   />
                 </g>
-                <g id="g-svg-238" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-1,1)">
+                <g id="g-svg-238" fill="none">
+                  <g>
                     <line
                       id="g-svg-248"
                       fill="none"
-                      x1="0"
-                      y1="1"
-                      x2="0"
-                      y2="0"
+                      x1="569"
+                      y1="72"
+                      x2="569"
+                      y2="71"
                       class="column"
                       stroke="rgba(0,128,0,1)"
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0,-2)">
+                  <g>
                     <line
                       id="g-svg-249"
                       fill="none"
-                      x1="0"
-                      y1="4"
-                      x2="0"
-                      y2="0"
+                      x1="570"
+                      y1="72"
+                      x2="570"
+                      y2="68"
                       class="column"
                       stroke="rgba(0,128,0,1)"
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,1,0)">
+                  <g>
                     <line
                       id="g-svg-250"
                       fill="none"
-                      x1="0"
-                      y1="2"
-                      x2="0"
-                      y2="0"
+                      x1="571"
+                      y1="72"
+                      x2="571"
+                      y2="70"
                       class="column"
                       stroke="rgba(0,128,0,1)"
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,2,-2)">
+                  <g>
                     <line
                       id="g-svg-251"
                       fill="none"
-                      x1="0"
-                      y1="4"
-                      x2="0"
-                      y2="0"
+                      x1="572"
+                      y1="72"
+                      x2="572"
+                      y2="68"
                       class="column"
                       stroke="rgba(0,128,0,1)"
                       stroke-width="1"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,3,-1)">
+                  <g>
                     <line
                       id="g-svg-252"
                       fill="none"
-                      x1="0"
-                      y1="3"
-                      x2="0"
-                      y2="0"
+                      x1="573"
+                      y1="72"
+                      x2="573"
+                      y2="69"
                       class="column"
                       stroke="rgba(0,128,0,1)"
                       stroke-width="1"
@@ -1758,70 +1800,76 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,615,65)">
+        <g>
           <path
             id="g-svg-100"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 615,65 l 10,0 l 0,10 l-10 0 z"
+            x="615"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-101" fill="none" transform="matrix(1,0,0,1,620,70)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-101" fill="none" x="620" y="70">
+          <g>
             <path id="g-svg-102" fill="none" />
           </g>
-          <g id="g-svg-103" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,-3)">
+          <g id="g-svg-103" fill="none">
+            <g>
               <line
                 id="g-svg-253"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="6"
+                x1="620"
+                y1="67"
+                x2="620"
+                y2="73"
                 stroke="rgba(0,128,0,1)"
                 stroke-width="1"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,665,65)">
+        <g>
           <path
             id="g-svg-104"
             fill="none"
-            d="M 0,0 l 10,0 l 0,10 l-10 0 z"
+            d="M 665,65 l 10,0 l 0,10 l-10 0 z"
+            x="665"
+            y="65"
             width="10"
             height="10"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-105" fill="none" transform="matrix(1,0,0,1,670,70)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-105" fill="none" x="670" y="70">
+          <g>
             <path id="g-svg-106" fill="none" />
           </g>
-          <g id="g-svg-107" fill="none" transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-107" fill="none">
             <g
               id="g-svg-258"
               fill="none"
+              x="660"
+              y="60"
               width="20"
               height="20"
-              transform="matrix(1,0,0,1,-10,-10)"
               class="speed"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-259"
                   fill="rgba(255,255,255,1)"
-                  d="M 2,0 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                  d="M 662,60 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                   class="select"
                   width="20"
                   height="20"
+                  x="660"
+                  y="60"
                   stroke="rgba(217,217,217,1)"
-                  stroke-width="0"
                 />
-                <g transform="matrix(1,0,0,1,0,4.500000)">
+                <g>
                   <text
                     id="g-svg-261"
                     fill="rgba(0,0,0,1)"
@@ -1836,13 +1884,15 @@
                     stroke-width="1"
                     text-anchor="left"
                     class="value"
+                    x="660"
+                    y="64.5"
                     dy="5.5px"
                   >
                     1x
                   </text>
                 </g>
               </g>
-              <g transform="matrix(1,0,0,1,0,22)">
+              <g transform="matrix(1,0,0,1,660,82)">
                 <path
                   id="g-svg-260"
                   fill="rgba(255,255,255,1)"
@@ -1854,20 +1904,14 @@
                   filter="url(#g-filter-dropshadow-260)"
                   visibility="hidden"
                 />
-                <g
-                  id="g-svg-262"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="dropdown-container"
-                >
+                <g id="g-svg-262" fill="none" class="dropdown-container">
                   <g
                     id="g-svg-263"
                     fill="none"
                     class="dropdown-item"
                     width="20"
-                    transform="matrix(1,0,0,1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-264"
                         fill="rgba(230,247,255,1)"
@@ -1876,12 +1920,8 @@
                         height="11"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-265"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-265" fill="none">
+                        <g>
                           <text
                             id="g-svg-266"
                             fill="rgba(0,0,0,1)"
@@ -1912,7 +1952,7 @@
                     width="20"
                     transform="matrix(1,0,0,1,0,11)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-268"
                         fill="rgba(255,255,255,1)"
@@ -1921,12 +1961,8 @@
                         height="11"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-269"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-269" fill="none">
+                        <g>
                           <text
                             id="g-svg-270"
                             fill="rgba(0,0,0,1)"
@@ -1957,7 +1993,7 @@
                     width="20"
                     transform="matrix(1,0,0,1,0,22)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-272"
                         fill="rgba(255,255,255,1)"
@@ -1966,12 +2002,8 @@
                         height="11"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-273"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-273" fill="none">
+                        <g>
                           <text
                             id="g-svg-274"
                             fill="rgba(0,0,0,1)"
@@ -2000,469 +2032,500 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,12.500000,112.500000)">
+        <g>
           <path
             id="g-svg-108"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 12.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="12.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-109" fill="none" transform="matrix(1,0,0,1,20,120)">
-          <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+        <g id="g-svg-109" fill="none" x="20" y="120">
+          <g>
             <path
               id="g-svg-110"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              d="M 16.5,112.5 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              x="12.5"
+              y="112.5"
               width="15"
               height="15"
               opacity="0"
             />
           </g>
-          <g id="g-svg-111" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-3.323909,-3.323909)">
+          <g id="g-svg-111" fill="none">
+            <g>
               <path
                 id="g-svg-279"
                 fill="none"
                 stroke="rgba(0,0,255,1)"
                 stroke-width="1.1760912590556813"
-                d="M 0.9735503301773512,5.674267151711286 A 3.3239087409443187 3.3239087409443187 0 1 1 5.674267151711286 5.674267151711286"
+                d="M 17.64964158923303,122.35035841076697 A 3.3239087409443187 3.3239087409443187 0 1 1 22.350358410766965 122.35035841076697"
               />
-              <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,0.973550,5.674267)">
+              <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,17.649641,122.350357)">
                 <path
                   id="g-svg-281"
                   fill="rgba(0,0,255,1)"
-                  d="M 3.3521825181113627,3.3521825181113627 L 0,1.6760912590556813 L 3.3521825181113627,0 Z"
-                  transform="translate(-1.6760912590556813,-1.6760912590556813)"
+                  d="M 1.6760912590556813,1.6760912590556813 L -1.6760912590556813,0 L 1.6760912590556813,-1.6760912590556813 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,62.500000,112.500000)">
+        <g>
           <path
             id="g-svg-112"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 62.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="62.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-113" fill="none" transform="matrix(1,0,0,1,70,120)">
-          <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+        <g id="g-svg-113" fill="none" x="70" y="120">
+          <g>
             <path
               id="g-svg-114"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              d="M 66.5,112.5 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              x="62.5"
+              y="112.5"
               width="15"
               height="15"
               opacity="0"
             />
           </g>
-          <g id="g-svg-115" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-4.500000,-2.598076)">
+          <g id="g-svg-115" fill="none">
+            <g>
               <polygon
                 id="g-svg-286"
                 fill="rgba(0,0,255,1)"
-                points="4.5,2.598076211353316 4.5,0 0,2.598076211353316 4.5,5.196152422706632 4.5,2.598076211353316 9,0 9,5.196152422706632 4.5,2.598076211353316"
+                points="70,120 70,117.40192378864668 65.5,120 70,122.59807621135332 70,120 74.5,117.40192378864668 74.5,122.59807621135332 70,120"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,112.500000,112.500000)">
+        <g>
           <path
             id="g-svg-116"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 112.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="112.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-117" fill="none" transform="matrix(1,0,0,1,120,120)">
-          <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+        <g id="g-svg-117" fill="none" x="120" y="120">
+          <g>
             <path
               id="g-svg-118"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              d="M 116.5,112.5 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              x="112.5"
+              y="112.5"
               width="15"
               height="15"
               opacity="0"
             />
           </g>
-          <g id="g-svg-119" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-2.078461,-3.600000)">
+          <g id="g-svg-119" fill="none">
+            <g>
               <polygon
                 id="g-svg-291"
                 fill="rgba(0,0,255,1)"
-                points="6.235382907247959,3.6 0,0 0,7.2 6.235382907247959,3.6"
+                points="124.15692193816531,120 117.92153903091734,116.4 117.92153903091734,123.6 124.15692193816531,120"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,162.500000,112.500000)">
+        <g>
           <path
             id="g-svg-120"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 162.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="162.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-121" fill="none" transform="matrix(1,0,0,1,170,120)">
-          <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+        <g id="g-svg-121" fill="none" x="170" y="120">
+          <g>
             <path
               id="g-svg-122"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              d="M 166.5,112.5 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              x="162.5"
+              y="112.5"
               width="15"
               height="15"
               opacity="0"
             />
           </g>
-          <g id="g-svg-123" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-4.500000,-2.598076)">
+          <g id="g-svg-123" fill="none">
+            <g>
               <polygon
                 id="g-svg-296"
                 fill="rgba(0,0,255,1)"
-                points="4.5,2.598076211353316 4.5,0 9,2.598076211353316 4.5,5.196152422706632 4.5,2.598076211353316 0,0 0,5.196152422706632 4.5,2.598076211353316"
+                points="170,120 170,117.40192378864668 174.5,120 170,122.59807621135332 170,120 165.5,117.40192378864668 165.5,122.59807621135332 170,120"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,212.500000,112.500000)">
+        <g>
           <path
             id="g-svg-124"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 212.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="212.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-125" fill="none" transform="matrix(1,0,0,1,220,120)">
-          <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+        <g id="g-svg-125" fill="none" x="220" y="120">
+          <g>
             <path
               id="g-svg-126"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              d="M 216.5,112.5 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              x="212.5"
+              y="112.5"
               width="15"
               height="15"
               opacity="0"
             />
           </g>
-          <g id="g-svg-127" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-3,-4.500000)">
+          <g id="g-svg-127" fill="none">
+            <g>
               <polygon
                 id="g-svg-301"
                 fill="rgba(0,0,255,1)"
-                points="0,0 0,9 1.5,9 1.5,0 0,0 4.5,0 4.5,9 6,9 6,0"
+                points="217,115.5 217,124.5 218.5,124.5 218.5,115.5 217,115.5 221.5,115.5 221.5,124.5 223,124.5 223,115.5"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,262.500000,112.500000)">
+        <g>
           <path
             id="g-svg-128"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 262.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="262.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-129" fill="none" transform="matrix(1,0,0,1,270,120)">
-          <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+        <g id="g-svg-129" fill="none" x="270" y="120">
+          <g>
             <path
               id="g-svg-130"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              d="M 266.5,112.5 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              x="262.5"
+              y="112.5"
               width="15"
               height="15"
               opacity="0"
             />
           </g>
-          <g id="g-svg-131" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-4.500000,-4.500000)">
+          <g id="g-svg-131" fill="none">
+            <g>
               <line
                 id="g-svg-306"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="9"
+                x1="265.5"
+                y1="115.5"
+                x2="265.5"
+                y2="124.5"
                 stroke="rgba(0,0,255,1)"
                 stroke-width="1.1760912590556813"
               />
             </g>
-            <g transform="matrix(1,0,0,1,4.500000,-4.500000)">
+            <g>
               <line
                 id="g-svg-307"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="9"
+                x1="274.5"
+                y1="115.5"
+                x2="274.5"
+                y2="124.5"
                 stroke="rgba(0,0,255,1)"
                 stroke-width="1.1760912590556813"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-2.147817,0)">
+            <g>
               <line
                 id="g-svg-308"
                 fill="none"
-                x1="2.1478174818886373"
-                y1="0"
-                x2="0"
-                y2="0"
+                x1="270"
+                y1="120"
+                x2="267.85218251811136"
+                y2="120"
                 stroke="rgba(0,0,255,1)"
                 stroke-width="1.1760912590556813"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,267.852173,120)">
                 <path
                   id="g-svg-310"
                   fill="rgba(0,0,255,1)"
-                  d="M 4.704365036222725,4.704365036222725 L 0,2.3521825181113627 L 4.704365036222725,0 Z"
-                  transform="translate(-2.3521825181113627,-2.3521825181113627)"
+                  d="M 2.3521825181113627,2.3521825181113627 L -2.3521825181113627,0 L 2.3521825181113627,-2.3521825181113627 Z"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <line
                 id="g-svg-311"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="2.1478174818886373"
-                y2="0"
+                x1="270"
+                y1="120"
+                x2="272.14781748188864"
+                y2="120"
                 stroke="rgba(0,0,255,1)"
                 stroke-width="1.1760912590556813"
               />
-              <g transform="matrix(-1,0,-0,-1,2.147817,0)">
+              <g transform="matrix(-1,0,-0,-1,272.147827,120)">
                 <path
                   id="g-svg-313"
                   fill="rgba(0,0,255,1)"
-                  d="M 4.704365036222725,4.704365036222725 L 0,2.3521825181113627 L 4.704365036222725,0 Z"
-                  transform="translate(-2.3521825181113627,-2.3521825181113627)"
+                  d="M 2.3521825181113627,2.3521825181113627 L -2.3521825181113627,0 L 2.3521825181113627,-2.3521825181113627 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,312.500000,112.500000)">
+        <g>
           <path
             id="g-svg-132"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 312.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="312.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-133" fill="none" transform="matrix(1,0,0,1,320,120)">
-          <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+        <g id="g-svg-133" fill="none" x="320" y="120">
+          <g>
             <path
               id="g-svg-134"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              d="M 316.5,112.5 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              x="312.5"
+              y="112.5"
               width="15"
               height="15"
               opacity="0"
             />
           </g>
-          <g id="g-svg-135" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,-4.500000)">
+          <g id="g-svg-135" fill="none">
+            <g>
               <line
                 id="g-svg-318"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="9"
+                x1="320"
+                y1="115.5"
+                x2="320"
+                y2="124.5"
                 stroke="rgba(0,0,255,1)"
                 stroke-width="1.1760912590556813"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-6.852182,0)">
+            <g>
               <line
                 id="g-svg-319"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="4.5"
-                y2="0"
+                x1="313.14781748188864"
+                y1="120"
+                x2="317.64781748188864"
+                y2="120"
                 stroke="rgba(0,0,255,1)"
                 stroke-width="1.1760912590556813"
               />
-              <g transform="matrix(-1,0,-0,-1,4.500000,0)">
+              <g transform="matrix(-1,0,-0,-1,317.647827,120)">
                 <path
                   id="g-svg-321"
                   fill="rgba(0,0,255,1)"
-                  d="M 4.704365036222725,4.704365036222725 L 0,2.3521825181113627 L 4.704365036222725,0 Z"
-                  transform="translate(-2.3521825181113627,-2.3521825181113627)"
+                  d="M 2.3521825181113627,2.3521825181113627 L -2.3521825181113627,0 L 2.3521825181113627,-2.3521825181113627 Z"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,2.352183,0)">
+            <g>
               <line
                 id="g-svg-322"
                 fill="none"
-                x1="4.5"
-                y1="0"
-                x2="0"
-                y2="0"
+                x1="326.85218251811136"
+                y1="120"
+                x2="322.35218251811136"
+                y2="120"
                 stroke="rgba(0,0,255,1)"
                 stroke-width="1.1760912590556813"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,322.352173,120)">
                 <path
                   id="g-svg-324"
                   fill="rgba(0,0,255,1)"
-                  d="M 4.704365036222725,4.704365036222725 L 0,2.3521825181113627 L 4.704365036222725,0 Z"
-                  transform="translate(-2.3521825181113627,-2.3521825181113627)"
+                  d="M 2.3521825181113627,2.3521825181113627 L -2.3521825181113627,0 L 2.3521825181113627,-2.3521825181113627 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,362.500000,112.500000)">
+        <g>
           <path
             id="g-svg-136"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 362.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="362.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-137" fill="none" transform="matrix(1,0,0,1,370,120)">
-          <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+        <g id="g-svg-137" fill="none" x="370" y="120">
+          <g>
             <path
               id="g-svg-138"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              d="M 366.5,112.5 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              x="362.5"
+              y="112.5"
               width="15"
               height="15"
               opacity="0"
             />
           </g>
-          <g id="g-svg-139" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-4.500000,-4.500000)">
+          <g id="g-svg-139" fill="none">
+            <g>
               <polyline
                 id="g-svg-329"
                 fill="none"
-                points="0,0 0,9 9,9"
+                points="365.5,115.5 365.5,124.5 374.5,124.5"
                 stroke="rgba(0,0,255,1)"
                 stroke-width="1.1760912590556813"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-3.323909,-3.323909)">
+            <g>
               <polyline
                 id="g-svg-330"
                 fill="none"
-                points="0,5.471726222832956 1.367931555708239,2.735863111416478 2.735863111416478,5.471726222832956 5.471726222832956,0"
+                points="366.6760912590557,122.14781748188864 368.04402281476393,119.41195437047216 369.41195437047213,122.14781748188864 372.14781748188864,116.67609125905568"
                 stroke="rgba(0,0,255,1)"
                 stroke-width="1.1760912590556813"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,412.500000,112.500000)">
+        <g>
           <path
             id="g-svg-140"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 412.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="412.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-141" fill="none" transform="matrix(1,0,0,1,420,120)">
-          <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+        <g id="g-svg-141" fill="none" x="420" y="120">
+          <g>
             <path
               id="g-svg-142"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              d="M 416.5,112.5 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+              x="412.5"
+              y="112.5"
               width="15"
               height="15"
               opacity="0"
             />
           </g>
-          <g id="g-svg-143" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-4.500000,-4.500000)">
+          <g id="g-svg-143" fill="none">
+            <g>
               <polyline
                 id="g-svg-335"
                 fill="none"
-                points="0,0 0,9 9,9"
+                points="415.5,115.5 415.5,124.5 424.5,124.5"
                 stroke="rgba(0,0,255,1)"
                 stroke-width="1.1760912590556813"
               />
             </g>
-            <g id="g-svg-336" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,-2.147817,1.661954)">
+            <g id="g-svg-336" fill="none">
+              <g>
                 <line
                   id="g-svg-337"
                   fill="none"
-                  x1="0"
-                  y1="1.6619543704721593"
-                  x2="0"
-                  y2="0"
+                  x1="417.85218251811136"
+                  y1="123.32390874094432"
+                  x2="417.85218251811136"
+                  y2="121.66195437047216"
                   class="column"
                   stroke="rgba(0,0,255,1)"
                   stroke-width="1.1760912590556813"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,-0.583036,-3.323909)">
+              <g>
                 <line
                   id="g-svg-338"
                   fill="none"
-                  x1="0"
-                  y1="6.647817481888637"
-                  x2="0"
-                  y2="0"
+                  x1="419.4169642663002"
+                  y1="123.32390874094432"
+                  x2="419.4169642663002"
+                  y2="116.67609125905568"
                   class="column"
                   stroke="rgba(0,0,255,1)"
                   stroke-width="1.1760912590556813"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0.981746,0)">
+              <g>
                 <line
                   id="g-svg-339"
                   fill="none"
-                  x1="0"
-                  y1="3.3239087409443187"
-                  x2="0"
-                  y2="0"
+                  x1="420.9817460144891"
+                  y1="123.32390874094432"
+                  x2="420.9817460144891"
+                  y2="120"
                   class="column"
                   stroke="rgba(0,0,255,1)"
                   stroke-width="1.1760912590556813"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,2.546528,-3.323909)">
+              <g>
                 <line
                   id="g-svg-340"
                   fill="none"
-                  x1="0"
-                  y1="6.647817481888637"
-                  x2="0"
-                  y2="0"
+                  x1="422.54652776267795"
+                  y1="123.32390874094432"
+                  x2="422.54652776267795"
+                  y2="116.67609125905568"
                   class="column"
                   stroke="rgba(0,0,255,1)"
                   stroke-width="1.1760912590556813"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,4.111310,-1.661954)">
+              <g>
                 <line
                   id="g-svg-341"
                   fill="none"
-                  x1="0"
-                  y1="4.985863111416478"
-                  x2="0"
-                  y2="0"
+                  x1="424.1113095108668"
+                  y1="123.32390874094432"
+                  x2="424.1113095108668"
+                  y2="118.33804562952784"
                   class="column"
                   stroke="rgba(0,0,255,1)"
                   stroke-width="1.1760912590556813"
@@ -2471,136 +2534,132 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,462.500000,112.500000)">
+        <g>
           <path
             id="g-svg-144"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 462.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="462.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-145" fill="none" transform="matrix(1,0,0,1,470,120)">
-          <g id="g-svg-146" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-346"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+        <g id="g-svg-145" fill="none" x="470" y="120">
+          <g id="g-svg-146" fill="none">
+            <g id="g-svg-346" fill="none" x="470" y="120" class="icon">
+              <g>
                 <path
                   id="g-svg-347"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+                  d="M 466.5,112.5 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+                  x="462.5"
+                  y="112.5"
                   width="15"
                   height="15"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-348" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-2.078461,-3.600000)">
+              <g id="g-svg-348" fill="none">
+                <g>
                   <polygon
                     id="g-svg-349"
                     fill="rgba(0,0,255,1)"
-                    points="6.235382907247959,3.6 0,0 0,7.2 6.235382907247959,3.6"
+                    points="474.1569219381653,120 467.92153903091736,116.4 467.92153903091736,123.6 474.1569219381653,120"
                   />
                 </g>
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,512.500000,112.500000)">
+        <g>
           <path
             id="g-svg-147"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 512.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="512.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-148" fill="none" transform="matrix(1,0,0,1,520,120)">
-          <g id="g-svg-149" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-354"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+        <g id="g-svg-148" fill="none" x="520" y="120">
+          <g id="g-svg-149" fill="none">
+            <g id="g-svg-354" fill="none" x="520" y="120" class="icon">
+              <g>
                 <path
                   id="g-svg-355"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+                  d="M 516.5,112.5 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+                  x="512.5"
+                  y="112.5"
                   width="15"
                   height="15"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-356" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-4.500000,-4.500000)">
+              <g id="g-svg-356" fill="none">
+                <g>
                   <line
                     id="g-svg-357"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="9"
+                    x1="515.5"
+                    y1="115.5"
+                    x2="515.5"
+                    y2="124.5"
                     stroke="rgba(0,0,255,1)"
                     stroke-width="1.1760912590556813"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,4.500000,-4.500000)">
+                <g>
                   <line
                     id="g-svg-358"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="9"
+                    x1="524.5"
+                    y1="115.5"
+                    x2="524.5"
+                    y2="124.5"
                     stroke="rgba(0,0,255,1)"
                     stroke-width="1.1760912590556813"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,-2.147817,0)">
+                <g>
                   <line
                     id="g-svg-359"
                     fill="none"
-                    x1="2.1478174818886373"
-                    y1="0"
-                    x2="0"
-                    y2="0"
+                    x1="520"
+                    y1="120"
+                    x2="517.8521825181114"
+                    y2="120"
                     stroke="rgba(0,0,255,1)"
                     stroke-width="1.1760912590556813"
                   />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,517.852173,120)">
                     <path
                       id="g-svg-370"
                       fill="rgba(0,0,255,1)"
-                      d="M 4.704365036222725,4.704365036222725 L 0,2.3521825181113627 L 4.704365036222725,0 Z"
-                      transform="translate(-2.3521825181113627,-2.3521825181113627)"
+                      d="M 2.3521825181113627,2.3521825181113627 L -2.3521825181113627,0 L 2.3521825181113627,-2.3521825181113627 Z"
                     />
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-362"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="2.1478174818886373"
-                    y2="0"
+                    x1="520"
+                    y1="120"
+                    x2="522.1478174818886"
+                    y2="120"
                     stroke="rgba(0,0,255,1)"
                     stroke-width="1.1760912590556813"
                   />
-                  <g transform="matrix(-1,0,-0,-1,2.147817,0)">
+                  <g transform="matrix(-1,0,-0,-1,522.147827,120)">
                     <path
                       id="g-svg-372"
                       fill="rgba(0,0,255,1)"
-                      d="M 4.704365036222725,4.704365036222725 L 0,2.3521825181113627 L 4.704365036222725,0 Z"
-                      transform="translate(-2.3521825181113627,-2.3521825181113627)"
+                      d="M 2.3521825181113627,2.3521825181113627 L -2.3521825181113627,0 L 2.3521825181113627,-2.3521825181113627 Z"
                     />
                   </g>
                 </g>
@@ -2608,105 +2667,104 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,562.500000,112.500000)">
+        <g>
           <path
             id="g-svg-150"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 562.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="562.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-151" fill="none" transform="matrix(1,0,0,1,570,120)">
-          <g id="g-svg-152" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-373"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+        <g id="g-svg-151" fill="none" x="570" y="120">
+          <g id="g-svg-152" fill="none">
+            <g id="g-svg-373" fill="none" x="570" y="120" class="icon">
+              <g>
                 <path
                   id="g-svg-374"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+                  d="M 566.5,112.5 l 7,0 a 4,4,0,0,1,4,4 l 0,7 a 4,4,0,0,1,-4,4 l -7,0 a 4,4,0,0,1,-4,-4 l 0,-7 a 4,4,0,0,1,4,-4 z"
+                  x="562.5"
+                  y="112.5"
                   width="15"
                   height="15"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-375" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-4.500000,-4.500000)">
+              <g id="g-svg-375" fill="none">
+                <g>
                   <polyline
                     id="g-svg-376"
                     fill="none"
-                    points="0,0 0,9 9,9"
+                    points="565.5,115.5 565.5,124.5 574.5,124.5"
                     stroke="rgba(0,0,255,1)"
                     stroke-width="1.1760912590556813"
                   />
                 </g>
-                <g id="g-svg-377" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-2.147817,1.661954)">
+                <g id="g-svg-377" fill="none">
+                  <g>
                     <line
                       id="g-svg-387"
                       fill="none"
-                      x1="0"
-                      y1="1.6619543704721593"
-                      x2="0"
-                      y2="0"
+                      x1="567.8521825181114"
+                      y1="123.32390874094432"
+                      x2="567.8521825181114"
+                      y2="121.66195437047216"
                       class="column"
                       stroke="rgba(0,0,255,1)"
                       stroke-width="1.1760912590556813"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,-0.583036,-3.323909)">
+                  <g>
                     <line
                       id="g-svg-388"
                       fill="none"
-                      x1="0"
-                      y1="6.647817481888637"
-                      x2="0"
-                      y2="0"
+                      x1="569.4169642663003"
+                      y1="123.32390874094432"
+                      x2="569.4169642663003"
+                      y2="116.67609125905568"
                       class="column"
                       stroke="rgba(0,0,255,1)"
                       stroke-width="1.1760912590556813"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0.981746,0)">
+                  <g>
                     <line
                       id="g-svg-389"
                       fill="none"
-                      x1="0"
-                      y1="3.3239087409443187"
-                      x2="0"
-                      y2="0"
+                      x1="570.9817460144891"
+                      y1="123.32390874094432"
+                      x2="570.9817460144891"
+                      y2="120"
                       class="column"
                       stroke="rgba(0,0,255,1)"
                       stroke-width="1.1760912590556813"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,2.546528,-3.323909)">
+                  <g>
                     <line
                       id="g-svg-390"
                       fill="none"
-                      x1="0"
-                      y1="6.647817481888637"
-                      x2="0"
-                      y2="0"
+                      x1="572.5465277626779"
+                      y1="123.32390874094432"
+                      x2="572.5465277626779"
+                      y2="116.67609125905568"
                       class="column"
                       stroke="rgba(0,0,255,1)"
                       stroke-width="1.1760912590556813"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,4.111310,-1.661954)">
+                  <g>
                     <line
                       id="g-svg-391"
                       fill="none"
-                      x1="0"
-                      y1="4.985863111416478"
-                      x2="0"
-                      y2="0"
+                      x1="574.1113095108668"
+                      y1="123.32390874094432"
+                      x2="574.1113095108668"
+                      y2="118.33804562952784"
                       class="column"
                       stroke="rgba(0,0,255,1)"
                       stroke-width="1.1760912590556813"
@@ -2717,70 +2775,76 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,612.500000,112.500000)">
+        <g>
           <path
             id="g-svg-153"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 612.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="612.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-154" fill="none" transform="matrix(1,0,0,1,620,120)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-154" fill="none" x="620" y="120">
+          <g>
             <path id="g-svg-155" fill="none" />
           </g>
-          <g id="g-svg-156" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,-4.500000)">
+          <g id="g-svg-156" fill="none">
+            <g>
               <line
                 id="g-svg-392"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="9"
+                x1="620"
+                y1="115.5"
+                x2="620"
+                y2="124.5"
                 stroke="rgba(0,0,255,1)"
                 stroke-width="1.1760912590556813"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,662.500000,112.500000)">
+        <g>
           <path
             id="g-svg-157"
             fill="none"
-            d="M 0,0 l 15,0 l 0,15 l-15 0 z"
+            d="M 662.5,112.5 l 15,0 l 0,15 l-15 0 z"
+            x="662.5"
+            y="112.5"
             width="15"
             height="15"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-158" fill="none" transform="matrix(1,0,0,1,670,120)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-158" fill="none" x="670" y="120">
+          <g>
             <path id="g-svg-159" fill="none" />
           </g>
-          <g id="g-svg-160" fill="none" transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-160" fill="none">
             <g
               id="g-svg-397"
               fill="none"
+              x="660"
+              y="110"
               width="20"
               height="20"
-              transform="matrix(1,0,0,1,-10,-10)"
               class="speed"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-398"
                   fill="rgba(255,255,255,1)"
-                  d="M 2,0 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                  d="M 662,110 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                   class="select"
                   width="20"
                   height="20"
+                  x="660"
+                  y="110"
                   stroke="rgba(217,217,217,1)"
-                  stroke-width="0"
                 />
-                <g transform="matrix(1,0,0,1,0,2.500000)">
+                <g>
                   <text
                     id="g-svg-400"
                     fill="rgba(0,0,0,1)"
@@ -2795,13 +2859,15 @@
                     stroke-width="1"
                     text-anchor="left"
                     class="value"
+                    x="660"
+                    y="112.5"
                     dy="7.5px"
                   >
                     1x
                   </text>
                 </g>
               </g>
-              <g transform="matrix(1,0,0,1,0,23)">
+              <g transform="matrix(1,0,0,1,660,133)">
                 <path
                   id="g-svg-399"
                   fill="rgba(255,255,255,1)"
@@ -2813,20 +2879,14 @@
                   filter="url(#g-filter-dropshadow-399)"
                   visibility="hidden"
                 />
-                <g
-                  id="g-svg-401"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="dropdown-container"
-                >
+                <g id="g-svg-401" fill="none" class="dropdown-container">
                   <g
                     id="g-svg-402"
                     fill="none"
                     class="dropdown-item"
                     width="20"
-                    transform="matrix(1,0,0,1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-403"
                         fill="rgba(230,247,255,1)"
@@ -2835,12 +2895,8 @@
                         height="15"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-404"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-404" fill="none">
+                        <g>
                           <text
                             id="g-svg-405"
                             fill="rgba(0,0,0,1)"
@@ -2871,7 +2927,7 @@
                     width="20"
                     transform="matrix(1,0,0,1,0,15)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-407"
                         fill="rgba(255,255,255,1)"
@@ -2880,12 +2936,8 @@
                         height="15"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-408"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-408" fill="none">
+                        <g>
                           <text
                             id="g-svg-409"
                             fill="rgba(0,0,0,1)"
@@ -2916,7 +2968,7 @@
                     width="20"
                     transform="matrix(1,0,0,1,0,30)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-411"
                         fill="rgba(255,255,255,1)"
@@ -2925,12 +2977,8 @@
                         height="15"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-412"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-412" fill="none">
+                        <g>
                           <text
                             id="g-svg-413"
                             fill="rgba(0,0,0,1)"
@@ -2959,469 +3007,500 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,10,160)">
+        <g>
           <path
             id="g-svg-161"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 10,160 l 20,0 l 0,20 l-20 0 z"
+            x="10"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-162" fill="none" transform="matrix(1,0,0,1,20,170)">
-          <g transform="matrix(1,0,0,1,-10,-10)">
+        <g id="g-svg-162" fill="none" x="20" y="170">
+          <g>
             <path
               id="g-svg-163"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              d="M 14,160 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              x="10"
+              y="160"
               width="20"
               height="20"
               opacity="0"
             />
           </g>
-          <g id="g-svg-164" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-4.698970,-4.698970)">
+          <g id="g-svg-164" fill="none">
+            <g>
               <path
                 id="g-svg-418"
                 fill="none"
                 stroke="rgba(255,192,203,1)"
                 stroke-width="1.3010299956639813"
-                d="M 1.3762964496778385,8.021643558994198 A 4.698970004336019 4.698970004336019 0 1 1 8.0216435589942 8.021643558994198"
+                d="M 16.67732644534182,173.32267355465817 A 4.698970004336019 4.698970004336019 0 1 1 23.32267355465818 173.32267355465817"
               />
-              <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.376296,8.021644)">
+              <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,16.677326,173.322678)">
                 <path
                   id="g-svg-420"
                   fill="rgba(255,192,203,1)"
-                  d="M 3.6020599913279625,3.6020599913279625 L 0,1.8010299956639813 L 3.6020599913279625,0 Z"
-                  transform="translate(-1.8010299956639813,-1.8010299956639813)"
+                  d="M 1.8010299956639813,1.8010299956639813 L -1.8010299956639813,0 L 1.8010299956639813,-1.8010299956639813 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,60,160)">
+        <g>
           <path
             id="g-svg-165"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 60,160 l 20,0 l 0,20 l-20 0 z"
+            x="60"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-166" fill="none" transform="matrix(1,0,0,1,70,170)">
-          <g transform="matrix(1,0,0,1,-10,-10)">
+        <g id="g-svg-166" fill="none" x="70" y="170">
+          <g>
             <path
               id="g-svg-167"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              d="M 64,160 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              x="60"
+              y="160"
               width="20"
               height="20"
               opacity="0"
             />
           </g>
-          <g id="g-svg-168" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-6,-3.464102)">
+          <g id="g-svg-168" fill="none">
+            <g>
               <polygon
                 id="g-svg-425"
                 fill="rgba(255,192,203,1)"
-                points="6,3.464101615137755 6,0 0,3.464101615137755 6,6.92820323027551 6,3.464101615137755 12,0 12,6.92820323027551 6,3.464101615137755"
+                points="70,170 70,166.53589838486224 64,170 70,173.46410161513776 70,170 76,166.53589838486224 76,173.46410161513776 70,170"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,110,160)">
+        <g>
           <path
             id="g-svg-169"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 110,160 l 20,0 l 0,20 l-20 0 z"
+            x="110"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-170" fill="none" transform="matrix(1,0,0,1,120,170)">
-          <g transform="matrix(1,0,0,1,-10,-10)">
+        <g id="g-svg-170" fill="none" x="120" y="170">
+          <g>
             <path
               id="g-svg-171"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              d="M 114,160 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              x="110"
+              y="160"
               width="20"
               height="20"
               opacity="0"
             />
           </g>
-          <g id="g-svg-172" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-2.771281,-4.800000)">
+          <g id="g-svg-172" fill="none">
+            <g>
               <polygon
                 id="g-svg-430"
                 fill="rgba(255,192,203,1)"
-                points="8.313843876330612,4.800000000000001 0,0 0,9.600000000000001 8.313843876330612,4.800000000000001"
+                points="125.5425625842204,170 117.2287187078898,165.2 117.2287187078898,174.8 125.5425625842204,170"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,160,160)">
+        <g>
           <path
             id="g-svg-173"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 160,160 l 20,0 l 0,20 l-20 0 z"
+            x="160"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-174" fill="none" transform="matrix(1,0,0,1,170,170)">
-          <g transform="matrix(1,0,0,1,-10,-10)">
+        <g id="g-svg-174" fill="none" x="170" y="170">
+          <g>
             <path
               id="g-svg-175"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              d="M 164,160 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              x="160"
+              y="160"
               width="20"
               height="20"
               opacity="0"
             />
           </g>
-          <g id="g-svg-176" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-6,-3.464102)">
+          <g id="g-svg-176" fill="none">
+            <g>
               <polygon
                 id="g-svg-435"
                 fill="rgba(255,192,203,1)"
-                points="6,3.464101615137755 6,0 12,3.464101615137755 6,6.92820323027551 6,3.464101615137755 0,0 0,6.92820323027551 6,3.464101615137755"
+                points="170,170 170,166.53589838486224 176,170 170,173.46410161513776 170,170 164,166.53589838486224 164,173.46410161513776 170,170"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,210,160)">
+        <g>
           <path
             id="g-svg-177"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 210,160 l 20,0 l 0,20 l-20 0 z"
+            x="210"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-178" fill="none" transform="matrix(1,0,0,1,220,170)">
-          <g transform="matrix(1,0,0,1,-10,-10)">
+        <g id="g-svg-178" fill="none" x="220" y="170">
+          <g>
             <path
               id="g-svg-179"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              d="M 214,160 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              x="210"
+              y="160"
               width="20"
               height="20"
               opacity="0"
             />
           </g>
-          <g id="g-svg-180" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-4,-6)">
+          <g id="g-svg-180" fill="none">
+            <g>
               <polygon
                 id="g-svg-440"
                 fill="rgba(255,192,203,1)"
-                points="0,0 0,12 2,12 2,0 0,0 6,0 6,12 8,12 8,0"
+                points="216,164 216,176 218,176 218,164 216,164 222,164 222,176 224,176 224,164"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,260,160)">
+        <g>
           <path
             id="g-svg-181"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 260,160 l 20,0 l 0,20 l-20 0 z"
+            x="260"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-182" fill="none" transform="matrix(1,0,0,1,270,170)">
-          <g transform="matrix(1,0,0,1,-10,-10)">
+        <g id="g-svg-182" fill="none" x="270" y="170">
+          <g>
             <path
               id="g-svg-183"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              d="M 264,160 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              x="260"
+              y="160"
               width="20"
               height="20"
               opacity="0"
             />
           </g>
-          <g id="g-svg-184" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-6,-6)">
+          <g id="g-svg-184" fill="none">
+            <g>
               <line
                 id="g-svg-445"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="12"
+                x1="264"
+                y1="164"
+                x2="264"
+                y2="176"
                 stroke="rgba(255,192,203,1)"
                 stroke-width="1.3010299956639813"
               />
             </g>
-            <g transform="matrix(1,0,0,1,6,-6)">
+            <g>
               <line
                 id="g-svg-446"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="12"
+                x1="276"
+                y1="164"
+                x2="276"
+                y2="176"
                 stroke="rgba(255,192,203,1)"
                 stroke-width="1.3010299956639813"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-3.397940,0)">
+            <g>
               <line
                 id="g-svg-447"
                 fill="none"
-                x1="3.3979400086720375"
-                y1="0"
-                x2="0"
-                y2="0"
+                x1="270"
+                y1="170"
+                x2="266.60205999132796"
+                y2="170"
                 stroke="rgba(255,192,203,1)"
                 stroke-width="1.3010299956639813"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,266.602051,170)">
                 <path
                   id="g-svg-449"
                   fill="rgba(255,192,203,1)"
-                  d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                  transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                  d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <line
                 id="g-svg-450"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="3.3979400086720375"
-                y2="0"
+                x1="270"
+                y1="170"
+                x2="273.39794000867204"
+                y2="170"
                 stroke="rgba(255,192,203,1)"
                 stroke-width="1.3010299956639813"
               />
-              <g transform="matrix(-1,0,-0,-1,3.397940,0)">
+              <g transform="matrix(-1,0,-0,-1,273.397949,170)">
                 <path
                   id="g-svg-452"
                   fill="rgba(255,192,203,1)"
-                  d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                  transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                  d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,310,160)">
+        <g>
           <path
             id="g-svg-185"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 310,160 l 20,0 l 0,20 l-20 0 z"
+            x="310"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-186" fill="none" transform="matrix(1,0,0,1,320,170)">
-          <g transform="matrix(1,0,0,1,-10,-10)">
+        <g id="g-svg-186" fill="none" x="320" y="170">
+          <g>
             <path
               id="g-svg-187"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              d="M 314,160 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              x="310"
+              y="160"
               width="20"
               height="20"
               opacity="0"
             />
           </g>
-          <g id="g-svg-188" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,-6)">
+          <g id="g-svg-188" fill="none">
+            <g>
               <line
                 id="g-svg-457"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="12"
+                x1="320"
+                y1="164"
+                x2="320"
+                y2="176"
                 stroke="rgba(255,192,203,1)"
                 stroke-width="1.3010299956639813"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-8.602060,0)">
+            <g>
               <line
                 id="g-svg-458"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="6"
-                y2="0"
+                x1="311.39794000867204"
+                y1="170"
+                x2="317.39794000867204"
+                y2="170"
                 stroke="rgba(255,192,203,1)"
                 stroke-width="1.3010299956639813"
               />
-              <g transform="matrix(-1,0,-0,-1,6,0)">
+              <g transform="matrix(-1,0,-0,-1,317.397949,170)">
                 <path
                   id="g-svg-460"
                   fill="rgba(255,192,203,1)"
-                  d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                  transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                  d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,2.602060,0)">
+            <g>
               <line
                 id="g-svg-461"
                 fill="none"
-                x1="6"
-                y1="0"
-                x2="0"
-                y2="0"
+                x1="328.60205999132796"
+                y1="170"
+                x2="322.60205999132796"
+                y2="170"
                 stroke="rgba(255,192,203,1)"
                 stroke-width="1.3010299956639813"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,322.602051,170)">
                 <path
                   id="g-svg-463"
                   fill="rgba(255,192,203,1)"
-                  d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                  transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                  d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,360,160)">
+        <g>
           <path
             id="g-svg-189"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 360,160 l 20,0 l 0,20 l-20 0 z"
+            x="360"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-190" fill="none" transform="matrix(1,0,0,1,370,170)">
-          <g transform="matrix(1,0,0,1,-10,-10)">
+        <g id="g-svg-190" fill="none" x="370" y="170">
+          <g>
             <path
               id="g-svg-191"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              d="M 364,160 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              x="360"
+              y="160"
               width="20"
               height="20"
               opacity="0"
             />
           </g>
-          <g id="g-svg-192" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-6,-6)">
+          <g id="g-svg-192" fill="none">
+            <g>
               <polyline
                 id="g-svg-468"
                 fill="none"
-                points="0,0 0,12 12,12"
+                points="364,164 364,176 376,176"
                 stroke="rgba(255,192,203,1)"
                 stroke-width="1.3010299956639813"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-4.698970,-4.698970)">
+            <g>
               <polyline
                 id="g-svg-469"
                 fill="none"
-                points="0,8.096910013008056 2.024227503252014,4.048455006504028 4.048455006504028,8.096910013008056 8.096910013008056,0"
+                points="365.30102999566395,173.39794000867204 367.32525749891596,169.34948500216802 369.34948500216797,173.39794000867204 373.397940008672,165.30102999566398"
                 stroke="rgba(255,192,203,1)"
                 stroke-width="1.3010299956639813"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,410,160)">
+        <g>
           <path
             id="g-svg-193"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 410,160 l 20,0 l 0,20 l-20 0 z"
+            x="410"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-194" fill="none" transform="matrix(1,0,0,1,420,170)">
-          <g transform="matrix(1,0,0,1,-10,-10)">
+        <g id="g-svg-194" fill="none" x="420" y="170">
+          <g>
             <path
               id="g-svg-195"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              d="M 414,160 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+              x="410"
+              y="160"
               width="20"
               height="20"
               opacity="0"
             />
           </g>
-          <g id="g-svg-196" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-6,-6)">
+          <g id="g-svg-196" fill="none">
+            <g>
               <polyline
                 id="g-svg-474"
                 fill="none"
-                points="0,0 0,12 12,12"
+                points="414,164 414,176 426,176"
                 stroke="rgba(255,192,203,1)"
                 stroke-width="1.3010299956639813"
               />
             </g>
-            <g id="g-svg-475" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,-3.397940,2.349485)">
+            <g id="g-svg-475" fill="none">
+              <g>
                 <line
                   id="g-svg-476"
                   fill="none"
-                  x1="0"
-                  y1="2.3494850021680094"
-                  x2="0"
-                  y2="0"
+                  x1="416.60205999132796"
+                  y1="174.69897000433602"
+                  x2="416.60205999132796"
+                  y2="172.34948500216802"
                   class="column"
                   stroke="rgba(255,192,203,1)"
                   stroke-width="1.3010299956639813"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,-1.258146,-4.698970)">
+              <g>
                 <line
                   id="g-svg-477"
                   fill="none"
-                  x1="0"
-                  y1="9.397940008672037"
-                  x2="0"
-                  y2="0"
+                  x1="418.74185399219516"
+                  y1="174.69897000433602"
+                  x2="418.74185399219516"
+                  y2="165.30102999566398"
                   class="column"
                   stroke="rgba(255,192,203,1)"
                   stroke-width="1.3010299956639813"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0.881648,0)">
+              <g>
                 <line
                   id="g-svg-478"
                   fill="none"
-                  x1="0"
-                  y1="4.698970004336019"
-                  x2="0"
-                  y2="0"
+                  x1="420.88164799306236"
+                  y1="174.69897000433602"
+                  x2="420.88164799306236"
+                  y2="170"
                   class="column"
                   stroke="rgba(255,192,203,1)"
                   stroke-width="1.3010299956639813"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,3.021442,-4.698970)">
+              <g>
                 <line
                   id="g-svg-479"
                   fill="none"
-                  x1="0"
-                  y1="9.397940008672037"
-                  x2="0"
-                  y2="0"
+                  x1="423.02144199392956"
+                  y1="174.69897000433602"
+                  x2="423.02144199392956"
+                  y2="165.30102999566398"
                   class="column"
                   stroke="rgba(255,192,203,1)"
                   stroke-width="1.3010299956639813"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,5.161236,-2.349485)">
+              <g>
                 <line
                   id="g-svg-480"
                   fill="none"
-                  x1="0"
-                  y1="7.048455006504028"
-                  x2="0"
-                  y2="0"
+                  x1="425.16123599479675"
+                  y1="174.69897000433602"
+                  x2="425.16123599479675"
+                  y2="167.65051499783198"
                   class="column"
                   stroke="rgba(255,192,203,1)"
                   stroke-width="1.3010299956639813"
@@ -3430,136 +3509,132 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,460,160)">
+        <g>
           <path
             id="g-svg-197"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 460,160 l 20,0 l 0,20 l-20 0 z"
+            x="460"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-198" fill="none" transform="matrix(1,0,0,1,470,170)">
-          <g id="g-svg-199" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-485"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-10,-10)">
+        <g id="g-svg-198" fill="none" x="470" y="170">
+          <g id="g-svg-199" fill="none">
+            <g id="g-svg-485" fill="none" x="470" y="170" class="icon">
+              <g>
                 <path
                   id="g-svg-486"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                  d="M 464,160 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                  x="460"
+                  y="160"
                   width="20"
                   height="20"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-487" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-2.771281,-4.800000)">
+              <g id="g-svg-487" fill="none">
+                <g>
                   <polygon
                     id="g-svg-488"
                     fill="rgba(255,192,203,1)"
-                    points="8.313843876330612,4.800000000000001 0,0 0,9.600000000000001 8.313843876330612,4.800000000000001"
+                    points="475.54256258422043,170 467.2287187078898,165.2 467.2287187078898,174.8 475.54256258422043,170"
                   />
                 </g>
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,510,160)">
+        <g>
           <path
             id="g-svg-200"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 510,160 l 20,0 l 0,20 l-20 0 z"
+            x="510"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-201" fill="none" transform="matrix(1,0,0,1,520,170)">
-          <g id="g-svg-202" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-493"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-10,-10)">
+        <g id="g-svg-201" fill="none" x="520" y="170">
+          <g id="g-svg-202" fill="none">
+            <g id="g-svg-493" fill="none" x="520" y="170" class="icon">
+              <g>
                 <path
                   id="g-svg-494"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                  d="M 514,160 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                  x="510"
+                  y="160"
                   width="20"
                   height="20"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-495" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-6,-6)">
+              <g id="g-svg-495" fill="none">
+                <g>
                   <line
                     id="g-svg-496"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="12"
+                    x1="514"
+                    y1="164"
+                    x2="514"
+                    y2="176"
                     stroke="rgba(255,192,203,1)"
                     stroke-width="1.3010299956639813"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,6,-6)">
+                <g>
                   <line
                     id="g-svg-497"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="12"
+                    x1="526"
+                    y1="164"
+                    x2="526"
+                    y2="176"
                     stroke="rgba(255,192,203,1)"
                     stroke-width="1.3010299956639813"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,-3.397940,0)">
+                <g>
                   <line
                     id="g-svg-498"
                     fill="none"
-                    x1="3.3979400086720375"
-                    y1="0"
-                    x2="0"
-                    y2="0"
+                    x1="520"
+                    y1="170"
+                    x2="516.6020599913279"
+                    y2="170"
                     stroke="rgba(255,192,203,1)"
                     stroke-width="1.3010299956639813"
                   />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,516.602051,170)">
                     <path
                       id="g-svg-509"
                       fill="rgba(255,192,203,1)"
-                      d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                      transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                      d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                     />
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-501"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="3.3979400086720375"
-                    y2="0"
+                    x1="520"
+                    y1="170"
+                    x2="523.3979400086721"
+                    y2="170"
                     stroke="rgba(255,192,203,1)"
                     stroke-width="1.3010299956639813"
                   />
-                  <g transform="matrix(-1,0,-0,-1,3.397940,0)">
+                  <g transform="matrix(-1,0,-0,-1,523.397949,170)">
                     <path
                       id="g-svg-511"
                       fill="rgba(255,192,203,1)"
-                      d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                      transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                      d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                     />
                   </g>
                 </g>
@@ -3567,105 +3642,104 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,560,160)">
+        <g>
           <path
             id="g-svg-203"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 560,160 l 20,0 l 0,20 l-20 0 z"
+            x="560"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-204" fill="none" transform="matrix(1,0,0,1,570,170)">
-          <g id="g-svg-205" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-512"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-10,-10)">
+        <g id="g-svg-204" fill="none" x="570" y="170">
+          <g id="g-svg-205" fill="none">
+            <g id="g-svg-512" fill="none" x="570" y="170" class="icon">
+              <g>
                 <path
                   id="g-svg-513"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                  d="M 564,160 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                  x="560"
+                  y="160"
                   width="20"
                   height="20"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-514" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-6,-6)">
+              <g id="g-svg-514" fill="none">
+                <g>
                   <polyline
                     id="g-svg-515"
                     fill="none"
-                    points="0,0 0,12 12,12"
+                    points="564,164 564,176 576,176"
                     stroke="rgba(255,192,203,1)"
                     stroke-width="1.3010299956639813"
                   />
                 </g>
-                <g id="g-svg-516" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-3.397940,2.349485)">
+                <g id="g-svg-516" fill="none">
+                  <g>
                     <line
                       id="g-svg-526"
                       fill="none"
-                      x1="0"
-                      y1="2.3494850021680094"
-                      x2="0"
-                      y2="0"
+                      x1="566.6020599913279"
+                      y1="174.69897000433602"
+                      x2="566.6020599913279"
+                      y2="172.34948500216802"
                       class="column"
                       stroke="rgba(255,192,203,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,-1.258146,-4.698970)">
+                  <g>
                     <line
                       id="g-svg-527"
                       fill="none"
-                      x1="0"
-                      y1="9.397940008672037"
-                      x2="0"
-                      y2="0"
+                      x1="568.7418539921952"
+                      y1="174.69897000433602"
+                      x2="568.7418539921952"
+                      y2="165.30102999566398"
                       class="column"
                       stroke="rgba(255,192,203,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0.881648,0)">
+                  <g>
                     <line
                       id="g-svg-528"
                       fill="none"
-                      x1="0"
-                      y1="4.698970004336019"
-                      x2="0"
-                      y2="0"
+                      x1="570.8816479930623"
+                      y1="174.69897000433602"
+                      x2="570.8816479930623"
+                      y2="170"
                       class="column"
                       stroke="rgba(255,192,203,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,3.021442,-4.698970)">
+                  <g>
                     <line
                       id="g-svg-529"
                       fill="none"
-                      x1="0"
-                      y1="9.397940008672037"
-                      x2="0"
-                      y2="0"
+                      x1="573.0214419939296"
+                      y1="174.69897000433602"
+                      x2="573.0214419939296"
+                      y2="165.30102999566398"
                       class="column"
                       stroke="rgba(255,192,203,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,5.161236,-2.349485)">
+                  <g>
                     <line
                       id="g-svg-530"
                       fill="none"
-                      x1="0"
-                      y1="7.048455006504028"
-                      x2="0"
-                      y2="0"
+                      x1="575.1612359947967"
+                      y1="174.69897000433602"
+                      x2="575.1612359947967"
+                      y2="167.65051499783198"
                       class="column"
                       stroke="rgba(255,192,203,1)"
                       stroke-width="1.3010299956639813"
@@ -3676,70 +3750,76 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,610,160)">
+        <g>
           <path
             id="g-svg-206"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 610,160 l 20,0 l 0,20 l-20 0 z"
+            x="610"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-207" fill="none" transform="matrix(1,0,0,1,620,170)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-207" fill="none" x="620" y="170">
+          <g>
             <path id="g-svg-208" fill="none" />
           </g>
-          <g id="g-svg-209" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,-6)">
+          <g id="g-svg-209" fill="none">
+            <g>
               <line
                 id="g-svg-531"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="12"
+                x1="620"
+                y1="164"
+                x2="620"
+                y2="176"
                 stroke="rgba(255,192,203,1)"
                 stroke-width="1.3010299956639813"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,660,160)">
+        <g>
           <path
             id="g-svg-210"
             fill="none"
-            d="M 0,0 l 20,0 l 0,20 l-20 0 z"
+            d="M 660,160 l 20,0 l 0,20 l-20 0 z"
+            x="660"
+            y="160"
             width="20"
             height="20"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-211" fill="none" transform="matrix(1,0,0,1,670,170)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-211" fill="none" x="670" y="170">
+          <g>
             <path id="g-svg-212" fill="none" />
           </g>
-          <g id="g-svg-213" fill="none" transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-213" fill="none">
             <g
               id="g-svg-536"
               fill="none"
+              x="660"
+              y="160"
               width="20"
               height="20"
-              transform="matrix(1,0,0,1,-10,-10)"
               class="speed"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-537"
                   fill="rgba(255,255,255,1)"
-                  d="M 2,0 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                  d="M 662,160 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                   class="select"
                   width="20"
                   height="20"
+                  x="660"
+                  y="160"
                   stroke="rgba(217,217,217,1)"
-                  stroke-width="0"
                 />
-                <g transform="matrix(1,0,0,1,0,0.500000)">
+                <g>
                   <text
                     id="g-svg-539"
                     fill="rgba(0,0,0,1)"
@@ -3754,13 +3834,15 @@
                     stroke-width="1"
                     text-anchor="left"
                     class="value"
+                    x="660"
+                    y="160.5"
                     dy="9.5px"
                   >
                     1x
                   </text>
                 </g>
               </g>
-              <g transform="matrix(1,0,0,1,0,24)">
+              <g transform="matrix(1,0,0,1,660,184)">
                 <path
                   id="g-svg-538"
                   fill="rgba(255,255,255,1)"
@@ -3772,20 +3854,14 @@
                   filter="url(#g-filter-dropshadow-538)"
                   visibility="hidden"
                 />
-                <g
-                  id="g-svg-540"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="dropdown-container"
-                >
+                <g id="g-svg-540" fill="none" class="dropdown-container">
                   <g
                     id="g-svg-541"
                     fill="none"
                     class="dropdown-item"
                     width="20"
-                    transform="matrix(1,0,0,1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-542"
                         fill="rgba(230,247,255,1)"
@@ -3794,12 +3870,8 @@
                         height="19"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-543"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-543" fill="none">
+                        <g>
                           <text
                             id="g-svg-544"
                             fill="rgba(0,0,0,1)"
@@ -3830,7 +3902,7 @@
                     width="20"
                     transform="matrix(1,0,0,1,0,19)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-546"
                         fill="rgba(255,255,255,1)"
@@ -3839,12 +3911,8 @@
                         height="19"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-547"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-547" fill="none">
+                        <g>
                           <text
                             id="g-svg-548"
                             fill="rgba(0,0,0,1)"
@@ -3875,7 +3943,7 @@
                     width="20"
                     transform="matrix(1,0,0,1,0,38)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-550"
                         fill="rgba(255,255,255,1)"
@@ -3884,12 +3952,8 @@
                         height="19"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-551"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-551" fill="none">
+                        <g>
                           <text
                             id="g-svg-552"
                             fill="rgba(0,0,0,1)"
@@ -3918,469 +3982,500 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,7.500000,207.500000)">
+        <g>
           <path
             id="g-svg-214"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 7.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="7.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-215" fill="none" transform="matrix(1,0,0,1,20,220)">
-          <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+        <g id="g-svg-215" fill="none" x="20" y="220">
+          <g>
             <path
               id="g-svg-216"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              d="M 11.5,207.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              x="7.5"
+              y="207.5"
               width="25"
               height="25"
               opacity="0"
             />
           </g>
-          <g id="g-svg-217" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-6.102060,-6.102060)">
+          <g id="g-svg-217" fill="none">
+            <g>
               <path
                 id="g-svg-557"
                 fill="none"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.3979400086720377"
-                d="M 1.787251992252834,10.416867990403091 A 6.1020599913279625 6.1020599913279625 0 1 1 10.416867990403091 10.416867990403091"
+                d="M 15.685192000924872,224.31480799907513 A 6.1020599913279625 6.1020599913279625 0 1 1 24.31480799907513 224.31480799907513"
               />
-              <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.787252,10.416868)">
+              <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,15.685192,224.314804)">
                 <path
                   id="g-svg-559"
                   fill="rgba(86,87,88,1)"
-                  d="M 3.7958800173440754,3.7958800173440754 L 0,1.8979400086720377 L 3.7958800173440754,0 Z"
-                  transform="translate(-1.8979400086720377,-1.8979400086720377)"
+                  d="M 1.8979400086720377,1.8979400086720377 L -1.8979400086720377,0 L 1.8979400086720377,-1.8979400086720377 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,57.500000,207.500000)">
+        <g>
           <path
             id="g-svg-218"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 57.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="57.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-219" fill="none" transform="matrix(1,0,0,1,70,220)">
-          <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+        <g id="g-svg-219" fill="none" x="70" y="220">
+          <g>
             <path
               id="g-svg-220"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              d="M 61.5,207.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              x="57.5"
+              y="207.5"
               width="25"
               height="25"
               opacity="0"
             />
           </g>
-          <g id="g-svg-221" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-7.500000,-4.330127)">
+          <g id="g-svg-221" fill="none">
+            <g>
               <polygon
                 id="g-svg-564"
                 fill="rgba(86,87,88,1)"
-                points="7.5,4.330127018922194 7.5,0 0,4.330127018922194 7.5,8.660254037844387 7.5,4.330127018922194 15,0 15,8.660254037844387 7.5,4.330127018922194"
+                points="70,220 70,215.66987298107782 62.5,220 70,224.33012701892218 70,220 77.5,215.66987298107782 77.5,224.33012701892218 70,220"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,107.500000,207.500000)">
+        <g>
           <path
             id="g-svg-222"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 107.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="107.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-223" fill="none" transform="matrix(1,0,0,1,120,220)">
-          <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+        <g id="g-svg-223" fill="none" x="120" y="220">
+          <g>
             <path
               id="g-svg-224"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              d="M 111.5,207.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              x="107.5"
+              y="207.5"
               width="25"
               height="25"
               opacity="0"
             />
           </g>
-          <g id="g-svg-225" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-3.464102,-6)">
+          <g id="g-svg-225" fill="none">
+            <g>
               <polygon
                 id="g-svg-569"
                 fill="rgba(86,87,88,1)"
-                points="10.392304845413264,6 0,0 0,12 10.392304845413264,6"
+                points="126.92820323027551,220 116.53589838486225,214 116.53589838486225,226 126.92820323027551,220"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,157.500000,207.500000)">
+        <g>
           <path
             id="g-svg-226"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 157.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="157.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-227" fill="none" transform="matrix(1,0,0,1,170,220)">
-          <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+        <g id="g-svg-227" fill="none" x="170" y="220">
+          <g>
             <path
               id="g-svg-228"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              d="M 161.5,207.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              x="157.5"
+              y="207.5"
               width="25"
               height="25"
               opacity="0"
             />
           </g>
-          <g id="g-svg-229" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-7.500000,-4.330127)">
+          <g id="g-svg-229" fill="none">
+            <g>
               <polygon
                 id="g-svg-574"
                 fill="rgba(86,87,88,1)"
-                points="7.5,4.330127018922194 7.5,0 15,4.330127018922194 7.5,8.660254037844387 7.5,4.330127018922194 0,0 0,8.660254037844387 7.5,4.330127018922194"
+                points="170,220 170,215.66987298107782 177.5,220 170,224.33012701892218 170,220 162.5,215.66987298107782 162.5,224.33012701892218 170,220"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,207.500000,207.500000)">
+        <g>
           <path
             id="g-svg-230"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 207.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="207.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-231" fill="none" transform="matrix(1,0,0,1,220,220)">
-          <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+        <g id="g-svg-231" fill="none" x="220" y="220">
+          <g>
             <path
               id="g-svg-232"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              d="M 211.5,207.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              x="207.5"
+              y="207.5"
               width="25"
               height="25"
               opacity="0"
             />
           </g>
-          <g id="g-svg-233" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-5,-7.500000)">
+          <g id="g-svg-233" fill="none">
+            <g>
               <polygon
                 id="g-svg-579"
                 fill="rgba(86,87,88,1)"
-                points="0,0 0,15 2.5,15 2.5,0 0,0 7.5,0 7.5,15 10,15 10,0"
+                points="215,212.5 215,227.5 217.5,227.5 217.5,212.5 215,212.5 222.5,212.5 222.5,227.5 225,227.5 225,212.5"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,257.500000,207.500000)">
+        <g>
           <path
             id="g-svg-234"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 257.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="257.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-235" fill="none" transform="matrix(1,0,0,1,270,220)">
-          <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+        <g id="g-svg-235" fill="none" x="270" y="220">
+          <g>
             <path
               id="g-svg-236"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              d="M 261.5,207.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              x="257.5"
+              y="207.5"
               width="25"
               height="25"
               opacity="0"
             />
           </g>
-          <g id="g-svg-237" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+          <g id="g-svg-237" fill="none">
+            <g>
               <line
                 id="g-svg-584"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="15"
+                x1="262.5"
+                y1="212.5"
+                x2="262.5"
+                y2="227.5"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.3979400086720377"
               />
             </g>
-            <g transform="matrix(1,0,0,1,7.500000,-7.500000)">
+            <g>
               <line
                 id="g-svg-585"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="15"
+                x1="277.5"
+                y1="212.5"
+                x2="277.5"
+                y2="227.5"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.3979400086720377"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-4.704120,0)">
+            <g>
               <line
                 id="g-svg-586"
                 fill="none"
-                x1="4.704119982655925"
-                y1="0"
-                x2="0"
-                y2="0"
+                x1="270"
+                y1="220"
+                x2="265.2958800173441"
+                y2="220"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.3979400086720377"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,265.295868,220)">
                 <path
                   id="g-svg-588"
                   fill="rgba(86,87,88,1)"
-                  d="M 5.591760034688151,5.591760034688151 L 0,2.7958800173440754 L 5.591760034688151,0 Z"
-                  transform="translate(-2.7958800173440754,-2.7958800173440754)"
+                  d="M 2.7958800173440754,2.7958800173440754 L -2.7958800173440754,0 L 2.7958800173440754,-2.7958800173440754 Z"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <line
                 id="g-svg-589"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="4.704119982655925"
-                y2="0"
+                x1="270"
+                y1="220"
+                x2="274.7041199826559"
+                y2="220"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.3979400086720377"
               />
-              <g transform="matrix(-1,0,-0,-1,4.704120,0)">
+              <g transform="matrix(-1,0,-0,-1,274.704132,220)">
                 <path
                   id="g-svg-591"
                   fill="rgba(86,87,88,1)"
-                  d="M 5.591760034688151,5.591760034688151 L 0,2.7958800173440754 L 5.591760034688151,0 Z"
-                  transform="translate(-2.7958800173440754,-2.7958800173440754)"
+                  d="M 2.7958800173440754,2.7958800173440754 L -2.7958800173440754,0 L 2.7958800173440754,-2.7958800173440754 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,307.500000,207.500000)">
+        <g>
           <path
             id="g-svg-238"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 307.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="307.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-239" fill="none" transform="matrix(1,0,0,1,320,220)">
-          <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+        <g id="g-svg-239" fill="none" x="320" y="220">
+          <g>
             <path
               id="g-svg-240"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              d="M 311.5,207.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              x="307.5"
+              y="207.5"
               width="25"
               height="25"
               opacity="0"
             />
           </g>
-          <g id="g-svg-241" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,-7.500000)">
+          <g id="g-svg-241" fill="none">
+            <g>
               <line
                 id="g-svg-596"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="15"
+                x1="320"
+                y1="212.5"
+                x2="320"
+                y2="227.5"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.3979400086720377"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-10.295880,0)">
+            <g>
               <line
                 id="g-svg-597"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="7.5"
-                y2="0"
+                x1="309.7041199826559"
+                y1="220"
+                x2="317.2041199826559"
+                y2="220"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.3979400086720377"
               />
-              <g transform="matrix(-1,0,-0,-1,7.500000,0)">
+              <g transform="matrix(-1,0,-0,-1,317.204132,220)">
                 <path
                   id="g-svg-599"
                   fill="rgba(86,87,88,1)"
-                  d="M 5.591760034688151,5.591760034688151 L 0,2.7958800173440754 L 5.591760034688151,0 Z"
-                  transform="translate(-2.7958800173440754,-2.7958800173440754)"
+                  d="M 2.7958800173440754,2.7958800173440754 L -2.7958800173440754,0 L 2.7958800173440754,-2.7958800173440754 Z"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,2.795880,0)">
+            <g>
               <line
                 id="g-svg-600"
                 fill="none"
-                x1="7.5"
-                y1="0"
-                x2="0"
-                y2="0"
+                x1="330.2958800173441"
+                y1="220"
+                x2="322.7958800173441"
+                y2="220"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.3979400086720377"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,322.795868,220)">
                 <path
                   id="g-svg-602"
                   fill="rgba(86,87,88,1)"
-                  d="M 5.591760034688151,5.591760034688151 L 0,2.7958800173440754 L 5.591760034688151,0 Z"
-                  transform="translate(-2.7958800173440754,-2.7958800173440754)"
+                  d="M 2.7958800173440754,2.7958800173440754 L -2.7958800173440754,0 L 2.7958800173440754,-2.7958800173440754 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,357.500000,207.500000)">
+        <g>
           <path
             id="g-svg-242"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 357.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="357.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-243" fill="none" transform="matrix(1,0,0,1,370,220)">
-          <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+        <g id="g-svg-243" fill="none" x="370" y="220">
+          <g>
             <path
               id="g-svg-244"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              d="M 361.5,207.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              x="357.5"
+              y="207.5"
               width="25"
               height="25"
               opacity="0"
             />
           </g>
-          <g id="g-svg-245" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+          <g id="g-svg-245" fill="none">
+            <g>
               <polyline
                 id="g-svg-607"
                 fill="none"
-                points="0,0 0,15 15,15"
+                points="362.5,212.5 362.5,227.5 377.5,227.5"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.3979400086720377"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-6.102060,-6.102060)">
+            <g>
               <polyline
                 id="g-svg-608"
                 fill="none"
-                points="0,10.806179973983888 2.701544993495972,5.403089986991944 5.403089986991944,10.806179973983888 10.806179973983888,0"
+                points="363.89794000867204,224.70411998265593 366.599485002168,219.30102999566398 369.30102999566395,224.70411998265593 374.7041199826559,213.89794000867204"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.3979400086720377"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,407.500000,207.500000)">
+        <g>
           <path
             id="g-svg-246"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 407.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="407.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-247" fill="none" transform="matrix(1,0,0,1,420,220)">
-          <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+        <g id="g-svg-247" fill="none" x="420" y="220">
+          <g>
             <path
               id="g-svg-248"
               fill="rgba(226,226,226,1)"
-              d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              d="M 411.5,207.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+              x="407.5"
+              y="207.5"
               width="25"
               height="25"
               opacity="0"
             />
           </g>
-          <g id="g-svg-249" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+          <g id="g-svg-249" fill="none">
+            <g>
               <polyline
                 id="g-svg-613"
                 fill="none"
-                points="0,0 0,15 15,15"
+                points="412.5,212.5 412.5,227.5 427.5,227.5"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.3979400086720377"
               />
             </g>
-            <g id="g-svg-614" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,-4.704120,3.051030)">
+            <g id="g-svg-614" fill="none">
+              <g>
                 <line
                   id="g-svg-615"
                   fill="none"
-                  x1="0"
-                  y1="3.0510299956639813"
-                  x2="0"
-                  y2="0"
+                  x1="415.2958800173441"
+                  y1="226.10205999132796"
+                  x2="415.2958800173441"
+                  y2="223.05102999566398"
                   class="column"
                   stroke="rgba(86,87,88,1)"
                   stroke-width="1.3979400086720377"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,-1.983708,-6.102060)">
+              <g>
                 <line
                   id="g-svg-616"
                   fill="none"
-                  x1="0"
-                  y1="12.204119982655925"
-                  x2="0"
-                  y2="0"
+                  x1="418.0162920156097"
+                  y1="226.10205999132796"
+                  x2="418.0162920156097"
+                  y2="213.89794000867204"
                   class="column"
                   stroke="rgba(86,87,88,1)"
                   stroke-width="1.3979400086720377"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0.736704,0)">
+              <g>
                 <line
                   id="g-svg-617"
                   fill="none"
-                  x1="0"
-                  y1="6.1020599913279625"
-                  x2="0"
-                  y2="0"
+                  x1="420.7367040138753"
+                  y1="226.10205999132796"
+                  x2="420.7367040138753"
+                  y2="220"
                   class="column"
                   stroke="rgba(86,87,88,1)"
                   stroke-width="1.3979400086720377"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,3.457116,-6.102060)">
+              <g>
                 <line
                   id="g-svg-618"
                   fill="none"
-                  x1="0"
-                  y1="12.204119982655925"
-                  x2="0"
-                  y2="0"
+                  x1="423.45711601214083"
+                  y1="226.10205999132796"
+                  x2="423.45711601214083"
+                  y2="213.89794000867204"
                   class="column"
                   stroke="rgba(86,87,88,1)"
                   stroke-width="1.3979400086720377"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,6.177528,-3.051030)">
+              <g>
                 <line
                   id="g-svg-619"
                   fill="none"
-                  x1="0"
-                  y1="9.153089986991944"
-                  x2="0"
-                  y2="0"
+                  x1="426.17752801040643"
+                  y1="226.10205999132796"
+                  x2="426.17752801040643"
+                  y2="216.94897000433602"
                   class="column"
                   stroke="rgba(86,87,88,1)"
                   stroke-width="1.3979400086720377"
@@ -4389,136 +4484,132 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,457.500000,207.500000)">
+        <g>
           <path
             id="g-svg-250"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 457.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="457.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-251" fill="none" transform="matrix(1,0,0,1,470,220)">
-          <g id="g-svg-252" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-624"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+        <g id="g-svg-251" fill="none" x="470" y="220">
+          <g id="g-svg-252" fill="none">
+            <g id="g-svg-624" fill="none" x="470" y="220" class="icon">
+              <g>
                 <path
                   id="g-svg-625"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  d="M 461.5,207.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  x="457.5"
+                  y="207.5"
                   width="25"
                   height="25"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-626" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-3.464102,-6)">
+              <g id="g-svg-626" fill="none">
+                <g>
                   <polygon
                     id="g-svg-627"
                     fill="rgba(86,87,88,1)"
-                    points="10.392304845413264,6 0,0 0,12 10.392304845413264,6"
+                    points="476.9282032302755,220 466.53589838486226,214 466.53589838486226,226 476.9282032302755,220"
                   />
                 </g>
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,507.500000,207.500000)">
+        <g>
           <path
             id="g-svg-253"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 507.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="507.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-254" fill="none" transform="matrix(1,0,0,1,520,220)">
-          <g id="g-svg-255" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-632"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+        <g id="g-svg-254" fill="none" x="520" y="220">
+          <g id="g-svg-255" fill="none">
+            <g id="g-svg-632" fill="none" x="520" y="220" class="icon">
+              <g>
                 <path
                   id="g-svg-633"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  d="M 511.5,207.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  x="507.5"
+                  y="207.5"
                   width="25"
                   height="25"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-634" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+              <g id="g-svg-634" fill="none">
+                <g>
                   <line
                     id="g-svg-635"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="15"
+                    x1="512.5"
+                    y1="212.5"
+                    x2="512.5"
+                    y2="227.5"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.3979400086720377"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,7.500000,-7.500000)">
+                <g>
                   <line
                     id="g-svg-636"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="15"
+                    x1="527.5"
+                    y1="212.5"
+                    x2="527.5"
+                    y2="227.5"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.3979400086720377"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,-4.704120,0)">
+                <g>
                   <line
                     id="g-svg-637"
                     fill="none"
-                    x1="4.704119982655925"
-                    y1="0"
-                    x2="0"
-                    y2="0"
+                    x1="520"
+                    y1="220"
+                    x2="515.2958800173441"
+                    y2="220"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.3979400086720377"
                   />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,515.295898,220)">
                     <path
                       id="g-svg-648"
                       fill="rgba(86,87,88,1)"
-                      d="M 5.591760034688151,5.591760034688151 L 0,2.7958800173440754 L 5.591760034688151,0 Z"
-                      transform="translate(-2.7958800173440754,-2.7958800173440754)"
+                      d="M 2.7958800173440754,2.7958800173440754 L -2.7958800173440754,0 L 2.7958800173440754,-2.7958800173440754 Z"
                     />
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-640"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="4.704119982655925"
-                    y2="0"
+                    x1="520"
+                    y1="220"
+                    x2="524.7041199826559"
+                    y2="220"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.3979400086720377"
                   />
-                  <g transform="matrix(-1,0,-0,-1,4.704120,0)">
+                  <g transform="matrix(-1,0,-0,-1,524.704102,220)">
                     <path
                       id="g-svg-650"
                       fill="rgba(86,87,88,1)"
-                      d="M 5.591760034688151,5.591760034688151 L 0,2.7958800173440754 L 5.591760034688151,0 Z"
-                      transform="translate(-2.7958800173440754,-2.7958800173440754)"
+                      d="M 2.7958800173440754,2.7958800173440754 L -2.7958800173440754,0 L 2.7958800173440754,-2.7958800173440754 Z"
                     />
                   </g>
                 </g>
@@ -4526,105 +4617,104 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,557.500000,207.500000)">
+        <g>
           <path
             id="g-svg-256"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 557.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="557.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-257" fill="none" transform="matrix(1,0,0,1,570,220)">
-          <g id="g-svg-258" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-651"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-12.500000,-12.500000)">
+        <g id="g-svg-257" fill="none" x="570" y="220">
+          <g id="g-svg-258" fill="none">
+            <g id="g-svg-651" fill="none" x="570" y="220" class="icon">
+              <g>
                 <path
                   id="g-svg-652"
                   fill="rgba(226,226,226,1)"
-                  d="M 4,0 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  d="M 561.5,207.5 l 17,0 a 4,4,0,0,1,4,4 l 0,17 a 4,4,0,0,1,-4,4 l -17,0 a 4,4,0,0,1,-4,-4 l 0,-17 a 4,4,0,0,1,4,-4 z"
+                  x="557.5"
+                  y="207.5"
                   width="25"
                   height="25"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-653" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-7.500000,-7.500000)">
+              <g id="g-svg-653" fill="none">
+                <g>
                   <polyline
                     id="g-svg-654"
                     fill="none"
-                    points="0,0 0,15 15,15"
+                    points="562.5,212.5 562.5,227.5 577.5,227.5"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.3979400086720377"
                   />
                 </g>
-                <g id="g-svg-655" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-4.704120,3.051030)">
+                <g id="g-svg-655" fill="none">
+                  <g>
                     <line
                       id="g-svg-665"
                       fill="none"
-                      x1="0"
-                      y1="3.0510299956639813"
-                      x2="0"
-                      y2="0"
+                      x1="565.2958800173441"
+                      y1="226.10205999132796"
+                      x2="565.2958800173441"
+                      y2="223.05102999566398"
                       class="column"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3979400086720377"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,-1.983708,-6.102060)">
+                  <g>
                     <line
                       id="g-svg-666"
                       fill="none"
-                      x1="0"
-                      y1="12.204119982655925"
-                      x2="0"
-                      y2="0"
+                      x1="568.0162920156097"
+                      y1="226.10205999132796"
+                      x2="568.0162920156097"
+                      y2="213.89794000867204"
                       class="column"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3979400086720377"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0.736704,0)">
+                  <g>
                     <line
                       id="g-svg-667"
                       fill="none"
-                      x1="0"
-                      y1="6.1020599913279625"
-                      x2="0"
-                      y2="0"
+                      x1="570.7367040138753"
+                      y1="226.10205999132796"
+                      x2="570.7367040138753"
+                      y2="220"
                       class="column"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3979400086720377"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,3.457116,-6.102060)">
+                  <g>
                     <line
                       id="g-svg-668"
                       fill="none"
-                      x1="0"
-                      y1="12.204119982655925"
-                      x2="0"
-                      y2="0"
+                      x1="573.4571160121409"
+                      y1="226.10205999132796"
+                      x2="573.4571160121409"
+                      y2="213.89794000867204"
                       class="column"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3979400086720377"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,6.177528,-3.051030)">
+                  <g>
                     <line
                       id="g-svg-669"
                       fill="none"
-                      x1="0"
-                      y1="9.153089986991944"
-                      x2="0"
-                      y2="0"
+                      x1="576.1775280104065"
+                      y1="226.10205999132796"
+                      x2="576.1775280104065"
+                      y2="216.94897000433602"
                       class="column"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3979400086720377"
@@ -4635,70 +4725,76 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,607.500000,207.500000)">
+        <g>
           <path
             id="g-svg-259"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 607.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="607.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-260" fill="none" transform="matrix(1,0,0,1,620,220)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-260" fill="none" x="620" y="220">
+          <g>
             <path id="g-svg-261" fill="none" />
           </g>
-          <g id="g-svg-262" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,-7.500000)">
+          <g id="g-svg-262" fill="none">
+            <g>
               <line
                 id="g-svg-670"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="15"
+                x1="620"
+                y1="212.5"
+                x2="620"
+                y2="227.5"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.3979400086720377"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,657.500000,207.500000)">
+        <g>
           <path
             id="g-svg-263"
             fill="none"
-            d="M 0,0 l 25,0 l 0,25 l-25 0 z"
+            d="M 657.5,207.5 l 25,0 l 0,25 l-25 0 z"
+            x="657.5"
+            y="207.5"
             width="25"
             height="25"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-264" fill="none" transform="matrix(1,0,0,1,670,220)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-264" fill="none" x="670" y="220">
+          <g>
             <path id="g-svg-265" fill="none" />
           </g>
-          <g id="g-svg-266" fill="none" transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-266" fill="none">
             <g
               id="g-svg-675"
               fill="none"
+              x="657.5"
+              y="210"
               width="25"
               height="20"
-              transform="matrix(1,0,0,1,-12.500000,-10)"
               class="speed"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-676"
                   fill="rgba(255,255,255,1)"
-                  d="M 2,0 l 21,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -21,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                  d="M 659.5,210 l 21,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -21,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                   class="select"
                   width="25"
                   height="20"
+                  x="657.5"
+                  y="210"
                   stroke="rgba(217,217,217,1)"
-                  stroke-width="0"
                 />
-                <g transform="matrix(1,0,0,1,0,-2.500000)">
+                <g>
                   <text
                     id="g-svg-678"
                     fill="rgba(0,0,0,1)"
@@ -4713,13 +4809,15 @@
                     stroke-width="1"
                     text-anchor="left"
                     class="value"
+                    x="657.5"
+                    y="207.5"
                     dy="12.5px"
                   >
                     1x
                   </text>
                 </g>
               </g>
-              <g transform="matrix(1,0,0,1,0,25)">
+              <g transform="matrix(1,0,0,1,657.500000,235)">
                 <path
                   id="g-svg-677"
                   fill="rgba(255,255,255,1)"
@@ -4731,20 +4829,14 @@
                   filter="url(#g-filter-dropshadow-677)"
                   visibility="hidden"
                 />
-                <g
-                  id="g-svg-679"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="dropdown-container"
-                >
+                <g id="g-svg-679" fill="none" class="dropdown-container">
                   <g
                     id="g-svg-680"
                     fill="none"
                     class="dropdown-item"
                     width="25"
-                    transform="matrix(1,0,0,1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-681"
                         fill="rgba(230,247,255,1)"
@@ -4753,12 +4845,8 @@
                         height="25"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-682"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-682" fill="none">
+                        <g>
                           <text
                             id="g-svg-683"
                             fill="rgba(0,0,0,1)"
@@ -4789,7 +4877,7 @@
                     width="25"
                     transform="matrix(1,0,0,1,0,25)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-685"
                         fill="rgba(255,255,255,1)"
@@ -4798,12 +4886,8 @@
                         height="25"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-686"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-686" fill="none">
+                        <g>
                           <text
                             id="g-svg-687"
                             fill="rgba(0,0,0,1)"
@@ -4834,7 +4918,7 @@
                     width="25"
                     transform="matrix(1,0,0,1,0,50)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-689"
                         fill="rgba(255,255,255,1)"
@@ -4843,12 +4927,8 @@
                         height="25"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-690"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-690" fill="none">
+                        <g>
                           <text
                             id="g-svg-691"
                             fill="rgba(0,0,0,1)"
@@ -4877,469 +4957,500 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,0,250)">
+        <g>
           <path
             id="g-svg-267"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,250 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-268" fill="none" transform="matrix(1,0,0,1,20,270)">
-          <g transform="matrix(1,0,0,1,-20,-20)">
+        <g id="g-svg-268" fill="none" x="20" y="270">
+          <g>
             <path
               id="g-svg-269"
               fill="rgba(226,226,226,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"
+              d="M 4,250 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"
+              x="0"
+              y="250"
               width="40"
               height="40"
               opacity="0"
             />
           </g>
-          <g id="g-svg-270" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-10.397940,-10.397940)">
+          <g id="g-svg-270" fill="none">
+            <g>
               <path
                 id="g-svg-696"
                 fill="none"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.6020599913279625"
-                d="M 3.045486118169129,17.750393899174945 A 10.397940008672037 10.397940008672037 0 1 1 17.750393899174945 17.750393899174945"
+                d="M 12.647546109497092,277.3524538905029 A 10.397940008672037 10.397940008672037 0 1 1 27.352453890502908 277.3524538905029"
               />
-              <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,3.045486,17.750395)">
+              <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,12.647546,277.352448)">
                 <path
                   id="g-svg-698"
                   fill="rgba(86,87,88,1)"
-                  d="M 4.204119982655925,4.204119982655925 L 0,2.1020599913279625 L 4.204119982655925,0 Z"
-                  transform="translate(-2.1020599913279625,-2.1020599913279625)"
+                  d="M 2.1020599913279625,2.1020599913279625 L -2.1020599913279625,0 L 2.1020599913279625,-2.1020599913279625 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,50,250)">
+        <g>
           <path
             id="g-svg-271"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 50,250 l 40,0 l 0,40 l-40 0 z"
+            x="50"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-272" fill="none" transform="matrix(1,0,0,1,70,270)">
-          <g transform="matrix(1,0,0,1,-20,-20)">
+        <g id="g-svg-272" fill="none" x="70" y="270">
+          <g>
             <path
               id="g-svg-273"
               fill="rgba(226,226,226,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"
+              d="M 54,250 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"
+              x="50"
+              y="250"
               width="40"
               height="40"
               opacity="0"
             />
           </g>
-          <g id="g-svg-274" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-12,-6.928203)">
+          <g id="g-svg-274" fill="none">
+            <g>
               <polygon
                 id="g-svg-703"
                 fill="rgba(86,87,88,1)"
-                points="12,6.92820323027551 12,0 0,6.92820323027551 12,13.85640646055102 12,6.92820323027551 24,0 24,13.85640646055102 12,6.92820323027551"
+                points="70,270 70,263.0717967697245 58,270 70,276.9282032302755 70,270 82,263.0717967697245 82,276.9282032302755 70,270"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,100,250)">
+        <g>
           <path
             id="g-svg-275"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 100,250 l 40,0 l 0,40 l-40 0 z"
+            x="100"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-276" fill="none" transform="matrix(1,0,0,1,120,270)">
-          <g transform="matrix(1,0,0,1,-20,-20)">
+        <g id="g-svg-276" fill="none" x="120" y="270">
+          <g>
             <path
               id="g-svg-277"
               fill="rgba(226,226,226,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"
+              d="M 104,250 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"
+              x="100"
+              y="250"
               width="40"
               height="40"
               opacity="0"
             />
           </g>
-          <g id="g-svg-278" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-5.542562,-9.600000)">
+          <g id="g-svg-278" fill="none">
+            <g>
               <polygon
                 id="g-svg-708"
                 fill="rgba(86,87,88,1)"
-                points="16.627687752661224,9.600000000000001 0,0 0,19.200000000000003 16.627687752661224,9.600000000000001"
+                points="131.0851251684408,270 114.4574374157796,260.4 114.4574374157796,279.6 131.0851251684408,270"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,150,250)">
+        <g>
           <path
             id="g-svg-279"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 150,250 l 40,0 l 0,40 l-40 0 z"
+            x="150"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-280" fill="none" transform="matrix(1,0,0,1,170,270)">
-          <g transform="matrix(1,0,0,1,-20,-20)">
+        <g id="g-svg-280" fill="none" x="170" y="270">
+          <g>
             <path
               id="g-svg-281"
               fill="rgba(226,226,226,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"
+              d="M 154,250 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"
+              x="150"
+              y="250"
               width="40"
               height="40"
               opacity="0"
             />
           </g>
-          <g id="g-svg-282" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-12,-6.928203)">
+          <g id="g-svg-282" fill="none">
+            <g>
               <polygon
                 id="g-svg-713"
                 fill="rgba(86,87,88,1)"
-                points="12,6.92820323027551 12,0 24,6.92820323027551 12,13.85640646055102 12,6.92820323027551 0,0 0,13.85640646055102 12,6.92820323027551"
+                points="170,270 170,263.0717967697245 182,270 170,276.9282032302755 170,270 158,263.0717967697245 158,276.9282032302755 170,270"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,200,250)">
+        <g>
           <path
             id="g-svg-283"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,250 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-284" fill="none" transform="matrix(1,0,0,1,220,270)">
-          <g transform="matrix(1,0,0,1,-20,-20)">
+        <g id="g-svg-284" fill="none" x="220" y="270">
+          <g>
             <path
               id="g-svg-285"
               fill="rgba(226,226,226,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"
+              d="M 204,250 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"
+              x="200"
+              y="250"
               width="40"
               height="40"
               opacity="0"
             />
           </g>
-          <g id="g-svg-286" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-8,-12)">
+          <g id="g-svg-286" fill="none">
+            <g>
               <polygon
                 id="g-svg-718"
                 fill="rgba(86,87,88,1)"
-                points="0,0 0,24 4,24 4,0 0,0 12,0 12,24 16,24 16,0"
+                points="212,258 212,282 216,282 216,258 212,258 224,258 224,282 228,282 228,258"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,250,250)">
+        <g>
           <path
             id="g-svg-287"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 250,250 l 40,0 l 0,40 l-40 0 z"
+            x="250"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-288" fill="none" transform="matrix(1,0,0,1,270,270)">
-          <g transform="matrix(1,0,0,1,-20,-20)">
+        <g id="g-svg-288" fill="none" x="270" y="270">
+          <g>
             <path
               id="g-svg-289"
               fill="rgba(226,226,226,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"
+              d="M 254,250 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"
+              x="250"
+              y="250"
               width="40"
               height="40"
               opacity="0"
             />
           </g>
-          <g id="g-svg-290" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-12,-12)">
+          <g id="g-svg-290" fill="none">
+            <g>
               <line
                 id="g-svg-723"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="24"
+                x1="258"
+                y1="258"
+                x2="258"
+                y2="282"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.6020599913279625"
               />
             </g>
-            <g transform="matrix(1,0,0,1,12,-12)">
+            <g>
               <line
                 id="g-svg-724"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="24"
+                x1="282"
+                y1="258"
+                x2="282"
+                y2="282"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.6020599913279625"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-8.795880,0)">
+            <g>
               <line
                 id="g-svg-725"
                 fill="none"
-                x1="8.795880017344075"
-                y1="0"
-                x2="0"
-                y2="0"
+                x1="270"
+                y1="270"
+                x2="261.2041199826559"
+                y2="270"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.6020599913279625"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,261.204132,270)">
                 <path
                   id="g-svg-727"
                   fill="rgba(86,87,88,1)"
-                  d="M 6.40823996531185,6.40823996531185 L 0,3.204119982655925 L 6.40823996531185,0 Z"
-                  transform="translate(-3.204119982655925,-3.204119982655925)"
+                  d="M 3.204119982655925,3.204119982655925 L -3.204119982655925,0 L 3.204119982655925,-3.204119982655925 Z"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <line
                 id="g-svg-728"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="8.795880017344075"
-                y2="0"
+                x1="270"
+                y1="270"
+                x2="278.7958800173441"
+                y2="270"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.6020599913279625"
               />
-              <g transform="matrix(-1,0,-0,-1,8.795880,0)">
+              <g transform="matrix(-1,0,-0,-1,278.795868,270)">
                 <path
                   id="g-svg-730"
                   fill="rgba(86,87,88,1)"
-                  d="M 6.40823996531185,6.40823996531185 L 0,3.204119982655925 L 6.40823996531185,0 Z"
-                  transform="translate(-3.204119982655925,-3.204119982655925)"
+                  d="M 3.204119982655925,3.204119982655925 L -3.204119982655925,0 L 3.204119982655925,-3.204119982655925 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,300,250)">
+        <g>
           <path
             id="g-svg-291"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 300,250 l 40,0 l 0,40 l-40 0 z"
+            x="300"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-292" fill="none" transform="matrix(1,0,0,1,320,270)">
-          <g transform="matrix(1,0,0,1,-20,-20)">
+        <g id="g-svg-292" fill="none" x="320" y="270">
+          <g>
             <path
               id="g-svg-293"
               fill="rgba(226,226,226,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"
+              d="M 304,250 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"
+              x="300"
+              y="250"
               width="40"
               height="40"
               opacity="0"
             />
           </g>
-          <g id="g-svg-294" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,-12)">
+          <g id="g-svg-294" fill="none">
+            <g>
               <line
                 id="g-svg-735"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="24"
+                x1="320"
+                y1="258"
+                x2="320"
+                y2="282"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.6020599913279625"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-15.204120,0)">
+            <g>
               <line
                 id="g-svg-736"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="12"
-                y2="0"
+                x1="304.7958800173441"
+                y1="270"
+                x2="316.7958800173441"
+                y2="270"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.6020599913279625"
               />
-              <g transform="matrix(-1,0,-0,-1,12,0)">
+              <g transform="matrix(-1,0,-0,-1,316.795868,270)">
                 <path
                   id="g-svg-738"
                   fill="rgba(86,87,88,1)"
-                  d="M 6.40823996531185,6.40823996531185 L 0,3.204119982655925 L 6.40823996531185,0 Z"
-                  transform="translate(-3.204119982655925,-3.204119982655925)"
+                  d="M 3.204119982655925,3.204119982655925 L -3.204119982655925,0 L 3.204119982655925,-3.204119982655925 Z"
                 />
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,3.204120,0)">
+            <g>
               <line
                 id="g-svg-739"
                 fill="none"
-                x1="12"
-                y1="0"
-                x2="0"
-                y2="0"
+                x1="335.2041199826559"
+                y1="270"
+                x2="323.2041199826559"
+                y2="270"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.6020599913279625"
               />
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g transform="matrix(1,0,0,1,323.204132,270)">
                 <path
                   id="g-svg-741"
                   fill="rgba(86,87,88,1)"
-                  d="M 6.40823996531185,6.40823996531185 L 0,3.204119982655925 L 6.40823996531185,0 Z"
-                  transform="translate(-3.204119982655925,-3.204119982655925)"
+                  d="M 3.204119982655925,3.204119982655925 L -3.204119982655925,0 L 3.204119982655925,-3.204119982655925 Z"
                 />
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,350,250)">
+        <g>
           <path
             id="g-svg-295"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 350,250 l 40,0 l 0,40 l-40 0 z"
+            x="350"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-296" fill="none" transform="matrix(1,0,0,1,370,270)">
-          <g transform="matrix(1,0,0,1,-20,-20)">
+        <g id="g-svg-296" fill="none" x="370" y="270">
+          <g>
             <path
               id="g-svg-297"
               fill="rgba(226,226,226,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"
+              d="M 354,250 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"
+              x="350"
+              y="250"
               width="40"
               height="40"
               opacity="0"
             />
           </g>
-          <g id="g-svg-298" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-12,-12)">
+          <g id="g-svg-298" fill="none">
+            <g>
               <polyline
                 id="g-svg-746"
                 fill="none"
-                points="0,0 0,24 24,24"
+                points="358,258 358,282 382,282"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.6020599913279625"
               />
             </g>
-            <g transform="matrix(1,0,0,1,-10.397940,-10.397940)">
+            <g>
               <polyline
                 id="g-svg-747"
                 fill="none"
-                points="0,19.193820026016112 4.798455006504028,9.596910013008056 9.596910013008056,19.193820026016112 19.193820026016112,0"
+                points="359.60205999132796,278.7958800173441 364.400514997832,269.19897000433605 369.19897000433605,278.7958800173441 378.7958800173441,259.60205999132796"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.6020599913279625"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,400,250)">
+        <g>
           <path
             id="g-svg-299"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 400,250 l 40,0 l 0,40 l-40 0 z"
+            x="400"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-300" fill="none" transform="matrix(1,0,0,1,420,270)">
-          <g transform="matrix(1,0,0,1,-20,-20)">
+        <g id="g-svg-300" fill="none" x="420" y="270">
+          <g>
             <path
               id="g-svg-301"
               fill="rgba(226,226,226,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"
+              d="M 404,250 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"
+              x="400"
+              y="250"
               width="40"
               height="40"
               opacity="0"
             />
           </g>
-          <g id="g-svg-302" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,-12,-12)">
+          <g id="g-svg-302" fill="none">
+            <g>
               <polyline
                 id="g-svg-752"
                 fill="none"
-                points="0,0 0,24 24,24"
+                points="408,258 408,282 432,282"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.6020599913279625"
               />
             </g>
-            <g id="g-svg-753" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g transform="matrix(1,0,0,1,-8.795880,5.198970)">
+            <g id="g-svg-753" fill="none">
+              <g>
                 <line
                   id="g-svg-754"
                   fill="none"
-                  x1="0"
-                  y1="5.198970004336019"
-                  x2="0"
-                  y2="0"
+                  x1="411.2041199826559"
+                  y1="280.39794000867204"
+                  x2="411.2041199826559"
+                  y2="275.19897000433605"
                   class="column"
                   stroke="rgba(86,87,88,1)"
                   stroke-width="1.6020599913279625"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,-4.316292,-10.397940)">
+              <g>
                 <line
                   id="g-svg-755"
                   fill="none"
-                  x1="0"
-                  y1="20.795880017344075"
-                  x2="0"
-                  y2="0"
+                  x1="415.6837079843903"
+                  y1="280.39794000867204"
+                  x2="415.6837079843903"
+                  y2="259.60205999132796"
                   class="column"
                   stroke="rgba(86,87,88,1)"
                   stroke-width="1.6020599913279625"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,0.163296,0)">
+              <g>
                 <line
                   id="g-svg-756"
                   fill="none"
-                  x1="0"
-                  y1="10.397940008672037"
-                  x2="0"
-                  y2="0"
+                  x1="420.16329598612475"
+                  y1="280.39794000867204"
+                  x2="420.16329598612475"
+                  y2="270"
                   class="column"
                   stroke="rgba(86,87,88,1)"
                   stroke-width="1.6020599913279625"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,4.642884,-10.397940)">
+              <g>
                 <line
                   id="g-svg-757"
                   fill="none"
-                  x1="0"
-                  y1="20.795880017344075"
-                  x2="0"
-                  y2="0"
+                  x1="424.64288398785914"
+                  y1="280.39794000867204"
+                  x2="424.64288398785914"
+                  y2="259.60205999132796"
                   class="column"
                   stroke="rgba(86,87,88,1)"
                   stroke-width="1.6020599913279625"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,9.122472,-5.198970)">
+              <g>
                 <line
                   id="g-svg-758"
                   fill="none"
-                  x1="0"
-                  y1="15.596910013008056"
-                  x2="0"
-                  y2="0"
+                  x1="429.1224719895936"
+                  y1="280.39794000867204"
+                  x2="429.1224719895936"
+                  y2="264.80102999566395"
                   class="column"
                   stroke="rgba(86,87,88,1)"
                   stroke-width="1.6020599913279625"
@@ -5348,136 +5459,132 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,450,250)">
+        <g>
           <path
             id="g-svg-303"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 450,250 l 40,0 l 0,40 l-40 0 z"
+            x="450"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-304" fill="none" transform="matrix(1,0,0,1,470,270)">
-          <g id="g-svg-305" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-763"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-20,-20)">
+        <g id="g-svg-304" fill="none" x="470" y="270">
+          <g id="g-svg-305" fill="none">
+            <g id="g-svg-763" fill="none" x="470" y="270" class="icon">
+              <g>
                 <path
                   id="g-svg-764"
                   fill="rgba(226,226,226,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"
+                  d="M 454,250 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"
+                  x="450"
+                  y="250"
                   width="40"
                   height="40"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-765" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-5.542562,-9.600000)">
+              <g id="g-svg-765" fill="none">
+                <g>
                   <polygon
                     id="g-svg-766"
                     fill="rgba(86,87,88,1)"
-                    points="16.627687752661224,9.600000000000001 0,0 0,19.200000000000003 16.627687752661224,9.600000000000001"
+                    points="481.0851251684408,270 464.45743741577957,260.4 464.45743741577957,279.6 481.0851251684408,270"
                   />
                 </g>
               </g>
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,500,250)">
+        <g>
           <path
             id="g-svg-306"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 500,250 l 40,0 l 0,40 l-40 0 z"
+            x="500"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-307" fill="none" transform="matrix(1,0,0,1,520,270)">
-          <g id="g-svg-308" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-771"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-20,-20)">
+        <g id="g-svg-307" fill="none" x="520" y="270">
+          <g id="g-svg-308" fill="none">
+            <g id="g-svg-771" fill="none" x="520" y="270" class="icon">
+              <g>
                 <path
                   id="g-svg-772"
                   fill="rgba(226,226,226,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"
+                  d="M 504,250 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"
+                  x="500"
+                  y="250"
                   width="40"
                   height="40"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-773" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-12,-12)">
+              <g id="g-svg-773" fill="none">
+                <g>
                   <line
                     id="g-svg-774"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="24"
+                    x1="508"
+                    y1="258"
+                    x2="508"
+                    y2="282"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.6020599913279625"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,12,-12)">
+                <g>
                   <line
                     id="g-svg-775"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="24"
+                    x1="532"
+                    y1="258"
+                    x2="532"
+                    y2="282"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.6020599913279625"
                   />
                 </g>
-                <g transform="matrix(1,0,0,1,-8.795880,0)">
+                <g>
                   <line
                     id="g-svg-776"
                     fill="none"
-                    x1="8.795880017344075"
-                    y1="0"
-                    x2="0"
-                    y2="0"
+                    x1="520"
+                    y1="270"
+                    x2="511.2041199826559"
+                    y2="270"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.6020599913279625"
                   />
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g transform="matrix(1,0,0,1,511.204132,270)">
                     <path
                       id="g-svg-787"
                       fill="rgba(86,87,88,1)"
-                      d="M 6.40823996531185,6.40823996531185 L 0,3.204119982655925 L 6.40823996531185,0 Z"
-                      transform="translate(-3.204119982655925,-3.204119982655925)"
+                      d="M 3.204119982655925,3.204119982655925 L -3.204119982655925,0 L 3.204119982655925,-3.204119982655925 Z"
                     />
                   </g>
                 </g>
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <line
                     id="g-svg-779"
                     fill="none"
-                    x1="0"
-                    y1="0"
-                    x2="8.795880017344075"
-                    y2="0"
+                    x1="520"
+                    y1="270"
+                    x2="528.7958800173441"
+                    y2="270"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.6020599913279625"
                   />
-                  <g transform="matrix(-1,0,-0,-1,8.795880,0)">
+                  <g transform="matrix(-1,0,-0,-1,528.795898,270)">
                     <path
                       id="g-svg-789"
                       fill="rgba(86,87,88,1)"
-                      d="M 6.40823996531185,6.40823996531185 L 0,3.204119982655925 L 6.40823996531185,0 Z"
-                      transform="translate(-3.204119982655925,-3.204119982655925)"
+                      d="M 3.204119982655925,3.204119982655925 L -3.204119982655925,0 L 3.204119982655925,-3.204119982655925 Z"
                     />
                   </g>
                 </g>
@@ -5485,105 +5592,104 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,550,250)">
+        <g>
           <path
             id="g-svg-309"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 550,250 l 40,0 l 0,40 l-40 0 z"
+            x="550"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-310" fill="none" transform="matrix(1,0,0,1,570,270)">
-          <g id="g-svg-311" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-790"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="icon"
-            >
-              <g transform="matrix(1,0,0,1,-20,-20)">
+        <g id="g-svg-310" fill="none" x="570" y="270">
+          <g id="g-svg-311" fill="none">
+            <g id="g-svg-790" fill="none" x="570" y="270" class="icon">
+              <g>
                 <path
                   id="g-svg-791"
                   fill="rgba(226,226,226,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"
+                  d="M 554,250 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"
+                  x="550"
+                  y="250"
                   width="40"
                   height="40"
                   opacity="0"
                 />
               </g>
-              <g id="g-svg-792" fill="none" transform="matrix(1,0,0,1,0,0)">
-                <g transform="matrix(1,0,0,1,-12,-12)">
+              <g id="g-svg-792" fill="none">
+                <g>
                   <polyline
                     id="g-svg-793"
                     fill="none"
-                    points="0,0 0,24 24,24"
+                    points="558,258 558,282 582,282"
                     stroke="rgba(86,87,88,1)"
                     stroke-width="1.6020599913279625"
                   />
                 </g>
-                <g id="g-svg-794" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-8.795880,5.198970)">
+                <g id="g-svg-794" fill="none">
+                  <g>
                     <line
                       id="g-svg-804"
                       fill="none"
-                      x1="0"
-                      y1="5.198970004336019"
-                      x2="0"
-                      y2="0"
+                      x1="561.2041199826559"
+                      y1="280.39794000867204"
+                      x2="561.2041199826559"
+                      y2="275.19897000433605"
                       class="column"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.6020599913279625"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,-4.316292,-10.397940)">
+                  <g>
                     <line
                       id="g-svg-805"
                       fill="none"
-                      x1="0"
-                      y1="20.795880017344075"
-                      x2="0"
-                      y2="0"
+                      x1="565.6837079843904"
+                      y1="280.39794000867204"
+                      x2="565.6837079843904"
+                      y2="259.60205999132796"
                       class="column"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.6020599913279625"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,0.163296,0)">
+                  <g>
                     <line
                       id="g-svg-806"
                       fill="none"
-                      x1="0"
-                      y1="10.397940008672037"
-                      x2="0"
-                      y2="0"
+                      x1="570.1632959861247"
+                      y1="280.39794000867204"
+                      x2="570.1632959861247"
+                      y2="270"
                       class="column"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.6020599913279625"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,4.642884,-10.397940)">
+                  <g>
                     <line
                       id="g-svg-807"
                       fill="none"
-                      x1="0"
-                      y1="20.795880017344075"
-                      x2="0"
-                      y2="0"
+                      x1="574.6428839878591"
+                      y1="280.39794000867204"
+                      x2="574.6428839878591"
+                      y2="259.60205999132796"
                       class="column"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.6020599913279625"
                     />
                   </g>
-                  <g transform="matrix(1,0,0,1,9.122472,-5.198970)">
+                  <g>
                     <line
                       id="g-svg-808"
                       fill="none"
-                      x1="0"
-                      y1="15.596910013008056"
-                      x2="0"
-                      y2="0"
+                      x1="579.1224719895936"
+                      y1="280.39794000867204"
+                      x2="579.1224719895936"
+                      y2="264.80102999566395"
                       class="column"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.6020599913279625"
@@ -5594,70 +5700,76 @@
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,600,250)">
+        <g>
           <path
             id="g-svg-312"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 600,250 l 40,0 l 0,40 l-40 0 z"
+            x="600"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-313" fill="none" transform="matrix(1,0,0,1,620,270)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-313" fill="none" x="620" y="270">
+          <g>
             <path id="g-svg-314" fill="none" />
           </g>
-          <g id="g-svg-315" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g transform="matrix(1,0,0,1,0,-12)">
+          <g id="g-svg-315" fill="none">
+            <g>
               <line
                 id="g-svg-809"
                 fill="none"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="24"
+                x1="620"
+                y1="258"
+                x2="620"
+                y2="282"
                 stroke="rgba(86,87,88,1)"
                 stroke-width="1.6020599913279625"
               />
             </g>
           </g>
         </g>
-        <g transform="matrix(1,0,0,1,650,250)">
+        <g>
           <path
             id="g-svg-316"
             fill="none"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 650,250 l 40,0 l 0,40 l-40 0 z"
+            x="650"
+            y="250"
             width="40"
             height="40"
             stroke="rgba(255,165,0,1)"
           />
         </g>
-        <g id="g-svg-317" fill="none" transform="matrix(1,0,0,1,670,270)">
-          <g transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-317" fill="none" x="670" y="270">
+          <g>
             <path id="g-svg-318" fill="none" />
           </g>
-          <g id="g-svg-319" fill="none" transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-319" fill="none">
             <g
               id="g-svg-814"
               fill="none"
+              x="650"
+              y="260"
               width="40"
               height="20"
-              transform="matrix(1,0,0,1,-20,-10)"
               class="speed"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <path
                   id="g-svg-815"
                   fill="rgba(255,255,255,1)"
-                  d="M 2,0 l 36,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -36,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                  d="M 652,260 l 36,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -36,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                   class="select"
                   width="40"
                   height="20"
+                  x="650"
+                  y="260"
                   stroke="rgba(217,217,217,1)"
-                  stroke-width="0"
                 />
-                <g transform="matrix(1,0,0,1,0,-8.500000)">
+                <g>
                   <text
                     id="g-svg-817"
                     fill="rgba(0,0,0,1)"
@@ -5672,13 +5784,15 @@
                     stroke-width="1"
                     text-anchor="left"
                     class="value"
+                    x="650"
+                    y="251.5"
                     dy="18.5px"
                   >
                     1x
                   </text>
                 </g>
               </g>
-              <g transform="matrix(1,0,0,1,0,28)">
+              <g transform="matrix(1,0,0,1,650,288)">
                 <path
                   id="g-svg-816"
                   fill="rgba(255,255,255,1)"
@@ -5690,20 +5804,14 @@
                   filter="url(#g-filter-dropshadow-816)"
                   visibility="hidden"
                 />
-                <g
-                  id="g-svg-818"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="dropdown-container"
-                >
+                <g id="g-svg-818" fill="none" class="dropdown-container">
                   <g
                     id="g-svg-819"
                     fill="none"
                     class="dropdown-item"
                     width="40"
-                    transform="matrix(1,0,0,1,0,0)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-820"
                         fill="rgba(230,247,255,1)"
@@ -5712,12 +5820,8 @@
                         height="37"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-821"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-821" fill="none">
+                        <g>
                           <text
                             id="g-svg-822"
                             fill="rgba(0,0,0,1)"
@@ -5748,7 +5852,7 @@
                     width="40"
                     transform="matrix(1,0,0,1,0,37)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-824"
                         fill="rgba(255,255,255,1)"
@@ -5757,12 +5861,8 @@
                         height="37"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-825"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-825" fill="none">
+                        <g>
                           <text
                             id="g-svg-826"
                             fill="rgba(0,0,0,1)"
@@ -5793,7 +5893,7 @@
                     width="40"
                     transform="matrix(1,0,0,1,0,74)"
                   >
-                    <g transform="matrix(1,0,0,1,0,0)">
+                    <g>
                       <path
                         id="g-svg-828"
                         fill="rgba(255,255,255,1)"
@@ -5802,12 +5902,8 @@
                         height="37"
                         visibility="hidden"
                       />
-                      <g
-                        id="g-svg-829"
-                        fill="none"
-                        transform="matrix(1,0,0,1,0,0)"
-                      >
-                        <g transform="matrix(1,0,0,1,0,0)">
+                      <g id="g-svg-829" fill="none">
+                        <g>
                           <text
                             id="g-svg-830"
                             fill="rgba(0,0,0,1)"
@@ -5837,9 +5933,9 @@
           </g>
         </g>
       </g>
-      <g id="g-svg-4" fill="none" transform="matrix(1,0,0,1,20,15)">
-        <g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-4" fill="none" x="20" y="15">
+        <g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,20,6.071797)">
+          <g>
             <path
               id="g-svg-7"
               fill="rgba(38,38,38,1)"
@@ -5847,21 +5943,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-6"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-6" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-9" fill="none" transform="matrix(1,0,0,1,70,15)">
-        <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-9" fill="none" x="70" y="15">
+        <g id="g-svg-10" fill="none" transform="matrix(1,0,0,1,70,6.071797)">
+          <g>
             <path
               id="g-svg-12"
               fill="rgba(38,38,38,1)"
@@ -5869,21 +5960,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-11"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-11" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,120,15)">
-        <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-14" fill="none" x="120" y="15">
+        <g id="g-svg-15" fill="none" transform="matrix(1,0,0,1,120,6.071797)">
+          <g>
             <path
               id="g-svg-17"
               fill="rgba(38,38,38,1)"
@@ -5891,21 +5977,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-16"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-16" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-19" fill="none" transform="matrix(1,0,0,1,170,15)">
-        <g id="g-svg-20" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-19" fill="none" x="170" y="15">
+        <g id="g-svg-20" fill="none" transform="matrix(1,0,0,1,170,6.071797)">
+          <g>
             <path
               id="g-svg-22"
               fill="rgba(38,38,38,1)"
@@ -5913,21 +5994,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-21"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-21" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-24" fill="none" transform="matrix(1,0,0,1,220,15)">
-        <g id="g-svg-25" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-24" fill="none" x="220" y="15">
+        <g id="g-svg-25" fill="none" transform="matrix(1,0,0,1,220,6.071797)">
+          <g>
             <path
               id="g-svg-27"
               fill="rgba(38,38,38,1)"
@@ -5935,21 +6011,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-26"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-26" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-36" fill="none" transform="matrix(1,0,0,1,270,15)">
-        <g id="g-svg-37" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-36" fill="none" x="270" y="15">
+        <g id="g-svg-37" fill="none" transform="matrix(1,0,0,1,270,6.071797)">
+          <g>
             <path
               id="g-svg-39"
               fill="rgba(38,38,38,1)"
@@ -5957,21 +6028,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-38"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-38" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-47" fill="none" transform="matrix(1,0,0,1,320,15)">
-        <g id="g-svg-48" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-47" fill="none" x="320" y="15">
+        <g id="g-svg-48" fill="none" transform="matrix(1,0,0,1,320,6.071797)">
+          <g>
             <path
               id="g-svg-50"
               fill="rgba(38,38,38,1)"
@@ -5979,21 +6045,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-49"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-49" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-53" fill="none" transform="matrix(1,0,0,1,370,15)">
-        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-53" fill="none" x="370" y="15">
+        <g id="g-svg-54" fill="none" transform="matrix(1,0,0,1,370,6.071797)">
+          <g>
             <path
               id="g-svg-56"
               fill="rgba(38,38,38,1)"
@@ -6001,21 +6062,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-55"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-55" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-64" fill="none" transform="matrix(1,0,0,1,420,15)">
-        <g id="g-svg-65" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-64" fill="none" x="420" y="15">
+        <g id="g-svg-65" fill="none" transform="matrix(1,0,0,1,420,6.071797)">
+          <g>
             <path
               id="g-svg-67"
               fill="rgba(38,38,38,1)"
@@ -6023,21 +6079,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-66"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-66" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-72" fill="none" transform="matrix(1,0,0,1,470,10)">
-        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-72" fill="none" x="0" y="-10">
+        <g id="g-svg-73" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-75"
               fill="rgba(38,38,38,1)"
@@ -6045,21 +6096,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-74"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-74" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-87" fill="none" transform="matrix(1,0,0,1,520,10)">
-        <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-87" fill="none" x="0" y="-10">
+        <g id="g-svg-88" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-90"
               fill="rgba(38,38,38,1)"
@@ -6067,21 +6113,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-89"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-89" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-105" fill="none" transform="matrix(1,0,0,1,570,10)">
-        <g id="g-svg-106" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-105" fill="none" x="0" y="-10">
+        <g id="g-svg-106" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-108"
               fill="rgba(38,38,38,1)"
@@ -6089,25 +6130,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-107"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-107" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g
-        id="g-svg-115"
-        fill="none"
-        transform="matrix(1,0,0,1,2.500000,-2.500000)"
-      >
-        <g id="g-svg-116" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-115" fill="none" x="2.5" y="-2.5">
+        <g
+          id="g-svg-116"
+          fill="none"
+          transform="matrix(1,0,0,1,2.500000,-11.428204)"
+        >
+          <g>
             <path
               id="g-svg-118"
               fill="rgba(38,38,38,1)"
@@ -6115,25 +6151,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-117"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-117" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g
-        id="g-svg-136"
-        fill="none"
-        transform="matrix(1,0,0,1,2.500000,-2.500000)"
-      >
-        <g id="g-svg-137" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-136" fill="none" x="2.5" y="-2.5">
+        <g
+          id="g-svg-137"
+          fill="none"
+          transform="matrix(1,0,0,1,2.500000,-11.428204)"
+        >
+          <g>
             <path
               id="g-svg-139"
               fill="rgba(38,38,38,1)"
@@ -6141,21 +6172,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-138"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-138" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-143" fill="none" transform="matrix(1,0,0,1,20,60)">
-        <g id="g-svg-144" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-143" fill="none" x="20" y="60">
+        <g id="g-svg-144" fill="none" transform="matrix(1,0,0,1,20,51.071796)">
+          <g>
             <path
               id="g-svg-146"
               fill="rgba(38,38,38,1)"
@@ -6163,21 +6189,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-145"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-145" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-148" fill="none" transform="matrix(1,0,0,1,70,60)">
-        <g id="g-svg-149" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-148" fill="none" x="70" y="60">
+        <g id="g-svg-149" fill="none" transform="matrix(1,0,0,1,70,51.071796)">
+          <g>
             <path
               id="g-svg-151"
               fill="rgba(38,38,38,1)"
@@ -6185,21 +6206,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-150"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-150" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-153" fill="none" transform="matrix(1,0,0,1,120,60)">
-        <g id="g-svg-154" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-153" fill="none" x="120" y="60">
+        <g id="g-svg-154" fill="none" transform="matrix(1,0,0,1,120,51.071796)">
+          <g>
             <path
               id="g-svg-156"
               fill="rgba(38,38,38,1)"
@@ -6207,21 +6223,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-155"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-155" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-158" fill="none" transform="matrix(1,0,0,1,170,60)">
-        <g id="g-svg-159" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-158" fill="none" x="170" y="60">
+        <g id="g-svg-159" fill="none" transform="matrix(1,0,0,1,170,51.071796)">
+          <g>
             <path
               id="g-svg-161"
               fill="rgba(38,38,38,1)"
@@ -6229,21 +6240,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-160"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-160" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-163" fill="none" transform="matrix(1,0,0,1,220,60)">
-        <g id="g-svg-164" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-163" fill="none" x="220" y="60">
+        <g id="g-svg-164" fill="none" transform="matrix(1,0,0,1,220,51.071796)">
+          <g>
             <path
               id="g-svg-166"
               fill="rgba(38,38,38,1)"
@@ -6251,21 +6257,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-165"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-165" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-175" fill="none" transform="matrix(1,0,0,1,270,60)">
-        <g id="g-svg-176" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-175" fill="none" x="270" y="60">
+        <g id="g-svg-176" fill="none" transform="matrix(1,0,0,1,270,51.071796)">
+          <g>
             <path
               id="g-svg-178"
               fill="rgba(38,38,38,1)"
@@ -6273,21 +6274,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-177"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-177" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-186" fill="none" transform="matrix(1,0,0,1,320,60)">
-        <g id="g-svg-187" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-186" fill="none" x="320" y="60">
+        <g id="g-svg-187" fill="none" transform="matrix(1,0,0,1,320,51.071796)">
+          <g>
             <path
               id="g-svg-189"
               fill="rgba(38,38,38,1)"
@@ -6295,21 +6291,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-188"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-188" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-192" fill="none" transform="matrix(1,0,0,1,370,60)">
-        <g id="g-svg-193" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-192" fill="none" x="370" y="60">
+        <g id="g-svg-193" fill="none" transform="matrix(1,0,0,1,370,51.071796)">
+          <g>
             <path
               id="g-svg-195"
               fill="rgba(38,38,38,1)"
@@ -6317,21 +6308,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-194"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-194" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-203" fill="none" transform="matrix(1,0,0,1,420,60)">
-        <g id="g-svg-204" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-203" fill="none" x="420" y="60">
+        <g id="g-svg-204" fill="none" transform="matrix(1,0,0,1,420,51.071796)">
+          <g>
             <path
               id="g-svg-206"
               fill="rgba(38,38,38,1)"
@@ -6339,21 +6325,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-205"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-205" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-211" fill="none" transform="matrix(1,0,0,1,470,60)">
-        <g id="g-svg-212" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-211" fill="none" x="0" y="-10">
+        <g id="g-svg-212" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-214"
               fill="rgba(38,38,38,1)"
@@ -6361,21 +6342,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-213"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-213" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-226" fill="none" transform="matrix(1,0,0,1,520,60)">
-        <g id="g-svg-227" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-226" fill="none" x="0" y="-10">
+        <g id="g-svg-227" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-229"
               fill="rgba(38,38,38,1)"
@@ -6383,21 +6359,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-228"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-228" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-244" fill="none" transform="matrix(1,0,0,1,570,60)">
-        <g id="g-svg-245" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-244" fill="none" x="0" y="-10">
+        <g id="g-svg-245" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-247"
               fill="rgba(38,38,38,1)"
@@ -6405,21 +6376,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-246"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-246" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-254" fill="none" transform="matrix(1,0,0,1,5,-5)">
-        <g id="g-svg-255" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-254" fill="none" x="5" y="-5">
+        <g id="g-svg-255" fill="none" transform="matrix(1,0,0,1,5,-13.928204)">
+          <g>
             <path
               id="g-svg-257"
               fill="rgba(38,38,38,1)"
@@ -6427,21 +6393,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-256"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-256" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-275" fill="none" transform="matrix(1,0,0,1,5,-5)">
-        <g id="g-svg-276" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-275" fill="none" x="5" y="-5">
+        <g id="g-svg-276" fill="none" transform="matrix(1,0,0,1,5,-13.928204)">
+          <g>
             <path
               id="g-svg-278"
               fill="rgba(38,38,38,1)"
@@ -6449,21 +6410,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-277"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-277" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-282" fill="none" transform="matrix(1,0,0,1,20,105)">
-        <g id="g-svg-283" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-282" fill="none" x="20" y="105">
+        <g id="g-svg-283" fill="none" transform="matrix(1,0,0,1,20,96.071800)">
+          <g>
             <path
               id="g-svg-285"
               fill="rgba(38,38,38,1)"
@@ -6471,21 +6427,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-284"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-284" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-287" fill="none" transform="matrix(1,0,0,1,70,105)">
-        <g id="g-svg-288" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-287" fill="none" x="70" y="105">
+        <g id="g-svg-288" fill="none" transform="matrix(1,0,0,1,70,96.071800)">
+          <g>
             <path
               id="g-svg-290"
               fill="rgba(38,38,38,1)"
@@ -6493,21 +6444,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-289"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-289" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-292" fill="none" transform="matrix(1,0,0,1,120,105)">
-        <g id="g-svg-293" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-292" fill="none" x="120" y="105">
+        <g id="g-svg-293" fill="none" transform="matrix(1,0,0,1,120,96.071800)">
+          <g>
             <path
               id="g-svg-295"
               fill="rgba(38,38,38,1)"
@@ -6515,21 +6461,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-294"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-294" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-297" fill="none" transform="matrix(1,0,0,1,170,105)">
-        <g id="g-svg-298" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-297" fill="none" x="170" y="105">
+        <g id="g-svg-298" fill="none" transform="matrix(1,0,0,1,170,96.071800)">
+          <g>
             <path
               id="g-svg-300"
               fill="rgba(38,38,38,1)"
@@ -6537,21 +6478,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-299"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-299" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-302" fill="none" transform="matrix(1,0,0,1,220,105)">
-        <g id="g-svg-303" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-302" fill="none" x="220" y="105">
+        <g id="g-svg-303" fill="none" transform="matrix(1,0,0,1,220,96.071800)">
+          <g>
             <path
               id="g-svg-305"
               fill="rgba(38,38,38,1)"
@@ -6559,21 +6495,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-304"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-304" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-314" fill="none" transform="matrix(1,0,0,1,270,105)">
-        <g id="g-svg-315" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-314" fill="none" x="270" y="105">
+        <g id="g-svg-315" fill="none" transform="matrix(1,0,0,1,270,96.071800)">
+          <g>
             <path
               id="g-svg-317"
               fill="rgba(38,38,38,1)"
@@ -6581,21 +6512,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-316"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-316" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-325" fill="none" transform="matrix(1,0,0,1,320,105)">
-        <g id="g-svg-326" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-325" fill="none" x="320" y="105">
+        <g id="g-svg-326" fill="none" transform="matrix(1,0,0,1,320,96.071800)">
+          <g>
             <path
               id="g-svg-328"
               fill="rgba(38,38,38,1)"
@@ -6603,21 +6529,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-327"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-327" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-331" fill="none" transform="matrix(1,0,0,1,370,105)">
-        <g id="g-svg-332" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-331" fill="none" x="370" y="105">
+        <g id="g-svg-332" fill="none" transform="matrix(1,0,0,1,370,96.071800)">
+          <g>
             <path
               id="g-svg-334"
               fill="rgba(38,38,38,1)"
@@ -6625,21 +6546,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-333"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-333" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-342" fill="none" transform="matrix(1,0,0,1,420,105)">
-        <g id="g-svg-343" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-342" fill="none" x="420" y="105">
+        <g id="g-svg-343" fill="none" transform="matrix(1,0,0,1,420,96.071800)">
+          <g>
             <path
               id="g-svg-345"
               fill="rgba(38,38,38,1)"
@@ -6647,21 +6563,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-344"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-344" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-350" fill="none" transform="matrix(1,0,0,1,470,110)">
-        <g id="g-svg-351" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-350" fill="none" x="0" y="-10">
+        <g id="g-svg-351" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-353"
               fill="rgba(38,38,38,1)"
@@ -6669,21 +6580,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-352"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-352" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-365" fill="none" transform="matrix(1,0,0,1,520,110)">
-        <g id="g-svg-366" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-365" fill="none" x="0" y="-10">
+        <g id="g-svg-366" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-368"
               fill="rgba(38,38,38,1)"
@@ -6691,21 +6597,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-367"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-367" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-383" fill="none" transform="matrix(1,0,0,1,570,110)">
-        <g id="g-svg-384" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-383" fill="none" x="0" y="-10">
+        <g id="g-svg-384" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-386"
               fill="rgba(38,38,38,1)"
@@ -6713,25 +6614,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-385"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-385" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g
-        id="g-svg-393"
-        fill="none"
-        transform="matrix(1,0,0,1,7.500000,-7.500000)"
-      >
-        <g id="g-svg-394" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-393" fill="none" x="7.5" y="-7.5">
+        <g
+          id="g-svg-394"
+          fill="none"
+          transform="matrix(1,0,0,1,7.500000,-16.428204)"
+        >
+          <g>
             <path
               id="g-svg-396"
               fill="rgba(38,38,38,1)"
@@ -6739,25 +6635,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-395"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-395" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g
-        id="g-svg-414"
-        fill="none"
-        transform="matrix(1,0,0,1,7.500000,-7.500000)"
-      >
-        <g id="g-svg-415" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-414" fill="none" x="7.5" y="-7.5">
+        <g
+          id="g-svg-415"
+          fill="none"
+          transform="matrix(1,0,0,1,7.500000,-16.428204)"
+        >
+          <g>
             <path
               id="g-svg-417"
               fill="rgba(38,38,38,1)"
@@ -6765,21 +6656,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-416"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-416" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-421" fill="none" transform="matrix(1,0,0,1,20,150)">
-        <g id="g-svg-422" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-421" fill="none" x="20" y="150">
+        <g id="g-svg-422" fill="none" transform="matrix(1,0,0,1,20,141.071793)">
+          <g>
             <path
               id="g-svg-424"
               fill="rgba(38,38,38,1)"
@@ -6787,21 +6673,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-423"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-423" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-426" fill="none" transform="matrix(1,0,0,1,70,150)">
-        <g id="g-svg-427" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-426" fill="none" x="70" y="150">
+        <g id="g-svg-427" fill="none" transform="matrix(1,0,0,1,70,141.071793)">
+          <g>
             <path
               id="g-svg-429"
               fill="rgba(38,38,38,1)"
@@ -6809,21 +6690,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-428"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-428" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-431" fill="none" transform="matrix(1,0,0,1,120,150)">
-        <g id="g-svg-432" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-431" fill="none" x="120" y="150">
+        <g
+          id="g-svg-432"
+          fill="none"
+          transform="matrix(1,0,0,1,120,141.071793)"
+        >
+          <g>
             <path
               id="g-svg-434"
               fill="rgba(38,38,38,1)"
@@ -6831,21 +6711,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-433"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-433" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-436" fill="none" transform="matrix(1,0,0,1,170,150)">
-        <g id="g-svg-437" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-436" fill="none" x="170" y="150">
+        <g
+          id="g-svg-437"
+          fill="none"
+          transform="matrix(1,0,0,1,170,141.071793)"
+        >
+          <g>
             <path
               id="g-svg-439"
               fill="rgba(38,38,38,1)"
@@ -6853,21 +6732,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-438"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-438" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-441" fill="none" transform="matrix(1,0,0,1,220,150)">
-        <g id="g-svg-442" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-441" fill="none" x="220" y="150">
+        <g
+          id="g-svg-442"
+          fill="none"
+          transform="matrix(1,0,0,1,220,141.071793)"
+        >
+          <g>
             <path
               id="g-svg-444"
               fill="rgba(38,38,38,1)"
@@ -6875,21 +6753,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-443"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-443" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-453" fill="none" transform="matrix(1,0,0,1,270,150)">
-        <g id="g-svg-454" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-453" fill="none" x="270" y="150">
+        <g
+          id="g-svg-454"
+          fill="none"
+          transform="matrix(1,0,0,1,270,141.071793)"
+        >
+          <g>
             <path
               id="g-svg-456"
               fill="rgba(38,38,38,1)"
@@ -6897,21 +6774,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-455"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-455" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-464" fill="none" transform="matrix(1,0,0,1,320,150)">
-        <g id="g-svg-465" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-464" fill="none" x="320" y="150">
+        <g
+          id="g-svg-465"
+          fill="none"
+          transform="matrix(1,0,0,1,320,141.071793)"
+        >
+          <g>
             <path
               id="g-svg-467"
               fill="rgba(38,38,38,1)"
@@ -6919,21 +6795,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-466"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-466" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-470" fill="none" transform="matrix(1,0,0,1,370,150)">
-        <g id="g-svg-471" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-470" fill="none" x="370" y="150">
+        <g
+          id="g-svg-471"
+          fill="none"
+          transform="matrix(1,0,0,1,370,141.071793)"
+        >
+          <g>
             <path
               id="g-svg-473"
               fill="rgba(38,38,38,1)"
@@ -6941,21 +6816,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-472"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-472" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-481" fill="none" transform="matrix(1,0,0,1,420,150)">
-        <g id="g-svg-482" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-481" fill="none" x="420" y="150">
+        <g
+          id="g-svg-482"
+          fill="none"
+          transform="matrix(1,0,0,1,420,141.071793)"
+        >
+          <g>
             <path
               id="g-svg-484"
               fill="rgba(38,38,38,1)"
@@ -6963,21 +6837,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-483"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-483" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-489" fill="none" transform="matrix(1,0,0,1,470,160)">
-        <g id="g-svg-490" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-489" fill="none" x="0" y="-10">
+        <g id="g-svg-490" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-492"
               fill="rgba(38,38,38,1)"
@@ -6985,21 +6854,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-491"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-491" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-504" fill="none" transform="matrix(1,0,0,1,520,160)">
-        <g id="g-svg-505" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-504" fill="none" x="0" y="-10">
+        <g id="g-svg-505" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-507"
               fill="rgba(38,38,38,1)"
@@ -7007,21 +6871,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-506"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-506" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-522" fill="none" transform="matrix(1,0,0,1,570,160)">
-        <g id="g-svg-523" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-522" fill="none" x="0" y="-10">
+        <g id="g-svg-523" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-525"
               fill="rgba(38,38,38,1)"
@@ -7029,21 +6888,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-524"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-524" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-532" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-533" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-532" fill="none" x="10" y="-10">
+        <g id="g-svg-533" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-535"
               fill="rgba(38,38,38,1)"
@@ -7051,21 +6905,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-534"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-534" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-553" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-554" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-553" fill="none" x="10" y="-10">
+        <g id="g-svg-554" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-556"
               fill="rgba(38,38,38,1)"
@@ -7073,21 +6922,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-555"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-555" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-560" fill="none" transform="matrix(1,0,0,1,20,195)">
-        <g id="g-svg-561" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-560" fill="none" x="20" y="195">
+        <g id="g-svg-561" fill="none" transform="matrix(1,0,0,1,20,186.071793)">
+          <g>
             <path
               id="g-svg-563"
               fill="rgba(38,38,38,1)"
@@ -7095,21 +6939,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-562"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-562" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-565" fill="none" transform="matrix(1,0,0,1,70,195)">
-        <g id="g-svg-566" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-565" fill="none" x="70" y="195">
+        <g id="g-svg-566" fill="none" transform="matrix(1,0,0,1,70,186.071793)">
+          <g>
             <path
               id="g-svg-568"
               fill="rgba(38,38,38,1)"
@@ -7117,21 +6956,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-567"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-567" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-570" fill="none" transform="matrix(1,0,0,1,120,195)">
-        <g id="g-svg-571" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-570" fill="none" x="120" y="195">
+        <g
+          id="g-svg-571"
+          fill="none"
+          transform="matrix(1,0,0,1,120,186.071793)"
+        >
+          <g>
             <path
               id="g-svg-573"
               fill="rgba(38,38,38,1)"
@@ -7139,21 +6977,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-572"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-572" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-575" fill="none" transform="matrix(1,0,0,1,170,195)">
-        <g id="g-svg-576" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-575" fill="none" x="170" y="195">
+        <g
+          id="g-svg-576"
+          fill="none"
+          transform="matrix(1,0,0,1,170,186.071793)"
+        >
+          <g>
             <path
               id="g-svg-578"
               fill="rgba(38,38,38,1)"
@@ -7161,21 +6998,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-577"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-577" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-580" fill="none" transform="matrix(1,0,0,1,220,195)">
-        <g id="g-svg-581" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-580" fill="none" x="220" y="195">
+        <g
+          id="g-svg-581"
+          fill="none"
+          transform="matrix(1,0,0,1,220,186.071793)"
+        >
+          <g>
             <path
               id="g-svg-583"
               fill="rgba(38,38,38,1)"
@@ -7183,21 +7019,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-582"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-582" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-592" fill="none" transform="matrix(1,0,0,1,270,195)">
-        <g id="g-svg-593" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-592" fill="none" x="270" y="195">
+        <g
+          id="g-svg-593"
+          fill="none"
+          transform="matrix(1,0,0,1,270,186.071793)"
+        >
+          <g>
             <path
               id="g-svg-595"
               fill="rgba(38,38,38,1)"
@@ -7205,21 +7040,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-594"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-594" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-603" fill="none" transform="matrix(1,0,0,1,320,195)">
-        <g id="g-svg-604" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-603" fill="none" x="320" y="195">
+        <g
+          id="g-svg-604"
+          fill="none"
+          transform="matrix(1,0,0,1,320,186.071793)"
+        >
+          <g>
             <path
               id="g-svg-606"
               fill="rgba(38,38,38,1)"
@@ -7227,21 +7061,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-605"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-605" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-609" fill="none" transform="matrix(1,0,0,1,370,195)">
-        <g id="g-svg-610" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-609" fill="none" x="370" y="195">
+        <g
+          id="g-svg-610"
+          fill="none"
+          transform="matrix(1,0,0,1,370,186.071793)"
+        >
+          <g>
             <path
               id="g-svg-612"
               fill="rgba(38,38,38,1)"
@@ -7249,21 +7082,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-611"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-611" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-620" fill="none" transform="matrix(1,0,0,1,420,195)">
-        <g id="g-svg-621" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-620" fill="none" x="420" y="195">
+        <g
+          id="g-svg-621"
+          fill="none"
+          transform="matrix(1,0,0,1,420,186.071793)"
+        >
+          <g>
             <path
               id="g-svg-623"
               fill="rgba(38,38,38,1)"
@@ -7271,21 +7103,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-622"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-622" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-628" fill="none" transform="matrix(1,0,0,1,470,210)">
-        <g id="g-svg-629" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-628" fill="none" x="0" y="-10">
+        <g id="g-svg-629" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-631"
               fill="rgba(38,38,38,1)"
@@ -7293,21 +7120,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-630"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-630" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-643" fill="none" transform="matrix(1,0,0,1,520,210)">
-        <g id="g-svg-644" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-643" fill="none" x="0" y="-10">
+        <g id="g-svg-644" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-646"
               fill="rgba(38,38,38,1)"
@@ -7315,21 +7137,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-645"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-645" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-661" fill="none" transform="matrix(1,0,0,1,570,210)">
-        <g id="g-svg-662" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-661" fill="none" x="0" y="-10">
+        <g id="g-svg-662" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-664"
               fill="rgba(38,38,38,1)"
@@ -7337,25 +7154,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-663"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-663" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g
-        id="g-svg-671"
-        fill="none"
-        transform="matrix(1,0,0,1,12.500000,-12.500000)"
-      >
-        <g id="g-svg-672" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-671" fill="none" x="12.5" y="-12.5">
+        <g
+          id="g-svg-672"
+          fill="none"
+          transform="matrix(1,0,0,1,12.500000,-21.428204)"
+        >
+          <g>
             <path
               id="g-svg-674"
               fill="rgba(38,38,38,1)"
@@ -7363,25 +7175,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-673"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-673" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g
-        id="g-svg-692"
-        fill="none"
-        transform="matrix(1,0,0,1,12.500000,-12.500000)"
-      >
-        <g id="g-svg-693" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-692" fill="none" x="12.5" y="-12.5">
+        <g
+          id="g-svg-693"
+          fill="none"
+          transform="matrix(1,0,0,1,12.500000,-21.428204)"
+        >
+          <g>
             <path
               id="g-svg-695"
               fill="rgba(38,38,38,1)"
@@ -7389,21 +7196,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-694"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-694" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-699" fill="none" transform="matrix(1,0,0,1,20,230)">
-        <g id="g-svg-700" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-699" fill="none" x="20" y="230">
+        <g id="g-svg-700" fill="none" transform="matrix(1,0,0,1,20,221.071793)">
+          <g>
             <path
               id="g-svg-702"
               fill="rgba(38,38,38,1)"
@@ -7411,21 +7213,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-701"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-701" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-704" fill="none" transform="matrix(1,0,0,1,70,230)">
-        <g id="g-svg-705" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-704" fill="none" x="70" y="230">
+        <g id="g-svg-705" fill="none" transform="matrix(1,0,0,1,70,221.071793)">
+          <g>
             <path
               id="g-svg-707"
               fill="rgba(38,38,38,1)"
@@ -7433,21 +7230,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-706"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-706" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-709" fill="none" transform="matrix(1,0,0,1,120,230)">
-        <g id="g-svg-710" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-709" fill="none" x="120" y="230">
+        <g
+          id="g-svg-710"
+          fill="none"
+          transform="matrix(1,0,0,1,120,221.071793)"
+        >
+          <g>
             <path
               id="g-svg-712"
               fill="rgba(38,38,38,1)"
@@ -7455,21 +7251,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-711"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-711" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-714" fill="none" transform="matrix(1,0,0,1,170,230)">
-        <g id="g-svg-715" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-714" fill="none" x="170" y="230">
+        <g
+          id="g-svg-715"
+          fill="none"
+          transform="matrix(1,0,0,1,170,221.071793)"
+        >
+          <g>
             <path
               id="g-svg-717"
               fill="rgba(38,38,38,1)"
@@ -7477,21 +7272,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-716"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-716" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-719" fill="none" transform="matrix(1,0,0,1,220,230)">
-        <g id="g-svg-720" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-719" fill="none" x="220" y="230">
+        <g
+          id="g-svg-720"
+          fill="none"
+          transform="matrix(1,0,0,1,220,221.071793)"
+        >
+          <g>
             <path
               id="g-svg-722"
               fill="rgba(38,38,38,1)"
@@ -7499,21 +7293,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-721"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-721" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-731" fill="none" transform="matrix(1,0,0,1,270,230)">
-        <g id="g-svg-732" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-731" fill="none" x="270" y="230">
+        <g
+          id="g-svg-732"
+          fill="none"
+          transform="matrix(1,0,0,1,270,221.071793)"
+        >
+          <g>
             <path
               id="g-svg-734"
               fill="rgba(38,38,38,1)"
@@ -7521,21 +7314,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-733"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-733" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-742" fill="none" transform="matrix(1,0,0,1,320,230)">
-        <g id="g-svg-743" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-742" fill="none" x="320" y="230">
+        <g
+          id="g-svg-743"
+          fill="none"
+          transform="matrix(1,0,0,1,320,221.071793)"
+        >
+          <g>
             <path
               id="g-svg-745"
               fill="rgba(38,38,38,1)"
@@ -7543,21 +7335,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-744"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-744" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-748" fill="none" transform="matrix(1,0,0,1,370,230)">
-        <g id="g-svg-749" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-748" fill="none" x="370" y="230">
+        <g
+          id="g-svg-749"
+          fill="none"
+          transform="matrix(1,0,0,1,370,221.071793)"
+        >
+          <g>
             <path
               id="g-svg-751"
               fill="rgba(38,38,38,1)"
@@ -7565,21 +7356,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-750"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-750" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-759" fill="none" transform="matrix(1,0,0,1,420,230)">
-        <g id="g-svg-760" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-759" fill="none" x="420" y="230">
+        <g
+          id="g-svg-760"
+          fill="none"
+          transform="matrix(1,0,0,1,420,221.071793)"
+        >
+          <g>
             <path
               id="g-svg-762"
               fill="rgba(38,38,38,1)"
@@ -7587,21 +7377,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-761"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-761" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-767" fill="none" transform="matrix(1,0,0,1,470,260)">
-        <g id="g-svg-768" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-767" fill="none" x="0" y="-10">
+        <g id="g-svg-768" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-770"
               fill="rgba(38,38,38,1)"
@@ -7609,21 +7394,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-769"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-769" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-782" fill="none" transform="matrix(1,0,0,1,520,260)">
-        <g id="g-svg-783" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-782" fill="none" x="0" y="-10">
+        <g id="g-svg-783" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-785"
               fill="rgba(38,38,38,1)"
@@ -7631,21 +7411,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-784"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-784" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-800" fill="none" transform="matrix(1,0,0,1,570,260)">
-        <g id="g-svg-801" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-800" fill="none" x="0" y="-10">
+        <g id="g-svg-801" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-803"
               fill="rgba(38,38,38,1)"
@@ -7653,21 +7428,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-802"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-802" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-810" fill="none" transform="matrix(1,0,0,1,20,-20)">
-        <g id="g-svg-811" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-810" fill="none" x="20" y="-20">
+        <g id="g-svg-811" fill="none" transform="matrix(1,0,0,1,20,-28.928204)">
+          <g>
             <path
               id="g-svg-813"
               fill="rgba(38,38,38,1)"
@@ -7675,21 +7445,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-812"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-812" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-831" fill="none" transform="matrix(1,0,0,1,20,-20)">
-        <g id="g-svg-832" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-831" fill="none" x="20" y="-20">
+        <g id="g-svg-832" fill="none" transform="matrix(1,0,0,1,20,-28.928204)">
+          <g>
             <path
               id="g-svg-834"
               fill="rgba(38,38,38,1)"
@@ -7697,16 +7462,11 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-833"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-833" fill="none" class="indicator-label-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/TimebarTime.svg b/__tests__/integration/snapshots/TimebarTime.svg
index bbe4c11c3..ee3ac458f 100644
--- a/__tests__/integration/snapshots/TimebarTime.svg
+++ b/__tests__/integration/snapshots/TimebarTime.svg
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="510"
-  height="210"
+  width="400"
+  height="300"
   style="background: transparent;"
   color-interpolation-filters="sRGB"
 >
@@ -43,56 +43,20 @@
       />
     </filter>
   </defs>
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-346" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g
-          id="g-svg-347"
-          fill="none"
-          height="50"
-          width="500"
-          transform="matrix(1,0,0,1,10,20)"
-        >
-          <g id="g-svg-348" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-1"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid-group"
-            >
-              <g
-                id="g-svg-2"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-3"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                />
-                <g
-                  id="g-svg-4"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-346" fill="none">
+        <g id="g-svg-347" fill="none" x="10" y="20" height="50" width="500">
+          <g id="g-svg-348" fill="none">
+            <g id="g-svg-1" fill="none" class="axis-grid-group">
+              <g id="g-svg-2" fill="none" class="axis-grid">
+                <g id="g-svg-3" fill="none" class="grid-line-group" />
+                <g id="g-svg-4" fill="none" class="grid-region-group" />
               </g>
             </g>
-            <g
-              id="g-svg-5"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-6"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-5" fill="none" class="axis-main-group">
+              <g id="g-svg-6" fill="none" class="axis-line-group">
+                <g>
                   <line
                     id="g-svg-7"
                     fill="none"
@@ -106,261 +70,231 @@
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-8"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              />
-              <g
-                id="g-svg-9"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              />
+              <g id="g-svg-8" fill="none" class="axis-tick-group" />
+              <g id="g-svg-9" fill="none" class="axis-label-group" />
             </g>
-            <g
-              id="g-svg-10"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-title-group"
-            />
+            <g id="g-svg-10" fill="none" class="axis-title-group" />
           </g>
-          <g
-            id="g-svg-350"
-            fill="none"
-            width="500"
-            height="40"
-            transform="matrix(1,0,0,1,0,10)"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-350" fill="none" x="10" y="30" width="500" height="40">
+            <g>
               <path
                 id="g-svg-351"
                 fill="rgba(251,253,255,1)"
-                d="M 0,0 l 500,0 l 0,40 l-500 0 z"
+                d="M 10,30 l 500,0 l 0,40 l-500 0 z"
+                x="10"
+                y="30"
                 width="500"
                 height="40"
                 stroke="rgba(235,237,240,1)"
               />
             </g>
-            <g id="g-svg-352" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g id="g-svg-160" fill="none" transform="matrix(1,0,0,1,180,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+            <g id="g-svg-352" fill="none">
+              <g id="g-svg-160" fill="none" x="190" y="50">
+                <g>
                   <path
                     id="g-svg-161"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 184,40 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="180"
+                    y="40"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-162" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-4.698970,-4.698970)">
+                <g id="g-svg-162" fill="none">
+                  <g>
                     <path
                       id="g-svg-163"
                       fill="none"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3010299956639813"
-                      d="M 1.3762964496778385,8.021643558994198 A 4.698970004336019 4.698970004336019 0 1 1 8.0216435589942 8.021643558994198"
+                      d="M 186.67732644534183,53.32267355465818 A 4.698970004336019 4.698970004336019 0 1 1 193.32267355465817 53.32267355465818"
                     />
-                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.376296,8.021644)">
+                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,186.677322,53.322674)">
                       <path
                         id="g-svg-165"
                         fill="rgba(86,87,88,1)"
-                        d="M 3.6020599913279625,3.6020599913279625 L 0,1.8010299956639813 L 3.6020599913279625,0 Z"
-                        transform="translate(-1.8010299956639813,-1.8010299956639813)"
+                        d="M 1.8010299956639813,1.8010299956639813 L -1.8010299956639813,0 L 1.8010299956639813,-1.8010299956639813 Z"
                       />
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-194" fill="none" transform="matrix(1,0,0,1,220,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-194" fill="none" x="230" y="50">
+                <g>
                   <path id="g-svg-195" fill="none" />
                 </g>
-                <g id="g-svg-196" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-196" fill="none">
+                  <g>
                     <line
                       id="g-svg-197"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="230"
+                      y1="44"
+                      x2="230"
+                      y2="56"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-202" fill="none" transform="matrix(1,0,0,1,240,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-202" fill="none" x="250" y="50">
+                <g>
                   <path
                     id="g-svg-203"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 244,40 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="240"
+                    y="40"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-204" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-204" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-205"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 0,3.464101615137755 6,6.92820323027551 6,3.464101615137755 12,0 12,6.92820323027551 6,3.464101615137755"
+                      points="250,50 250,46.53589838486224 244,50 250,53.46410161513776 250,50 256,46.53589838486224 256,53.46410161513776 250,50"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-210" fill="none" transform="matrix(1,0,0,1,260,20)">
-                <g id="g-svg-211" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-212"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-210" fill="none" x="270" y="50">
+                <g id="g-svg-211" fill="none">
+                  <g id="g-svg-212" fill="none" x="270" y="50" class="icon">
+                    <g>
                       <path
                         id="g-svg-213"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 264,40 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="260"
+                        y="40"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-214"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-2.771281,-4.800000)">
+                    <g id="g-svg-214" fill="none">
+                      <g>
                         <polygon
                           id="g-svg-215"
                           fill="rgba(86,87,88,1)"
-                          points="8.313843876330612,4.800000000000001 0,0 0,9.600000000000001 8.313843876330612,4.800000000000001"
+                          points="275.54256258422043,50 267.2287187078898,45.2 267.2287187078898,54.8 275.54256258422043,50"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-220" fill="none" transform="matrix(1,0,0,1,280,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-220" fill="none" x="290" y="50">
+                <g>
                   <path
                     id="g-svg-221"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 284,40 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="280"
+                    y="40"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-222" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-222" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-223"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 12,3.464101615137755 6,6.92820323027551 6,3.464101615137755 0,0 0,6.92820323027551 6,3.464101615137755"
+                      points="290,50 290,46.53589838486224 296,50 290,53.46410161513776 290,50 284,46.53589838486224 284,53.46410161513776 290,50"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-228" fill="none" transform="matrix(1,0,0,1,300,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-228" fill="none" x="310" y="50">
+                <g>
                   <path id="g-svg-229" fill="none" />
                 </g>
-                <g id="g-svg-230" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-230" fill="none">
+                  <g>
                     <line
                       id="g-svg-231"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="310"
+                      y1="44"
+                      x2="310"
+                      y2="56"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-236" fill="none" transform="matrix(1,0,0,1,320,20)">
-                <g id="g-svg-237" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-238"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-236" fill="none" x="330" y="50">
+                <g id="g-svg-237" fill="none">
+                  <g id="g-svg-238" fill="none" x="330" y="50" class="icon">
+                    <g>
                       <path
                         id="g-svg-239"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 324,40 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="320"
+                        y="40"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-240"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,-6)">
+                    <g id="g-svg-240" fill="none">
+                      <g>
                         <line
                           id="g-svg-241"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="330"
+                          y1="44"
+                          x2="330"
+                          y2="56"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,-8.602060,0)">
+                      <g>
                         <line
                           id="g-svg-242"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="6"
-                          y2="0"
+                          x1="321.39794000867204"
+                          y1="50"
+                          x2="327.39794000867204"
+                          y2="50"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(-1,0,-0,-1,6,0)">
+                        <g transform="matrix(-1,0,-0,-1,327.397949,50)">
                           <path
                             id="g-svg-253"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
-                      <g transform="matrix(1,0,0,1,2.602060,0)">
+                      <g>
                         <line
                           id="g-svg-245"
                           fill="none"
-                          x1="6"
-                          y1="0"
-                          x2="0"
-                          y2="0"
+                          x1="338.60205999132796"
+                          y1="50"
+                          x2="332.60205999132796"
+                          y2="50"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(1,0,0,1,0,0)">
+                        <g transform="matrix(1,0,0,1,332.602051,50)">
                           <path
                             id="g-svg-255"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
@@ -370,71 +304,65 @@
               </g>
             </g>
           </g>
-          <g id="g-svg-349" fill="none" transform="matrix(1,0,0,1,0,10)">
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g
+            id="g-svg-349"
+            fill="none"
+            x="0"
+            y="0"
+            transform="matrix(1,0,0,1,10,30)"
+          >
+            <g>
               <path
                 id="g-svg-11"
                 fill="rgba(237,238,239,1)"
                 class="slider-track"
                 d="M 2.5,0 l 495,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l -495,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+                x="0"
+                y="0"
                 width="500"
                 height="5"
                 opacity="0.5"
               />
             </g>
-            <g
-              id="g-svg-12"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-sparkline-group"
-            >
+            <g id="g-svg-12" fill="none" class="slider-sparkline-group">
               <g
                 id="g-svg-13"
                 fill="none"
+                x="0"
+                y="0"
                 width="500"
                 height="5"
-                transform="matrix(1,0,0,1,0,0)"
                 class="slider-sparkline"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path id="g-svg-14" fill="none" class="container" />
                 </g>
                 <g
                   id="g-svg-15"
                   fill="none"
                   class="spark sparkline"
-                  transform="matrix(1,0,0,1,0,0)"
+                  x="0"
+                  y="0"
                 >
-                  <g
-                    id="g-svg-16"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                  />
-                  <g
-                    id="g-svg-17"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                  />
+                  <g id="g-svg-16" fill="none" />
+                  <g id="g-svg-17" fill="none" />
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-18"
                 fill="rgba(0,0,0,0)"
                 class="slider-brush-area"
                 d="M 0,0 l 500,0 l 0,5 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="5"
               />
             </g>
-            <g
-              id="g-svg-19"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-foreground"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-19" fill="none" class="slider-foreground">
+              <g>
                 <path
                   id="g-svg-20"
                   fill="rgba(46,127,248,1)"
@@ -445,47 +373,43 @@
                   width="50"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,50,0)">
+              <g>
                 <path
                   id="g-svg-21"
                   fill="rgba(46,127,248,1)"
                   class="slider-selection"
                   visibility="visible"
-                  d="M 0,0 l 200,0 l 0,5 l-200 0 z"
+                  d="M 50,0 l 200,0 l 0,5 l-200 0 z"
                   height="5"
                   width="200"
+                  x="50"
                 />
               </g>
-              <g transform="matrix(1,0,0,1,250,0)">
+              <g>
                 <path
                   id="g-svg-22"
                   fill="rgba(46,127,248,1)"
                   class="slider-selection"
                   visibility="hidden"
-                  d="M 0,0 l 250,0 l 0,5 l-250 0 z"
+                  d="M 250,0 l 250,0 l 0,5 l-250 0 z"
                   height="5"
+                  x="250"
                   width="250"
                 />
               </g>
               <g
                 id="g-svg-25"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,50,2.500000)"
                 class="slider-handle start-handle"
               >
-                <g
-                  id="g-svg-26"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-26" fill="none" class="handle-icon-group">
+                  <g>
                     <circle
                       id="g-svg-258"
                       fill="rgba(63,124,247,1)"
-                      transform="translate(-5,-5)"
-                      cx="5"
-                      cy="5"
                       r="5"
                       stroke-width="0"
                       stroke="rgba(63,124,247,1)"
@@ -494,32 +418,21 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-31"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-31" fill="none" class="handle-label-group" />
               </g>
               <g
                 id="g-svg-35"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,250,2.500000)"
                 class="slider-handle end-handle"
               >
-                <g
-                  id="g-svg-36"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-36" fill="none" class="handle-icon-group">
+                  <g>
                     <circle
                       id="g-svg-261"
                       fill="rgba(63,124,247,1)"
-                      transform="translate(-5,-5)"
-                      cx="5"
-                      cy="5"
                       r="5"
                       stroke-width="0"
                       stroke="rgba(63,124,247,1)"
@@ -528,63 +441,22 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-41"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-41" fill="none" class="handle-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g
-          id="g-svg-353"
-          fill="none"
-          height="50"
-          width="500"
-          transform="matrix(1,0,0,1,10,90)"
-        >
-          <g id="g-svg-354" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-262"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid-group"
-            >
-              <g
-                id="g-svg-263"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-264"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                />
-                <g
-                  id="g-svg-265"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
+        <g id="g-svg-353" fill="none" x="10" y="90" height="50" width="500">
+          <g id="g-svg-354" fill="none">
+            <g id="g-svg-262" fill="none" class="axis-grid-group">
+              <g id="g-svg-263" fill="none" class="axis-grid">
+                <g id="g-svg-264" fill="none" class="grid-line-group" />
+                <g id="g-svg-265" fill="none" class="grid-region-group" />
               </g>
             </g>
-            <g
-              id="g-svg-266"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-267"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-266" fill="none" class="axis-main-group">
+              <g id="g-svg-267" fill="none" class="axis-line-group">
+                <g>
                   <line
                     id="g-svg-268"
                     fill="none"
@@ -598,273 +470,243 @@
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-269"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              />
-              <g
-                id="g-svg-270"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              />
+              <g id="g-svg-269" fill="none" class="axis-tick-group" />
+              <g id="g-svg-270" fill="none" class="axis-label-group" />
             </g>
-            <g
-              id="g-svg-271"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-title-group"
-            />
+            <g id="g-svg-271" fill="none" class="axis-title-group" />
           </g>
-          <g
-            id="g-svg-356"
-            fill="none"
-            width="500"
-            height="40"
-            transform="matrix(1,0,0,1,0,10)"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-356" fill="none" x="10" y="100" width="500" height="40">
+            <g>
               <path
                 id="g-svg-357"
                 fill="rgba(251,253,255,1)"
-                d="M 0,0 l 500,0 l 0,40 l-500 0 z"
+                d="M 10,100 l 500,0 l 0,40 l-500 0 z"
+                x="10"
+                y="100"
                 width="500"
                 height="40"
                 stroke="rgba(235,237,240,1)"
               />
             </g>
-            <g id="g-svg-358" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g id="g-svg-421" fill="none" transform="matrix(1,0,0,1,180,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+            <g id="g-svg-358" fill="none">
+              <g id="g-svg-421" fill="none" x="190" y="120">
+                <g>
                   <path
                     id="g-svg-422"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 184,110 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="180"
+                    y="110"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-423" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-4.698970,-4.698970)">
+                <g id="g-svg-423" fill="none">
+                  <g>
                     <path
                       id="g-svg-424"
                       fill="none"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3010299956639813"
-                      d="M 1.3762964496778385,8.021643558994198 A 4.698970004336019 4.698970004336019 0 1 1 8.0216435589942 8.021643558994198"
+                      d="M 186.67732644534183,123.32267355465818 A 4.698970004336019 4.698970004336019 0 1 1 193.32267355465817 123.32267355465818"
                     />
-                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.376296,8.021644)">
+                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,186.677322,123.322670)">
                       <path
                         id="g-svg-426"
                         fill="rgba(86,87,88,1)"
-                        d="M 3.6020599913279625,3.6020599913279625 L 0,1.8010299956639813 L 3.6020599913279625,0 Z"
-                        transform="translate(-1.8010299956639813,-1.8010299956639813)"
+                        d="M 1.8010299956639813,1.8010299956639813 L -1.8010299956639813,0 L 1.8010299956639813,-1.8010299956639813 Z"
                       />
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-455" fill="none" transform="matrix(1,0,0,1,220,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-455" fill="none" x="230" y="120">
+                <g>
                   <path id="g-svg-456" fill="none" />
                 </g>
-                <g id="g-svg-457" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-457" fill="none">
+                  <g>
                     <line
                       id="g-svg-458"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="230"
+                      y1="114"
+                      x2="230"
+                      y2="126"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-463" fill="none" transform="matrix(1,0,0,1,240,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-463" fill="none" x="250" y="120">
+                <g>
                   <path
                     id="g-svg-464"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 244,110 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="240"
+                    y="110"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-465" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-465" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-466"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 0,3.464101615137755 6,6.92820323027551 6,3.464101615137755 12,0 12,6.92820323027551 6,3.464101615137755"
+                      points="250,120 250,116.53589838486225 244,120 250,123.46410161513775 250,120 256,116.53589838486225 256,123.46410161513775 250,120"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-471" fill="none" transform="matrix(1,0,0,1,260,20)">
-                <g id="g-svg-472" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-473"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-471" fill="none" x="270" y="120">
+                <g id="g-svg-472" fill="none">
+                  <g id="g-svg-473" fill="none" x="270" y="120" class="icon">
+                    <g>
                       <path
                         id="g-svg-474"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 264,110 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="260"
+                        y="110"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-475"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-2.771281,-4.800000)">
+                    <g id="g-svg-475" fill="none">
+                      <g>
                         <polygon
                           id="g-svg-476"
                           fill="rgba(86,87,88,1)"
-                          points="8.313843876330612,4.800000000000001 0,0 0,9.600000000000001 8.313843876330612,4.800000000000001"
+                          points="275.54256258422043,120 267.2287187078898,115.2 267.2287187078898,124.8 275.54256258422043,120"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-481" fill="none" transform="matrix(1,0,0,1,280,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-481" fill="none" x="290" y="120">
+                <g>
                   <path
                     id="g-svg-482"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 284,110 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="280"
+                    y="110"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-483" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-483" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-484"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 12,3.464101615137755 6,6.92820323027551 6,3.464101615137755 0,0 0,6.92820323027551 6,3.464101615137755"
+                      points="290,120 290,116.53589838486225 296,120 290,123.46410161513775 290,120 284,116.53589838486225 284,123.46410161513775 290,120"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-489" fill="none" transform="matrix(1,0,0,1,300,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-489" fill="none" x="310" y="120">
+                <g>
                   <path id="g-svg-490" fill="none" />
                 </g>
-                <g id="g-svg-491" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-491" fill="none">
+                  <g>
                     <line
                       id="g-svg-492"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="310"
+                      y1="114"
+                      x2="310"
+                      y2="126"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-497" fill="none" transform="matrix(1,0,0,1,320,20)">
-                <g id="g-svg-498" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-499"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-497" fill="none" x="330" y="120">
+                <g id="g-svg-498" fill="none">
+                  <g id="g-svg-499" fill="none" x="330" y="120" class="icon">
+                    <g>
                       <path
                         id="g-svg-500"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 324,110 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="320"
+                        y="110"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-501"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g id="g-svg-501" fill="none">
+                      <g>
                         <line
                           id="g-svg-502"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="324"
+                          y1="114"
+                          x2="324"
+                          y2="126"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6,-6)">
+                      <g>
                         <line
                           id="g-svg-503"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="336"
+                          y1="114"
+                          x2="336"
+                          y2="126"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,-3.397940,0)">
+                      <g>
                         <line
                           id="g-svg-504"
                           fill="none"
-                          x1="3.3979400086720375"
-                          y1="0"
-                          x2="0"
-                          y2="0"
+                          x1="330"
+                          y1="120"
+                          x2="326.60205999132796"
+                          y2="120"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(1,0,0,1,0,0)">
+                        <g transform="matrix(1,0,0,1,326.602051,120)">
                           <path
                             id="g-svg-515"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-507"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="3.3979400086720375"
-                          y2="0"
+                          x1="330"
+                          y1="120"
+                          x2="333.39794000867204"
+                          y2="120"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(-1,0,-0,-1,3.397940,0)">
+                        <g transform="matrix(-1,0,-0,-1,333.397949,120)">
                           <path
                             id="g-svg-517"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
@@ -874,89 +716,77 @@
               </g>
             </g>
           </g>
-          <g id="g-svg-355" fill="none" transform="matrix(1,0,0,1,0,10)">
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g
+            id="g-svg-355"
+            fill="none"
+            x="0"
+            y="0"
+            transform="matrix(1,0,0,1,10,100)"
+          >
+            <g>
               <path
                 id="g-svg-272"
                 fill="rgba(237,238,239,1)"
                 class="slider-track"
                 d="M 2.5,0 l 495,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l -495,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+                x="0"
+                y="0"
                 width="500"
                 height="5"
                 opacity="0.5"
               />
             </g>
-            <g
-              id="g-svg-273"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-sparkline-group"
-            >
+            <g id="g-svg-273" fill="none" class="slider-sparkline-group">
               <g
                 id="g-svg-274"
                 fill="none"
+                x="0"
+                y="0"
                 width="500"
                 height="5"
-                transform="matrix(1,0,0,1,0,0)"
                 class="slider-sparkline"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path id="g-svg-275" fill="none" class="container" />
                 </g>
                 <g
                   id="g-svg-276"
                   fill="none"
                   class="spark sparkline"
-                  transform="matrix(1,0,0,1,0,0)"
+                  x="0"
+                  y="0"
                 >
-                  <g
-                    id="g-svg-277"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                  />
-                  <g
-                    id="g-svg-278"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                  />
+                  <g id="g-svg-277" fill="none" />
+                  <g id="g-svg-278" fill="none" />
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-279"
                 fill="rgba(0,0,0,0)"
                 class="slider-brush-area"
                 d="M 0,0 l 500,0 l 0,5 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="5"
               />
             </g>
-            <g
-              id="g-svg-280"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-foreground"
-            >
+            <g id="g-svg-280" fill="none" class="slider-foreground">
               <g
                 id="g-svg-296"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,250,2.500000)"
                 class="slider-handle end-handle"
               >
-                <g
-                  id="g-svg-297"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-297" fill="none" class="handle-icon-group">
+                  <g>
                     <circle
                       id="g-svg-520"
                       fill="rgba(63,124,247,1)"
-                      transform="translate(-5,-5)"
-                      cx="5"
-                      cy="5"
                       r="5"
                       stroke-width="0"
                       stroke="rgba(63,124,247,1)"
@@ -965,63 +795,22 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-302"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-302" fill="none" class="handle-label-group" />
               </g>
             </g>
           </g>
         </g>
-        <g
-          id="g-svg-359"
-          fill="none"
-          height="50"
-          width="500"
-          transform="matrix(1,0,0,1,10,160)"
-        >
-          <g id="g-svg-360" fill="none" transform="matrix(1,0,0,1,0,0)">
-            <g
-              id="g-svg-521"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-grid-group"
-            >
-              <g
-                id="g-svg-522"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-grid"
-              >
-                <g
-                  id="g-svg-523"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-line-group"
-                />
-                <g
-                  id="g-svg-524"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="grid-region-group"
-                />
+        <g id="g-svg-359" fill="none" x="10" y="160" height="50" width="500">
+          <g id="g-svg-360" fill="none">
+            <g id="g-svg-521" fill="none" class="axis-grid-group">
+              <g id="g-svg-522" fill="none" class="axis-grid">
+                <g id="g-svg-523" fill="none" class="grid-line-group" />
+                <g id="g-svg-524" fill="none" class="grid-region-group" />
               </g>
             </g>
-            <g
-              id="g-svg-525"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-main-group"
-            >
-              <g
-                id="g-svg-526"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-line-group"
-              >
-                <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-525" fill="none" class="axis-main-group">
+              <g id="g-svg-526" fill="none" class="axis-line-group">
+                <g>
                   <line
                     id="g-svg-527"
                     fill="none"
@@ -1035,273 +824,243 @@
                   />
                 </g>
               </g>
-              <g
-                id="g-svg-528"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-tick-group"
-              />
-              <g
-                id="g-svg-529"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="axis-label-group"
-              />
+              <g id="g-svg-528" fill="none" class="axis-tick-group" />
+              <g id="g-svg-529" fill="none" class="axis-label-group" />
             </g>
-            <g
-              id="g-svg-530"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="axis-title-group"
-            />
+            <g id="g-svg-530" fill="none" class="axis-title-group" />
           </g>
-          <g
-            id="g-svg-362"
-            fill="none"
-            width="500"
-            height="40"
-            transform="matrix(1,0,0,1,0,10)"
-          >
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g id="g-svg-362" fill="none" x="10" y="170" width="500" height="40">
+            <g>
               <path
                 id="g-svg-363"
                 fill="rgba(251,253,255,1)"
-                d="M 0,0 l 500,0 l 0,40 l-500 0 z"
+                d="M 10,170 l 500,0 l 0,40 l-500 0 z"
+                x="10"
+                y="170"
                 width="500"
                 height="40"
                 stroke="rgba(235,237,240,1)"
               />
             </g>
-            <g id="g-svg-364" fill="none" transform="matrix(1,0,0,1,0,0)">
-              <g id="g-svg-680" fill="none" transform="matrix(1,0,0,1,180,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+            <g id="g-svg-364" fill="none">
+              <g id="g-svg-680" fill="none" x="190" y="190">
+                <g>
                   <path
                     id="g-svg-681"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 184,180 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="180"
+                    y="180"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-682" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-4.698970,-4.698970)">
+                <g id="g-svg-682" fill="none">
+                  <g>
                     <path
                       id="g-svg-683"
                       fill="none"
                       stroke="rgba(86,87,88,1)"
                       stroke-width="1.3010299956639813"
-                      d="M 1.3762964496778385,8.021643558994198 A 4.698970004336019 4.698970004336019 0 1 1 8.0216435589942 8.021643558994198"
+                      d="M 186.67732644534183,193.32267355465817 A 4.698970004336019 4.698970004336019 0 1 1 193.32267355465817 193.32267355465817"
                     />
-                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,1.376296,8.021644)">
+                    <g transform="matrix(-0.698727,-0.715388,0.715388,-0.698727,186.677322,193.322678)">
                       <path
                         id="g-svg-685"
                         fill="rgba(86,87,88,1)"
-                        d="M 3.6020599913279625,3.6020599913279625 L 0,1.8010299956639813 L 3.6020599913279625,0 Z"
-                        transform="translate(-1.8010299956639813,-1.8010299956639813)"
+                        d="M 1.8010299956639813,1.8010299956639813 L -1.8010299956639813,0 L 1.8010299956639813,-1.8010299956639813 Z"
                       />
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-714" fill="none" transform="matrix(1,0,0,1,220,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-714" fill="none" x="230" y="190">
+                <g>
                   <path id="g-svg-715" fill="none" />
                 </g>
-                <g id="g-svg-716" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-716" fill="none">
+                  <g>
                     <line
                       id="g-svg-717"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="230"
+                      y1="184"
+                      x2="230"
+                      y2="196"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-722" fill="none" transform="matrix(1,0,0,1,240,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-722" fill="none" x="250" y="190">
+                <g>
                   <path
                     id="g-svg-723"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 244,180 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="240"
+                    y="180"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-724" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-724" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-725"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 0,3.464101615137755 6,6.92820323027551 6,3.464101615137755 12,0 12,6.92820323027551 6,3.464101615137755"
+                      points="250,190 250,186.53589838486224 244,190 250,193.46410161513776 250,190 256,186.53589838486224 256,193.46410161513776 250,190"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-730" fill="none" transform="matrix(1,0,0,1,260,20)">
-                <g id="g-svg-731" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-732"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-730" fill="none" x="270" y="190">
+                <g id="g-svg-731" fill="none">
+                  <g id="g-svg-732" fill="none" x="270" y="190" class="icon">
+                    <g>
                       <path
                         id="g-svg-733"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 264,180 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="260"
+                        y="180"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-734"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-4,-6)">
+                    <g id="g-svg-734" fill="none">
+                      <g>
                         <polygon
                           id="g-svg-735"
                           fill="rgba(86,87,88,1)"
-                          points="0,0 0,12 2,12 2,0 0,0 6,0 6,12 8,12 8,0"
+                          points="266,184 266,196 268,196 268,184 266,184 272,184 272,196 274,196 274,184"
                         />
                       </g>
                     </g>
                   </g>
                 </g>
               </g>
-              <g id="g-svg-740" fill="none" transform="matrix(1,0,0,1,280,20)">
-                <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-740" fill="none" x="290" y="190">
+                <g>
                   <path
                     id="g-svg-741"
                     fill="rgba(226,226,226,1)"
-                    d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    d="M 284,180 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                    x="280"
+                    y="180"
                     width="20"
                     height="20"
                     opacity="0"
                   />
                 </g>
-                <g id="g-svg-742" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,-6,-3.464102)">
+                <g id="g-svg-742" fill="none">
+                  <g>
                     <polygon
                       id="g-svg-743"
                       fill="rgba(86,87,88,1)"
-                      points="6,3.464101615137755 6,0 12,3.464101615137755 6,6.92820323027551 6,3.464101615137755 0,0 0,6.92820323027551 6,3.464101615137755"
+                      points="290,190 290,186.53589838486224 296,190 290,193.46410161513776 290,190 284,186.53589838486224 284,193.46410161513776 290,190"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-748" fill="none" transform="matrix(1,0,0,1,300,20)">
-                <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-748" fill="none" x="310" y="190">
+                <g>
                   <path id="g-svg-749" fill="none" />
                 </g>
-                <g id="g-svg-750" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g transform="matrix(1,0,0,1,0,-6)">
+                <g id="g-svg-750" fill="none">
+                  <g>
                     <line
                       id="g-svg-751"
                       fill="none"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="12"
+                      x1="310"
+                      y1="184"
+                      x2="310"
+                      y2="196"
                       stroke="rgba(216,217,217,1)"
                       stroke-width="1.3010299956639813"
                     />
                   </g>
                 </g>
               </g>
-              <g id="g-svg-756" fill="none" transform="matrix(1,0,0,1,320,20)">
-                <g id="g-svg-757" fill="none" transform="matrix(1,0,0,1,0,0)">
-                  <g
-                    id="g-svg-758"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                    class="icon"
-                  >
-                    <g transform="matrix(1,0,0,1,-10,-10)">
+              <g id="g-svg-756" fill="none" x="330" y="190">
+                <g id="g-svg-757" fill="none">
+                  <g id="g-svg-758" fill="none" x="330" y="190" class="icon">
+                    <g>
                       <path
                         id="g-svg-759"
                         fill="rgba(226,226,226,1)"
-                        d="M 4,0 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        d="M 324,180 l 12,0 a 4,4,0,0,1,4,4 l 0,12 a 4,4,0,0,1,-4,4 l -12,0 a 4,4,0,0,1,-4,-4 l 0,-12 a 4,4,0,0,1,4,-4 z"
+                        x="320"
+                        y="180"
                         width="20"
                         height="20"
                         opacity="0"
                       />
                     </g>
-                    <g
-                      id="g-svg-760"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,-6,-6)">
+                    <g id="g-svg-760" fill="none">
+                      <g>
                         <line
                           id="g-svg-761"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="324"
+                          y1="184"
+                          x2="324"
+                          y2="196"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,6,-6)">
+                      <g>
                         <line
                           id="g-svg-762"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="12"
+                          x1="336"
+                          y1="184"
+                          x2="336"
+                          y2="196"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
                       </g>
-                      <g transform="matrix(1,0,0,1,-3.397940,0)">
+                      <g>
                         <line
                           id="g-svg-763"
                           fill="none"
-                          x1="3.3979400086720375"
-                          y1="0"
-                          x2="0"
-                          y2="0"
+                          x1="330"
+                          y1="190"
+                          x2="326.60205999132796"
+                          y2="190"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(1,0,0,1,0,0)">
+                        <g transform="matrix(1,0,0,1,326.602051,190)">
                           <path
                             id="g-svg-774"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
-                      <g transform="matrix(1,0,0,1,0,0)">
+                      <g>
                         <line
                           id="g-svg-766"
                           fill="none"
-                          x1="0"
-                          y1="0"
-                          x2="3.3979400086720375"
-                          y2="0"
+                          x1="330"
+                          y1="190"
+                          x2="333.39794000867204"
+                          y2="190"
                           stroke="rgba(86,87,88,1)"
                           stroke-width="1.3010299956639813"
                         />
-                        <g transform="matrix(-1,0,-0,-1,3.397940,0)">
+                        <g transform="matrix(-1,0,-0,-1,333.397949,190)">
                           <path
                             id="g-svg-776"
                             fill="rgba(86,87,88,1)"
-                            d="M 5.204119982655925,5.204119982655925 L 0,2.6020599913279625 L 5.204119982655925,0 Z"
-                            transform="translate(-2.6020599913279625,-2.6020599913279625)"
+                            d="M 2.6020599913279625,2.6020599913279625 L -2.6020599913279625,0 L 2.6020599913279625,-2.6020599913279625 Z"
                           />
                         </g>
                       </g>
@@ -1311,89 +1070,77 @@
               </g>
             </g>
           </g>
-          <g id="g-svg-361" fill="none" transform="matrix(1,0,0,1,0,10)">
-            <g transform="matrix(1,0,0,1,0,0)">
+          <g
+            id="g-svg-361"
+            fill="none"
+            x="0"
+            y="0"
+            transform="matrix(1,0,0,1,10,170)"
+          >
+            <g>
               <path
                 id="g-svg-531"
                 fill="rgba(237,238,239,1)"
                 class="slider-track"
                 d="M 2.5,0 l 495,0 a 2.5,2.5,0,0,1,2.5,2.5 l 0,0 a 2.5,2.5,0,0,1,-2.5,2.5 l -495,0 a 2.5,2.5,0,0,1,-2.5,-2.5 l 0,0 a 2.5,2.5,0,0,1,2.5,-2.5 z"
+                x="0"
+                y="0"
                 width="500"
                 height="5"
                 opacity="0.5"
               />
             </g>
-            <g
-              id="g-svg-532"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-sparkline-group"
-            >
+            <g id="g-svg-532" fill="none" class="slider-sparkline-group">
               <g
                 id="g-svg-533"
                 fill="none"
+                x="0"
+                y="0"
                 width="500"
                 height="5"
-                transform="matrix(1,0,0,1,0,0)"
                 class="slider-sparkline"
               >
-                <g transform="matrix(1,0,0,1,0,0)">
+                <g>
                   <path id="g-svg-534" fill="none" class="container" />
                 </g>
                 <g
                   id="g-svg-535"
                   fill="none"
                   class="spark sparkline"
-                  transform="matrix(1,0,0,1,0,0)"
+                  x="0"
+                  y="0"
                 >
-                  <g
-                    id="g-svg-536"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                  />
-                  <g
-                    id="g-svg-537"
-                    fill="none"
-                    transform="matrix(1,0,0,1,0,0)"
-                  />
+                  <g id="g-svg-536" fill="none" />
+                  <g id="g-svg-537" fill="none" />
                 </g>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-538"
                 fill="rgba(0,0,0,0)"
                 class="slider-brush-area"
                 d="M 0,0 l 500,0 l 0,5 l-500 0 z"
+                x="0"
+                y="0"
                 width="500"
                 height="5"
               />
             </g>
-            <g
-              id="g-svg-539"
-              fill="none"
-              transform="matrix(1,0,0,1,0,0)"
-              class="slider-foreground"
-            >
+            <g id="g-svg-539" fill="none" class="slider-foreground">
               <g
                 id="g-svg-555"
                 fill="none"
+                x="0"
+                y="0"
                 transform="matrix(1,0,0,1,300,2.500000)"
                 class="slider-handle end-handle"
               >
-                <g
-                  id="g-svg-556"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-icon-group"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                <g id="g-svg-556" fill="none" class="handle-icon-group">
+                  <g>
                     <circle
                       id="g-svg-779"
                       fill="rgba(63,124,247,1)"
-                      transform="translate(-5,-5)"
-                      cx="5"
-                      cy="5"
                       r="5"
                       stroke-width="0"
                       stroke="rgba(63,124,247,1)"
@@ -1402,20 +1149,15 @@
                     />
                   </g>
                 </g>
-                <g
-                  id="g-svg-561"
-                  fill="none"
-                  transform="matrix(1,0,0,1,0,0)"
-                  class="handle-label-group"
-                />
+                <g id="g-svg-561" fill="none" class="handle-label-group" />
               </g>
             </g>
           </g>
         </g>
       </g>
-      <g id="g-svg-166" fill="none" transform="matrix(1,0,0,1,190,30)">
-        <g id="g-svg-167" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-166" fill="none" x="190" y="30">
+        <g id="g-svg-167" fill="none" transform="matrix(1,0,0,1,190,21.071796)">
+          <g>
             <path
               id="g-svg-169"
               fill="rgba(38,38,38,1)"
@@ -1423,43 +1165,40 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-168"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-168" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-170" fill="none" transform="matrix(1,0,0,1,210,50)">
-        <g transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-170" fill="none" x="210" y="50">
+        <g>
           <path id="g-svg-171" fill="none" />
         </g>
-        <g id="g-svg-172" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-172" fill="none">
           <g
             id="g-svg-173"
             fill="none"
+            x="200"
+            y="40"
             width="20"
             height="20"
-            transform="matrix(1,0,0,1,-10,-10)"
             class="speed"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-174"
                 fill="rgba(255,255,255,1)"
-                d="M 2,0 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                d="M 202,40 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                 class="select"
                 width="20"
                 height="20"
+                x="200"
+                y="40"
                 stroke="rgba(217,217,217,1)"
-                stroke-width="0"
               />
-              <g transform="matrix(1,0,0,1,0,0.500000)">
+              <g>
                 <text
                   id="g-svg-176"
                   fill="rgba(0,0,0,1)"
@@ -1474,13 +1213,15 @@
                   stroke-width="1"
                   text-anchor="left"
                   class="value"
+                  x="200"
+                  y="40.5"
                   dy="9.5px"
                 >
                   1x
                 </text>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,24)">
+            <g transform="matrix(1,0,0,1,200,64)">
               <path
                 id="g-svg-175"
                 fill="rgba(255,255,255,1)"
@@ -1492,20 +1233,9 @@
                 filter="url(#g-filter-dropshadow-175)"
                 visibility="hidden"
               />
-              <g
-                id="g-svg-177"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="dropdown-container"
-              >
-                <g
-                  id="g-svg-178"
-                  fill="none"
-                  class="dropdown-item"
-                  width="20"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-177" fill="none" class="dropdown-container">
+                <g id="g-svg-178" fill="none" class="dropdown-item" width="20">
+                  <g>
                     <path
                       id="g-svg-179"
                       fill="rgba(230,247,255,1)"
@@ -1514,12 +1244,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-180"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-180" fill="none">
+                      <g>
                         <text
                           id="g-svg-181"
                           fill="rgba(0,0,0,1)"
@@ -1550,7 +1276,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,19)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-183"
                       fill="rgba(255,255,255,1)"
@@ -1559,12 +1285,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-184"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-184" fill="none">
+                      <g>
                         <text
                           id="g-svg-185"
                           fill="rgba(0,0,0,1)"
@@ -1595,7 +1317,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,38)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-187"
                       fill="rgba(255,255,255,1)"
@@ -1604,12 +1326,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-188"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-188" fill="none">
+                      <g>
                         <text
                           id="g-svg-189"
                           fill="rgba(0,0,0,1)"
@@ -1638,9 +1356,9 @@
           </g>
         </g>
       </g>
-      <g id="g-svg-190" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-191" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-190" fill="none" x="10" y="-10">
+        <g id="g-svg-191" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-193"
               fill="rgba(38,38,38,1)"
@@ -1648,21 +1366,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-192"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-192" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-198" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-199" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-198" fill="none" x="10" y="-10">
+        <g id="g-svg-199" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-201"
               fill="rgba(38,38,38,1)"
@@ -1670,21 +1383,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-200"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-200" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-206" fill="none" transform="matrix(1,0,0,1,250,30)">
-        <g id="g-svg-207" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-206" fill="none" x="250" y="30">
+        <g id="g-svg-207" fill="none" transform="matrix(1,0,0,1,250,21.071796)">
+          <g>
             <path
               id="g-svg-209"
               fill="rgba(38,38,38,1)"
@@ -1692,21 +1400,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-208"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-208" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-216" fill="none" transform="matrix(1,0,0,1,270,40)">
-        <g id="g-svg-217" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-216" fill="none" x="0" y="-10">
+        <g id="g-svg-217" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-219"
               fill="rgba(38,38,38,1)"
@@ -1714,21 +1417,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-218"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-218" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-224" fill="none" transform="matrix(1,0,0,1,290,30)">
-        <g id="g-svg-225" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-224" fill="none" x="290" y="30">
+        <g id="g-svg-225" fill="none" transform="matrix(1,0,0,1,290,21.071796)">
+          <g>
             <path
               id="g-svg-227"
               fill="rgba(38,38,38,1)"
@@ -1736,21 +1434,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-226"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-226" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-232" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-233" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-232" fill="none" x="10" y="-10">
+        <g id="g-svg-233" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-235"
               fill="rgba(38,38,38,1)"
@@ -1758,21 +1451,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-234"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-234" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-248" fill="none" transform="matrix(1,0,0,1,330,40)">
-        <g id="g-svg-249" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-248" fill="none" x="0" y="-10">
+        <g id="g-svg-249" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-251"
               fill="rgba(38,38,38,1)"
@@ -1780,21 +1468,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-250"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-250" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-427" fill="none" transform="matrix(1,0,0,1,190,100)">
-        <g id="g-svg-428" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-427" fill="none" x="190" y="100">
+        <g id="g-svg-428" fill="none" transform="matrix(1,0,0,1,190,91.071800)">
+          <g>
             <path
               id="g-svg-430"
               fill="rgba(38,38,38,1)"
@@ -1802,43 +1485,40 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-429"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-429" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-431" fill="none" transform="matrix(1,0,0,1,210,120)">
-        <g transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-431" fill="none" x="210" y="120">
+        <g>
           <path id="g-svg-432" fill="none" />
         </g>
-        <g id="g-svg-433" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-433" fill="none">
           <g
             id="g-svg-434"
             fill="none"
+            x="200"
+            y="110"
             width="20"
             height="20"
-            transform="matrix(1,0,0,1,-10,-10)"
             class="speed"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-435"
                 fill="rgba(255,255,255,1)"
-                d="M 2,0 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                d="M 202,110 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                 class="select"
                 width="20"
                 height="20"
+                x="200"
+                y="110"
                 stroke="rgba(217,217,217,1)"
-                stroke-width="0"
               />
-              <g transform="matrix(1,0,0,1,0,0.500000)">
+              <g>
                 <text
                   id="g-svg-437"
                   fill="rgba(0,0,0,1)"
@@ -1853,13 +1533,15 @@
                   stroke-width="1"
                   text-anchor="left"
                   class="value"
+                  x="200"
+                  y="110.5"
                   dy="9.5px"
                 >
                   1x
                 </text>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,24)">
+            <g transform="matrix(1,0,0,1,200,134)">
               <path
                 id="g-svg-436"
                 fill="rgba(255,255,255,1)"
@@ -1871,20 +1553,9 @@
                 filter="url(#g-filter-dropshadow-436)"
                 visibility="hidden"
               />
-              <g
-                id="g-svg-438"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="dropdown-container"
-              >
-                <g
-                  id="g-svg-439"
-                  fill="none"
-                  class="dropdown-item"
-                  width="20"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-438" fill="none" class="dropdown-container">
+                <g id="g-svg-439" fill="none" class="dropdown-item" width="20">
+                  <g>
                     <path
                       id="g-svg-440"
                       fill="rgba(230,247,255,1)"
@@ -1893,12 +1564,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-441"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-441" fill="none">
+                      <g>
                         <text
                           id="g-svg-442"
                           fill="rgba(0,0,0,1)"
@@ -1929,7 +1596,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,19)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-444"
                       fill="rgba(255,255,255,1)"
@@ -1938,12 +1605,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-445"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-445" fill="none">
+                      <g>
                         <text
                           id="g-svg-446"
                           fill="rgba(0,0,0,1)"
@@ -1974,7 +1637,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,38)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-448"
                       fill="rgba(255,255,255,1)"
@@ -1983,12 +1646,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-449"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-449" fill="none">
+                      <g>
                         <text
                           id="g-svg-450"
                           fill="rgba(0,0,0,1)"
@@ -2017,9 +1676,9 @@
           </g>
         </g>
       </g>
-      <g id="g-svg-451" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-452" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-451" fill="none" x="10" y="-10">
+        <g id="g-svg-452" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-454"
               fill="rgba(38,38,38,1)"
@@ -2027,21 +1686,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-453"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-453" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-459" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-460" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-459" fill="none" x="10" y="-10">
+        <g id="g-svg-460" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-462"
               fill="rgba(38,38,38,1)"
@@ -2049,21 +1703,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-461"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-461" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-467" fill="none" transform="matrix(1,0,0,1,250,100)">
-        <g id="g-svg-468" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-467" fill="none" x="250" y="100">
+        <g id="g-svg-468" fill="none" transform="matrix(1,0,0,1,250,91.071800)">
+          <g>
             <path
               id="g-svg-470"
               fill="rgba(38,38,38,1)"
@@ -2071,21 +1720,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-469"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-469" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-477" fill="none" transform="matrix(1,0,0,1,270,110)">
-        <g id="g-svg-478" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-477" fill="none" x="0" y="-10">
+        <g id="g-svg-478" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-480"
               fill="rgba(38,38,38,1)"
@@ -2093,21 +1737,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-479"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-479" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-485" fill="none" transform="matrix(1,0,0,1,290,100)">
-        <g id="g-svg-486" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-485" fill="none" x="290" y="100">
+        <g id="g-svg-486" fill="none" transform="matrix(1,0,0,1,290,91.071800)">
+          <g>
             <path
               id="g-svg-488"
               fill="rgba(38,38,38,1)"
@@ -2115,21 +1754,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-487"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-487" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-493" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-494" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-493" fill="none" x="10" y="-10">
+        <g id="g-svg-494" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-496"
               fill="rgba(38,38,38,1)"
@@ -2137,21 +1771,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-495"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-495" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-510" fill="none" transform="matrix(1,0,0,1,330,110)">
-        <g id="g-svg-511" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-510" fill="none" x="0" y="-10">
+        <g id="g-svg-511" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-513"
               fill="rgba(38,38,38,1)"
@@ -2159,21 +1788,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-512"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-512" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-686" fill="none" transform="matrix(1,0,0,1,190,170)">
-        <g id="g-svg-687" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-686" fill="none" x="190" y="170">
+        <g
+          id="g-svg-687"
+          fill="none"
+          transform="matrix(1,0,0,1,190,161.071793)"
+        >
+          <g>
             <path
               id="g-svg-689"
               fill="rgba(38,38,38,1)"
@@ -2181,43 +1809,40 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-688"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-688" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-690" fill="none" transform="matrix(1,0,0,1,210,190)">
-        <g transform="matrix(1,0,0,1,0,0)">
+      <g id="g-svg-690" fill="none" x="210" y="190">
+        <g>
           <path id="g-svg-691" fill="none" />
         </g>
-        <g id="g-svg-692" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-692" fill="none">
           <g
             id="g-svg-693"
             fill="none"
+            x="200"
+            y="180"
             width="20"
             height="20"
-            transform="matrix(1,0,0,1,-10,-10)"
             class="speed"
           >
-            <g transform="matrix(1,0,0,1,0,0)">
+            <g>
               <path
                 id="g-svg-694"
                 fill="rgba(255,255,255,1)"
-                d="M 2,0 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
+                d="M 202,180 l 16,0 a 2,2,0,0,1,2,2 l 0,16 a 2,2,0,0,1,-2,2 l -16,0 a 2,2,0,0,1,-2,-2 l 0,-16 a 2,2,0,0,1,2,-2 z"
                 class="select"
                 width="20"
                 height="20"
+                x="200"
+                y="180"
                 stroke="rgba(217,217,217,1)"
-                stroke-width="0"
               />
-              <g transform="matrix(1,0,0,1,0,0.500000)">
+              <g>
                 <text
                   id="g-svg-696"
                   fill="rgba(0,0,0,1)"
@@ -2232,13 +1857,15 @@
                   stroke-width="1"
                   text-anchor="left"
                   class="value"
+                  x="200"
+                  y="180.5"
                   dy="9.5px"
                 >
                   1.5x
                 </text>
               </g>
             </g>
-            <g transform="matrix(1,0,0,1,0,24)">
+            <g transform="matrix(1,0,0,1,200,204)">
               <path
                 id="g-svg-695"
                 fill="rgba(255,255,255,1)"
@@ -2250,20 +1877,9 @@
                 filter="url(#g-filter-dropshadow-695)"
                 visibility="hidden"
               />
-              <g
-                id="g-svg-697"
-                fill="none"
-                transform="matrix(1,0,0,1,0,0)"
-                class="dropdown-container"
-              >
-                <g
-                  id="g-svg-698"
-                  fill="none"
-                  class="dropdown-item"
-                  width="20"
-                  transform="matrix(1,0,0,1,0,0)"
-                >
-                  <g transform="matrix(1,0,0,1,0,0)">
+              <g id="g-svg-697" fill="none" class="dropdown-container">
+                <g id="g-svg-698" fill="none" class="dropdown-item" width="20">
+                  <g>
                     <path
                       id="g-svg-699"
                       fill="rgba(255,255,255,1)"
@@ -2272,12 +1888,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-700"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-700" fill="none">
+                      <g>
                         <text
                           id="g-svg-701"
                           fill="rgba(0,0,0,1)"
@@ -2308,7 +1920,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,19)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-703"
                       fill="rgba(230,247,255,1)"
@@ -2317,12 +1929,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-704"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-704" fill="none">
+                      <g>
                         <text
                           id="g-svg-705"
                           fill="rgba(0,0,0,1)"
@@ -2353,7 +1961,7 @@
                   width="20"
                   transform="matrix(1,0,0,1,0,38)"
                 >
-                  <g transform="matrix(1,0,0,1,0,0)">
+                  <g>
                     <path
                       id="g-svg-707"
                       fill="rgba(255,255,255,1)"
@@ -2362,12 +1970,8 @@
                       height="19"
                       visibility="hidden"
                     />
-                    <g
-                      id="g-svg-708"
-                      fill="none"
-                      transform="matrix(1,0,0,1,0,0)"
-                    >
-                      <g transform="matrix(1,0,0,1,0,0)">
+                    <g id="g-svg-708" fill="none">
+                      <g>
                         <text
                           id="g-svg-709"
                           fill="rgba(0,0,0,1)"
@@ -2396,9 +2000,9 @@
           </g>
         </g>
       </g>
-      <g id="g-svg-710" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-711" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-710" fill="none" x="10" y="-10">
+        <g id="g-svg-711" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-713"
               fill="rgba(38,38,38,1)"
@@ -2406,21 +2010,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-712"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-712" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-718" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-719" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-718" fill="none" x="10" y="-10">
+        <g id="g-svg-719" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-721"
               fill="rgba(38,38,38,1)"
@@ -2428,21 +2027,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-720"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-720" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-726" fill="none" transform="matrix(1,0,0,1,250,170)">
-        <g id="g-svg-727" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-726" fill="none" x="250" y="170">
+        <g
+          id="g-svg-727"
+          fill="none"
+          transform="matrix(1,0,0,1,250,161.071793)"
+        >
+          <g>
             <path
               id="g-svg-729"
               fill="rgba(38,38,38,1)"
@@ -2450,21 +2048,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-728"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-728" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-736" fill="none" transform="matrix(1,0,0,1,270,180)">
-        <g id="g-svg-737" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-736" fill="none" x="0" y="-10">
+        <g id="g-svg-737" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-739"
               fill="rgba(38,38,38,1)"
@@ -2472,21 +2065,20 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-738"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-738" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-744" fill="none" transform="matrix(1,0,0,1,290,170)">
-        <g id="g-svg-745" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-744" fill="none" x="290" y="170">
+        <g
+          id="g-svg-745"
+          fill="none"
+          transform="matrix(1,0,0,1,290,161.071793)"
+        >
+          <g>
             <path
               id="g-svg-747"
               fill="rgba(38,38,38,1)"
@@ -2494,21 +2086,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-746"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-746" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-752" fill="none" transform="matrix(1,0,0,1,10,-10)">
-        <g id="g-svg-753" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-752" fill="none" x="10" y="-10">
+        <g id="g-svg-753" fill="none" transform="matrix(1,0,0,1,10,-18.928204)">
+          <g>
             <path
               id="g-svg-755"
               fill="rgba(38,38,38,1)"
@@ -2516,21 +2103,16 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-754"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-754" fill="none" class="indicator-label-group" />
         </g>
       </g>
-      <g id="g-svg-769" fill="none" transform="matrix(1,0,0,1,330,180)">
-        <g id="g-svg-770" fill="none" transform="matrix(1,0,0,1,0,-8.928204)">
-          <g transform="matrix(1,0,0,1,-5,-2)">
+      <g id="g-svg-769" fill="none" x="0" y="-10">
+        <g id="g-svg-770" fill="none" transform="matrix(1,0,0,1,0,-18.928204)">
+          <g>
             <path
               id="g-svg-772"
               fill="rgba(38,38,38,1)"
@@ -2538,16 +2120,11 @@
               stroke-linecap="round"
               stroke-width="1"
               stroke="rgba(51,51,51,1)"
-              d="M 4,0 L 6,0 A 3 3 0 0 1 9 3 L 9,1 A 3 3 0 0 1 6 4 L 6,4 L 10,4 L 5,10.928203230275509 L 0,4 L 4,4 A 3 3 0 0 1 1 1 L 1,3 A 3 3 0 0 1 4 0 Z"
+              d="M -1,-2 L 1,-2 A 3 3 0 0 1 4 1 L 4,-1 A 3 3 0 0 1 1 2 L 1,2 L 5,2 L 0,8.928203230275509 L -5,2 L -1,2 A 3 3 0 0 1 -4 -1 L -4,1 A 3 3 0 0 1 -1 -2 Z"
               visibility="hidden"
             />
           </g>
-          <g
-            id="g-svg-771"
-            fill="none"
-            transform="matrix(1,0,0,1,0,0)"
-            class="indicator-label-group"
-          />
+          <g id="g-svg-771" fill="none" class="indicator-label-group" />
         </g>
       </g>
     </g>
diff --git a/__tests__/integration/snapshots/TitleDemo.svg b/__tests__/integration/snapshots/TitleDemo.svg
index 0f5b3db3d..6b5b2e3da 100644
--- a/__tests__/integration/snapshots/TitleDemo.svg
+++ b/__tests__/integration/snapshots/TitleDemo.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g id="g-svg-2" fill="none" transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1" fill="none">
+        <g id="g-svg-2" fill="none">
           <g transform="matrix(1,0,0,1,50,50)">
             <path
               id="g-svg-3"
@@ -18,14 +18,8 @@
               width="100"
               height="100"
             />
-            <g
-              id="g-svg-4"
-              fill="none"
-              width="100"
-              height="100"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-4" fill="none" width="100" height="100">
+              <g>
                 <text
                   id="g-svg-1"
                   fill="rgba(74,80,90,1)"
@@ -37,6 +31,8 @@
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
+                  y="0"
                   text-anchor="left"
                 >
                   left top
@@ -45,7 +41,7 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-5" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-5" fill="none">
           <g transform="matrix(1,0,0,1,50,150)">
             <path
               id="g-svg-6"
@@ -54,24 +50,20 @@
               width="100"
               height="100"
             />
-            <g
-              id="g-svg-7"
-              fill="none"
-              width="100"
-              height="100"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,0,50)">
+            <g id="g-svg-7" fill="none" width="100" height="100">
+              <g>
                 <text
                   id="g-svg-2"
                   fill="rgba(74,80,90,1)"
                   class="title-text"
                   dominant-baseline="central"
                   paint-order="stroke"
+                  y="50"
                   dx="0.5"
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
                   text-anchor="left"
                 >
                   left
@@ -80,7 +72,7 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-8" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-8" fill="none">
           <g transform="matrix(1,0,0,1,50,250)">
             <path
               id="g-svg-9"
@@ -89,25 +81,21 @@
               width="100"
               height="100"
             />
-            <g
-              id="g-svg-10"
-              fill="none"
-              width="100"
-              height="100"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,0,100)">
+            <g id="g-svg-10" fill="none" width="100" height="100">
+              <g>
                 <text
                   id="g-svg-3"
                   fill="rgba(74,80,90,1)"
                   class="title-text"
                   dominant-baseline="central"
                   paint-order="stroke"
+                  y="100"
                   dx="0.5"
                   dy="-11.5px"
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  x="0"
                   text-anchor="left"
                 >
                   left bottom
@@ -116,7 +104,7 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-11" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-11" fill="none">
           <g transform="matrix(1,0,0,1,50,350)">
             <path
               id="g-svg-12"
@@ -125,20 +113,16 @@
               width="100"
               height="100"
             />
-            <g
-              id="g-svg-13"
-              fill="none"
-              width="100"
-              height="100"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,50,50)">
+            <g id="g-svg-13" fill="none" width="100" height="100">
+              <g>
                 <text
                   id="g-svg-4"
                   fill="rgba(74,80,90,1)"
                   class="title-text"
                   dominant-baseline="central"
                   paint-order="stroke"
+                  x="50"
+                  y="50"
                   dx="0.5"
                   font-weight="bold"
                   font-size="12"
@@ -151,7 +135,7 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-14" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-14" fill="none">
           <g transform="matrix(1,0,0,1,200,50)">
             <path
               id="g-svg-15"
@@ -160,25 +144,21 @@
               width="100"
               height="100"
             />
-            <g
-              id="g-svg-16"
-              fill="none"
-              width="100"
-              height="100"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,100,0)">
+            <g id="g-svg-16" fill="none" width="100" height="100">
+              <g>
                 <text
                   id="g-svg-5"
                   fill="rgba(74,80,90,1)"
                   class="title-text"
                   dominant-baseline="central"
                   paint-order="stroke"
+                  x="100"
                   dx="0.5"
                   dy="11.5px"
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  y="0"
                   text-anchor="end"
                 >
                   right top
@@ -187,7 +167,7 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-17" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-17" fill="none">
           <g transform="matrix(1,0,0,1,200,150)">
             <path
               id="g-svg-18"
@@ -196,20 +176,16 @@
               width="100"
               height="100"
             />
-            <g
-              id="g-svg-19"
-              fill="none"
-              width="100"
-              height="100"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,100,50)">
+            <g id="g-svg-19" fill="none" width="100" height="100">
+              <g>
                 <text
                   id="g-svg-6"
                   fill="rgba(74,80,90,1)"
                   class="title-text"
                   dominant-baseline="central"
                   paint-order="stroke"
+                  x="100"
+                  y="50"
                   dx="0.5"
                   font-weight="bold"
                   font-size="12"
@@ -222,7 +198,7 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-20" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-20" fill="none">
           <g transform="matrix(1,0,0,1,200,250)">
             <path
               id="g-svg-21"
@@ -231,20 +207,16 @@
               width="100"
               height="100"
             />
-            <g
-              id="g-svg-22"
-              fill="none"
-              width="100"
-              height="100"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,100,100)">
+            <g id="g-svg-22" fill="none" width="100" height="100">
+              <g>
                 <text
                   id="g-svg-7"
                   fill="rgba(74,80,90,1)"
                   class="title-text"
                   dominant-baseline="central"
                   paint-order="stroke"
+                  x="100"
+                  y="100"
                   dx="0.5"
                   dy="-11.5px"
                   font-weight="bold"
@@ -258,7 +230,7 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-23" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-23" fill="none">
           <g transform="matrix(1,0,0,1,400,50)">
             <path
               id="g-svg-24"
@@ -267,25 +239,21 @@
               width="100"
               height="100"
             />
-            <g
-              id="g-svg-25"
-              fill="none"
-              width="100"
-              height="100"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,50,0)">
+            <g id="g-svg-25" fill="none" width="100" height="100">
+              <g>
                 <text
                   id="g-svg-8"
                   fill="rgba(74,80,90,1)"
                   class="title-text"
                   dominant-baseline="central"
                   paint-order="stroke"
+                  x="50"
                   dx="0.5"
                   dy="11.5px"
                   font-weight="bold"
                   font-size="12"
                   font-family="sans-serif"
+                  y="0"
                   text-anchor="middle"
                 >
                   top
@@ -294,7 +262,7 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-26" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-26" fill="none">
           <g transform="matrix(1,0,0,1,400,150)">
             <path
               id="g-svg-27"
@@ -303,20 +271,16 @@
               width="100"
               height="100"
             />
-            <g
-              id="g-svg-28"
-              fill="none"
-              width="100"
-              height="100"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,50,100)">
+            <g id="g-svg-28" fill="none" width="100" height="100">
+              <g>
                 <text
                   id="g-svg-9"
                   fill="rgba(74,80,90,1)"
                   class="title-text"
                   dominant-baseline="central"
                   paint-order="stroke"
+                  x="50"
+                  y="100"
                   dx="0.5"
                   dy="-11.5px"
                   font-weight="bold"
@@ -330,7 +294,7 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-29" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-29" fill="none">
           <g transform="matrix(1,0,0,1,400,300)">
             <path
               id="g-svg-30"
@@ -339,14 +303,8 @@
               width="200"
               height="200"
             />
-            <g
-              id="g-svg-31"
-              fill="none"
-              width="100"
-              height="100"
-              transform="matrix(1,0,0,1,0,0)"
-            >
-              <g transform="matrix(1,0,0,1,0,0)">
+            <g id="g-svg-31" fill="none" width="100" height="100">
+              <g>
                 <text
                   id="g-svg-10"
                   fill="rgba(74,80,90,1)"
@@ -359,6 +317,8 @@
                   font-size="12"
                   font-family="sans-serif"
                   text-anchor="left"
+                  x="0"
+                  y="0"
                 >
                   left top start
                 </text>
@@ -366,7 +326,7 @@
             </g>
           </g>
         </g>
-        <g id="g-svg-32" fill="none" transform="matrix(1,0,0,1,0,0)">
+        <g id="g-svg-32" fill="none">
           <g transform="matrix(1,0,0,1,600,50)">
             <path
               id="g-svg-33"
@@ -382,7 +342,7 @@
               height="100"
               transform="matrix(0,1,-1,0,0,0)"
             >
-              <g transform="matrix(1,0,0,1,0,0)">
+              <g>
                 <text
                   id="g-svg-11"
                   fill="rgba(74,80,90,1)"
@@ -395,6 +355,8 @@
                   font-size="12"
                   font-family="sans-serif"
                   text-anchor="left"
+                  x="0"
+                  y="0"
                 >
                   left top start
                 </text>
diff --git a/__tests__/integration/snapshots/Tooltip1.svg b/__tests__/integration/snapshots/Tooltip1.svg
index 9cc181a8e..8641f5f4f 100644
--- a/__tests__/integration/snapshots/Tooltip1.svg
+++ b/__tests__/integration/snapshots/Tooltip1.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-9" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-9" fill="none">
+        <g>
           <path
             id="g-svg-10"
             fill="rgba(221,221,221,1)"
@@ -18,7 +18,7 @@
             height="400"
           />
         </g>
-        <g id="g-svg-11" fill="none" transform="matrix(1,0,0,1,100,100)" />
+        <g id="g-svg-11" fill="none" x="100" y="100" />
       </g>
     </g>
   </g>
diff --git a/__tests__/integration/snapshots/Tooltip10.svg b/__tests__/integration/snapshots/Tooltip10.svg
index d5992196b..d6e14329b 100644
--- a/__tests__/integration/snapshots/Tooltip10.svg
+++ b/__tests__/integration/snapshots/Tooltip10.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1" fill="none">
+        <g>
           <path
             id="g-svg-2"
             fill="rgba(221,221,221,1)"
@@ -18,7 +18,7 @@
             height="400"
           />
         </g>
-        <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,100,100)" />
+        <g id="g-svg-3" fill="none" x="100" y="100" />
       </g>
     </g>
   </g>
diff --git a/__tests__/integration/snapshots/Tooltip2.svg b/__tests__/integration/snapshots/Tooltip2.svg
index d5992196b..d6e14329b 100644
--- a/__tests__/integration/snapshots/Tooltip2.svg
+++ b/__tests__/integration/snapshots/Tooltip2.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1" fill="none">
+        <g>
           <path
             id="g-svg-2"
             fill="rgba(221,221,221,1)"
@@ -18,7 +18,7 @@
             height="400"
           />
         </g>
-        <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,100,100)" />
+        <g id="g-svg-3" fill="none" x="100" y="100" />
       </g>
     </g>
   </g>
diff --git a/__tests__/integration/snapshots/Tooltip3.svg b/__tests__/integration/snapshots/Tooltip3.svg
index d5992196b..d6e14329b 100644
--- a/__tests__/integration/snapshots/Tooltip3.svg
+++ b/__tests__/integration/snapshots/Tooltip3.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1" fill="none">
+        <g>
           <path
             id="g-svg-2"
             fill="rgba(221,221,221,1)"
@@ -18,7 +18,7 @@
             height="400"
           />
         </g>
-        <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,100,100)" />
+        <g id="g-svg-3" fill="none" x="100" y="100" />
       </g>
     </g>
   </g>
diff --git a/__tests__/integration/snapshots/Tooltip4.svg b/__tests__/integration/snapshots/Tooltip4.svg
index d5992196b..d6e14329b 100644
--- a/__tests__/integration/snapshots/Tooltip4.svg
+++ b/__tests__/integration/snapshots/Tooltip4.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1" fill="none">
+        <g>
           <path
             id="g-svg-2"
             fill="rgba(221,221,221,1)"
@@ -18,7 +18,7 @@
             height="400"
           />
         </g>
-        <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,100,100)" />
+        <g id="g-svg-3" fill="none" x="100" y="100" />
       </g>
     </g>
   </g>
diff --git a/__tests__/integration/snapshots/Tooltip5.svg b/__tests__/integration/snapshots/Tooltip5.svg
index d5992196b..d6e14329b 100644
--- a/__tests__/integration/snapshots/Tooltip5.svg
+++ b/__tests__/integration/snapshots/Tooltip5.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1" fill="none">
+        <g>
           <path
             id="g-svg-2"
             fill="rgba(221,221,221,1)"
@@ -18,7 +18,7 @@
             height="400"
           />
         </g>
-        <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,100,100)" />
+        <g id="g-svg-3" fill="none" x="100" y="100" />
       </g>
     </g>
   </g>
diff --git a/__tests__/integration/snapshots/Tooltip6.svg b/__tests__/integration/snapshots/Tooltip6.svg
index d5992196b..d6e14329b 100644
--- a/__tests__/integration/snapshots/Tooltip6.svg
+++ b/__tests__/integration/snapshots/Tooltip6.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1" fill="none">
+        <g>
           <path
             id="g-svg-2"
             fill="rgba(221,221,221,1)"
@@ -18,7 +18,7 @@
             height="400"
           />
         </g>
-        <g id="g-svg-3" fill="none" transform="matrix(1,0,0,1,100,100)" />
+        <g id="g-svg-3" fill="none" x="100" y="100" />
       </g>
     </g>
   </g>
diff --git a/__tests__/integration/snapshots/Tooltip7.svg b/__tests__/integration/snapshots/Tooltip7.svg
index f8d3e55f5..d2ed19af2 100644
--- a/__tests__/integration/snapshots/Tooltip7.svg
+++ b/__tests__/integration/snapshots/Tooltip7.svg
@@ -6,10 +6,10 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1" fill="none">
+        <g>
           <path
             id="g-svg-2"
             fill="rgba(221,221,221,1)"
diff --git a/__tests__/integration/snapshots/Tooltip8.svg b/__tests__/integration/snapshots/Tooltip8.svg
index c970f0485..1a1bc35e2 100644
--- a/__tests__/integration/snapshots/Tooltip8.svg
+++ b/__tests__/integration/snapshots/Tooltip8.svg
@@ -6,905 +6,1105 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1" fill="none">
+        <g>
           <path
             id="g-svg-2"
             fill="rgba(128,0,0,1)"
             d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,40)">
+        <g>
           <path
             id="g-svg-3"
             fill="rgba(128,2,2,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,40 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,80)">
+        <g>
           <path
             id="g-svg-4"
             fill="rgba(128,5,5,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,80 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,120)">
+        <g>
           <path
             id="g-svg-5"
             fill="rgba(128,7,7,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,120 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,160)">
+        <g>
           <path
             id="g-svg-6"
             fill="rgba(128,10,10,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,160 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,200)">
+        <g>
           <path
             id="g-svg-7"
             fill="rgba(128,12,12,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,200 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,240)">
+        <g>
           <path
             id="g-svg-8"
             fill="rgba(128,15,15,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,240 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,280)">
+        <g>
           <path
             id="g-svg-9"
             fill="rgba(128,17,17,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,280 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,320)">
+        <g>
           <path
             id="g-svg-10"
             fill="rgba(128,20,20,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,320 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,360)">
+        <g>
           <path
             id="g-svg-11"
             fill="rgba(128,22,22,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,360 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,0)">
+        <g>
           <path
             id="g-svg-12"
             fill="rgba(128,25,25,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,0 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,40)">
+        <g>
           <path
             id="g-svg-13"
             fill="rgba(128,28,28,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,40 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,80)">
+        <g>
           <path
             id="g-svg-14"
             fill="rgba(128,30,30,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,80 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,120)">
+        <g>
           <path
             id="g-svg-15"
             fill="rgba(128,33,33,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,120 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,160)">
+        <g>
           <path
             id="g-svg-16"
             fill="rgba(128,35,35,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,160 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,200)">
+        <g>
           <path
             id="g-svg-17"
             fill="rgba(128,38,38,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,200 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,240)">
+        <g>
           <path
             id="g-svg-18"
             fill="rgba(128,40,40,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,240 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,280)">
+        <g>
           <path
             id="g-svg-19"
             fill="rgba(128,43,43,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,280 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,320)">
+        <g>
           <path
             id="g-svg-20"
             fill="rgba(128,45,45,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,320 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,360)">
+        <g>
           <path
             id="g-svg-21"
             fill="rgba(128,48,48,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,360 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,0)">
+        <g>
           <path
             id="g-svg-22"
             fill="rgba(128,51,51,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,0 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,40)">
+        <g>
           <path
             id="g-svg-23"
             fill="rgba(128,53,53,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,40 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,80)">
+        <g>
           <path
             id="g-svg-24"
             fill="rgba(128,56,56,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,80 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,120)">
+        <g>
           <path
             id="g-svg-25"
             fill="rgba(128,58,58,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,120 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,160)">
+        <g>
           <path
             id="g-svg-26"
             fill="rgba(128,61,61,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,160 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,200)">
+        <g>
           <path
             id="g-svg-27"
             fill="rgba(128,63,63,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,200 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,240)">
+        <g>
           <path
             id="g-svg-28"
             fill="rgba(128,66,66,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,240 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,280)">
+        <g>
           <path
             id="g-svg-29"
             fill="rgba(128,68,68,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,280 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,320)">
+        <g>
           <path
             id="g-svg-30"
             fill="rgba(128,71,71,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,320 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,360)">
+        <g>
           <path
             id="g-svg-31"
             fill="rgba(128,73,73,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,360 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,0)">
+        <g>
           <path
             id="g-svg-32"
             fill="rgba(128,76,76,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,0 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,40)">
+        <g>
           <path
             id="g-svg-33"
             fill="rgba(128,79,79,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,40 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,80)">
+        <g>
           <path
             id="g-svg-34"
             fill="rgba(128,81,81,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,80 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,120)">
+        <g>
           <path
             id="g-svg-35"
             fill="rgba(128,84,84,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,120 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,160)">
+        <g>
           <path
             id="g-svg-36"
             fill="rgba(128,86,86,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,160 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,200)">
+        <g>
           <path
             id="g-svg-37"
             fill="rgba(128,89,89,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,200 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,240)">
+        <g>
           <path
             id="g-svg-38"
             fill="rgba(128,91,91,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,240 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,280)">
+        <g>
           <path
             id="g-svg-39"
             fill="rgba(128,94,94,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,280 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,320)">
+        <g>
           <path
             id="g-svg-40"
             fill="rgba(128,96,96,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,320 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,360)">
+        <g>
           <path
             id="g-svg-41"
             fill="rgba(128,99,99,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,360 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,0)">
+        <g>
           <path
             id="g-svg-42"
             fill="rgba(128,102,102,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,0 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,40)">
+        <g>
           <path
             id="g-svg-43"
             fill="rgba(128,104,104,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,40 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,80)">
+        <g>
           <path
             id="g-svg-44"
             fill="rgba(128,107,107,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,80 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,120)">
+        <g>
           <path
             id="g-svg-45"
             fill="rgba(128,109,109,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,120 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,160)">
+        <g>
           <path
             id="g-svg-46"
             fill="rgba(128,112,112,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,160 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,200)">
+        <g>
           <path
             id="g-svg-47"
             fill="rgba(128,114,114,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,200 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,240)">
+        <g>
           <path
             id="g-svg-48"
             fill="rgba(128,117,117,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,240 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,280)">
+        <g>
           <path
             id="g-svg-49"
             fill="rgba(128,119,119,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,280 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,320)">
+        <g>
           <path
             id="g-svg-50"
             fill="rgba(128,122,122,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,320 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,360)">
+        <g>
           <path
             id="g-svg-51"
             fill="rgba(128,124,124,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,360 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,0)">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(128,127,127,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,0 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,40)">
+        <g>
           <path
             id="g-svg-53"
             fill="rgba(128,130,130,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,40 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,80)">
+        <g>
           <path
             id="g-svg-54"
             fill="rgba(128,132,132,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,80 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,120)">
+        <g>
           <path
             id="g-svg-55"
             fill="rgba(128,135,135,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,120 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,160)">
+        <g>
           <path
             id="g-svg-56"
             fill="rgba(128,137,137,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,160 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,200)">
+        <g>
           <path
             id="g-svg-57"
             fill="rgba(128,140,140,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,200 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,240)">
+        <g>
           <path
             id="g-svg-58"
             fill="rgba(128,142,142,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,240 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,280)">
+        <g>
           <path
             id="g-svg-59"
             fill="rgba(128,145,145,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,280 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,320)">
+        <g>
           <path
             id="g-svg-60"
             fill="rgba(128,147,147,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,320 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,360)">
+        <g>
           <path
             id="g-svg-61"
             fill="rgba(128,150,150,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,360 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,0)">
+        <g>
           <path
             id="g-svg-62"
             fill="rgba(128,153,153,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,0 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,40)">
+        <g>
           <path
             id="g-svg-63"
             fill="rgba(128,155,155,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,40 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,80)">
+        <g>
           <path
             id="g-svg-64"
             fill="rgba(128,158,158,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,80 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,120)">
+        <g>
           <path
             id="g-svg-65"
             fill="rgba(128,160,160,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,120 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,160)">
+        <g>
           <path
             id="g-svg-66"
             fill="rgba(128,163,163,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,160 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,200)">
+        <g>
           <path
             id="g-svg-67"
             fill="rgba(128,165,165,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,200 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,240)">
+        <g>
           <path
             id="g-svg-68"
             fill="rgba(128,168,168,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,240 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,280)">
+        <g>
           <path
             id="g-svg-69"
             fill="rgba(128,170,170,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,280 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,320)">
+        <g>
           <path
             id="g-svg-70"
             fill="rgba(128,173,173,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,320 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,360)">
+        <g>
           <path
             id="g-svg-71"
             fill="rgba(128,175,175,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,360 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,0)">
+        <g>
           <path
             id="g-svg-72"
             fill="rgba(128,178,178,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,0 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,40)">
+        <g>
           <path
             id="g-svg-73"
             fill="rgba(128,181,181,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,40 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,80)">
+        <g>
           <path
             id="g-svg-74"
             fill="rgba(128,183,183,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,80 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,120)">
+        <g>
           <path
             id="g-svg-75"
             fill="rgba(128,186,186,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,120 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,160)">
+        <g>
           <path
             id="g-svg-76"
             fill="rgba(128,188,188,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,160 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,200)">
+        <g>
           <path
             id="g-svg-77"
             fill="rgba(128,191,191,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,200 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,240)">
+        <g>
           <path
             id="g-svg-78"
             fill="rgba(128,193,193,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,240 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,280)">
+        <g>
           <path
             id="g-svg-79"
             fill="rgba(128,196,196,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,280 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,320)">
+        <g>
           <path
             id="g-svg-80"
             fill="rgba(128,198,198,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,320 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,360)">
+        <g>
           <path
             id="g-svg-81"
             fill="rgba(128,201,201,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,360 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,0)">
+        <g>
           <path
             id="g-svg-82"
             fill="rgba(128,204,204,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,0 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,40)">
+        <g>
           <path
             id="g-svg-83"
             fill="rgba(128,206,206,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,40 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,80)">
+        <g>
           <path
             id="g-svg-84"
             fill="rgba(128,209,209,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,80 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,120)">
+        <g>
           <path
             id="g-svg-85"
             fill="rgba(128,211,211,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,120 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,160)">
+        <g>
           <path
             id="g-svg-86"
             fill="rgba(128,214,214,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,160 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,200)">
+        <g>
           <path
             id="g-svg-87"
             fill="rgba(128,216,216,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,200 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,240)">
+        <g>
           <path
             id="g-svg-88"
             fill="rgba(128,219,219,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,240 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,280)">
+        <g>
           <path
             id="g-svg-89"
             fill="rgba(128,221,221,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,280 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,320)">
+        <g>
           <path
             id="g-svg-90"
             fill="rgba(128,224,224,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,320 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,360)">
+        <g>
           <path
             id="g-svg-91"
             fill="rgba(128,226,226,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,360 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,0)">
+        <g>
           <path
             id="g-svg-92"
             fill="rgba(128,229,229,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,0 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,40)">
+        <g>
           <path
             id="g-svg-93"
             fill="rgba(128,232,232,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,40 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,80)">
+        <g>
           <path
             id="g-svg-94"
             fill="rgba(128,234,234,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,80 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,120)">
+        <g>
           <path
             id="g-svg-95"
             fill="rgba(128,237,237,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,120 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,160)">
+        <g>
           <path
             id="g-svg-96"
             fill="rgba(128,239,239,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,160 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,200)">
+        <g>
           <path
             id="g-svg-97"
             fill="rgba(128,242,242,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,200 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,240)">
+        <g>
           <path
             id="g-svg-98"
             fill="rgba(128,244,244,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,240 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,280)">
+        <g>
           <path
             id="g-svg-99"
             fill="rgba(128,247,247,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,280 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,320)">
+        <g>
           <path
             id="g-svg-100"
             fill="rgba(128,249,249,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,320 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,360)">
+        <g>
           <path
             id="g-svg-101"
             fill="rgba(128,252,252,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,360 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="360"
             width="40"
             height="40"
           />
diff --git a/__tests__/integration/snapshots/Tooltip9.svg b/__tests__/integration/snapshots/Tooltip9.svg
index c970f0485..1a1bc35e2 100644
--- a/__tests__/integration/snapshots/Tooltip9.svg
+++ b/__tests__/integration/snapshots/Tooltip9.svg
@@ -6,905 +6,1105 @@
   color-interpolation-filters="sRGB"
 >
   <defs />
-  <g id="g-svg-camera" transform="matrix(1,0,0,1,0,0)">
-    <g id="g-root" fill="none" transform="matrix(1,0,0,1,0,0)">
-      <g id="g-svg-1" fill="none" transform="matrix(1,0,0,1,0,0)">
-        <g transform="matrix(1,0,0,1,0,0)">
+  <g id="g-svg-camera">
+    <g id="g-root" fill="none">
+      <g id="g-svg-1" fill="none">
+        <g>
           <path
             id="g-svg-2"
             fill="rgba(128,0,0,1)"
             d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,40)">
+        <g>
           <path
             id="g-svg-3"
             fill="rgba(128,2,2,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,40 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,80)">
+        <g>
           <path
             id="g-svg-4"
             fill="rgba(128,5,5,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,80 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,120)">
+        <g>
           <path
             id="g-svg-5"
             fill="rgba(128,7,7,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,120 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,160)">
+        <g>
           <path
             id="g-svg-6"
             fill="rgba(128,10,10,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,160 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,200)">
+        <g>
           <path
             id="g-svg-7"
             fill="rgba(128,12,12,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,200 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,240)">
+        <g>
           <path
             id="g-svg-8"
             fill="rgba(128,15,15,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,240 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,280)">
+        <g>
           <path
             id="g-svg-9"
             fill="rgba(128,17,17,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,280 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,320)">
+        <g>
           <path
             id="g-svg-10"
             fill="rgba(128,20,20,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,320 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,0,360)">
+        <g>
           <path
             id="g-svg-11"
             fill="rgba(128,22,22,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 0,360 l 40,0 l 0,40 l-40 0 z"
+            x="0"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,0)">
+        <g>
           <path
             id="g-svg-12"
             fill="rgba(128,25,25,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,0 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,40)">
+        <g>
           <path
             id="g-svg-13"
             fill="rgba(128,28,28,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,40 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,80)">
+        <g>
           <path
             id="g-svg-14"
             fill="rgba(128,30,30,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,80 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,120)">
+        <g>
           <path
             id="g-svg-15"
             fill="rgba(128,33,33,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,120 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,160)">
+        <g>
           <path
             id="g-svg-16"
             fill="rgba(128,35,35,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,160 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,200)">
+        <g>
           <path
             id="g-svg-17"
             fill="rgba(128,38,38,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,200 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,240)">
+        <g>
           <path
             id="g-svg-18"
             fill="rgba(128,40,40,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,240 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,280)">
+        <g>
           <path
             id="g-svg-19"
             fill="rgba(128,43,43,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,280 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,320)">
+        <g>
           <path
             id="g-svg-20"
             fill="rgba(128,45,45,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,320 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,40,360)">
+        <g>
           <path
             id="g-svg-21"
             fill="rgba(128,48,48,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 40,360 l 40,0 l 0,40 l-40 0 z"
+            x="40"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,0)">
+        <g>
           <path
             id="g-svg-22"
             fill="rgba(128,51,51,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,0 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,40)">
+        <g>
           <path
             id="g-svg-23"
             fill="rgba(128,53,53,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,40 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,80)">
+        <g>
           <path
             id="g-svg-24"
             fill="rgba(128,56,56,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,80 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,120)">
+        <g>
           <path
             id="g-svg-25"
             fill="rgba(128,58,58,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,120 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,160)">
+        <g>
           <path
             id="g-svg-26"
             fill="rgba(128,61,61,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,160 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,200)">
+        <g>
           <path
             id="g-svg-27"
             fill="rgba(128,63,63,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,200 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,240)">
+        <g>
           <path
             id="g-svg-28"
             fill="rgba(128,66,66,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,240 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,280)">
+        <g>
           <path
             id="g-svg-29"
             fill="rgba(128,68,68,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,280 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,320)">
+        <g>
           <path
             id="g-svg-30"
             fill="rgba(128,71,71,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,320 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,80,360)">
+        <g>
           <path
             id="g-svg-31"
             fill="rgba(128,73,73,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 80,360 l 40,0 l 0,40 l-40 0 z"
+            x="80"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,0)">
+        <g>
           <path
             id="g-svg-32"
             fill="rgba(128,76,76,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,0 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,40)">
+        <g>
           <path
             id="g-svg-33"
             fill="rgba(128,79,79,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,40 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,80)">
+        <g>
           <path
             id="g-svg-34"
             fill="rgba(128,81,81,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,80 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,120)">
+        <g>
           <path
             id="g-svg-35"
             fill="rgba(128,84,84,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,120 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,160)">
+        <g>
           <path
             id="g-svg-36"
             fill="rgba(128,86,86,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,160 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,200)">
+        <g>
           <path
             id="g-svg-37"
             fill="rgba(128,89,89,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,200 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,240)">
+        <g>
           <path
             id="g-svg-38"
             fill="rgba(128,91,91,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,240 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,280)">
+        <g>
           <path
             id="g-svg-39"
             fill="rgba(128,94,94,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,280 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,320)">
+        <g>
           <path
             id="g-svg-40"
             fill="rgba(128,96,96,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,320 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,120,360)">
+        <g>
           <path
             id="g-svg-41"
             fill="rgba(128,99,99,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 120,360 l 40,0 l 0,40 l-40 0 z"
+            x="120"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,0)">
+        <g>
           <path
             id="g-svg-42"
             fill="rgba(128,102,102,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,0 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,40)">
+        <g>
           <path
             id="g-svg-43"
             fill="rgba(128,104,104,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,40 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,80)">
+        <g>
           <path
             id="g-svg-44"
             fill="rgba(128,107,107,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,80 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,120)">
+        <g>
           <path
             id="g-svg-45"
             fill="rgba(128,109,109,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,120 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,160)">
+        <g>
           <path
             id="g-svg-46"
             fill="rgba(128,112,112,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,160 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,200)">
+        <g>
           <path
             id="g-svg-47"
             fill="rgba(128,114,114,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,200 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,240)">
+        <g>
           <path
             id="g-svg-48"
             fill="rgba(128,117,117,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,240 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,280)">
+        <g>
           <path
             id="g-svg-49"
             fill="rgba(128,119,119,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,280 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,320)">
+        <g>
           <path
             id="g-svg-50"
             fill="rgba(128,122,122,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,320 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,160,360)">
+        <g>
           <path
             id="g-svg-51"
             fill="rgba(128,124,124,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 160,360 l 40,0 l 0,40 l-40 0 z"
+            x="160"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,0)">
+        <g>
           <path
             id="g-svg-52"
             fill="rgba(128,127,127,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,0 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,40)">
+        <g>
           <path
             id="g-svg-53"
             fill="rgba(128,130,130,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,40 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,80)">
+        <g>
           <path
             id="g-svg-54"
             fill="rgba(128,132,132,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,80 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,120)">
+        <g>
           <path
             id="g-svg-55"
             fill="rgba(128,135,135,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,120 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,160)">
+        <g>
           <path
             id="g-svg-56"
             fill="rgba(128,137,137,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,160 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,200)">
+        <g>
           <path
             id="g-svg-57"
             fill="rgba(128,140,140,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,200 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,240)">
+        <g>
           <path
             id="g-svg-58"
             fill="rgba(128,142,142,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,240 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,280)">
+        <g>
           <path
             id="g-svg-59"
             fill="rgba(128,145,145,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,280 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,320)">
+        <g>
           <path
             id="g-svg-60"
             fill="rgba(128,147,147,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,320 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,200,360)">
+        <g>
           <path
             id="g-svg-61"
             fill="rgba(128,150,150,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 200,360 l 40,0 l 0,40 l-40 0 z"
+            x="200"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,0)">
+        <g>
           <path
             id="g-svg-62"
             fill="rgba(128,153,153,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,0 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,40)">
+        <g>
           <path
             id="g-svg-63"
             fill="rgba(128,155,155,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,40 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,80)">
+        <g>
           <path
             id="g-svg-64"
             fill="rgba(128,158,158,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,80 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,120)">
+        <g>
           <path
             id="g-svg-65"
             fill="rgba(128,160,160,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,120 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,160)">
+        <g>
           <path
             id="g-svg-66"
             fill="rgba(128,163,163,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,160 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,200)">
+        <g>
           <path
             id="g-svg-67"
             fill="rgba(128,165,165,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,200 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,240)">
+        <g>
           <path
             id="g-svg-68"
             fill="rgba(128,168,168,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,240 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,280)">
+        <g>
           <path
             id="g-svg-69"
             fill="rgba(128,170,170,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,280 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,320)">
+        <g>
           <path
             id="g-svg-70"
             fill="rgba(128,173,173,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,320 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,240,360)">
+        <g>
           <path
             id="g-svg-71"
             fill="rgba(128,175,175,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 240,360 l 40,0 l 0,40 l-40 0 z"
+            x="240"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,0)">
+        <g>
           <path
             id="g-svg-72"
             fill="rgba(128,178,178,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,0 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,40)">
+        <g>
           <path
             id="g-svg-73"
             fill="rgba(128,181,181,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,40 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,80)">
+        <g>
           <path
             id="g-svg-74"
             fill="rgba(128,183,183,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,80 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,120)">
+        <g>
           <path
             id="g-svg-75"
             fill="rgba(128,186,186,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,120 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,160)">
+        <g>
           <path
             id="g-svg-76"
             fill="rgba(128,188,188,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,160 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,200)">
+        <g>
           <path
             id="g-svg-77"
             fill="rgba(128,191,191,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,200 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,240)">
+        <g>
           <path
             id="g-svg-78"
             fill="rgba(128,193,193,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,240 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,280)">
+        <g>
           <path
             id="g-svg-79"
             fill="rgba(128,196,196,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,280 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,320)">
+        <g>
           <path
             id="g-svg-80"
             fill="rgba(128,198,198,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,320 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,280,360)">
+        <g>
           <path
             id="g-svg-81"
             fill="rgba(128,201,201,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 280,360 l 40,0 l 0,40 l-40 0 z"
+            x="280"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,0)">
+        <g>
           <path
             id="g-svg-82"
             fill="rgba(128,204,204,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,0 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,40)">
+        <g>
           <path
             id="g-svg-83"
             fill="rgba(128,206,206,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,40 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,80)">
+        <g>
           <path
             id="g-svg-84"
             fill="rgba(128,209,209,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,80 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,120)">
+        <g>
           <path
             id="g-svg-85"
             fill="rgba(128,211,211,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,120 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,160)">
+        <g>
           <path
             id="g-svg-86"
             fill="rgba(128,214,214,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,160 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,200)">
+        <g>
           <path
             id="g-svg-87"
             fill="rgba(128,216,216,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,200 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,240)">
+        <g>
           <path
             id="g-svg-88"
             fill="rgba(128,219,219,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,240 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,280)">
+        <g>
           <path
             id="g-svg-89"
             fill="rgba(128,221,221,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,280 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,320)">
+        <g>
           <path
             id="g-svg-90"
             fill="rgba(128,224,224,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,320 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,320,360)">
+        <g>
           <path
             id="g-svg-91"
             fill="rgba(128,226,226,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 320,360 l 40,0 l 0,40 l-40 0 z"
+            x="320"
+            y="360"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,0)">
+        <g>
           <path
             id="g-svg-92"
             fill="rgba(128,229,229,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,0 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="0"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,40)">
+        <g>
           <path
             id="g-svg-93"
             fill="rgba(128,232,232,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,40 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="40"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,80)">
+        <g>
           <path
             id="g-svg-94"
             fill="rgba(128,234,234,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,80 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="80"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,120)">
+        <g>
           <path
             id="g-svg-95"
             fill="rgba(128,237,237,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,120 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="120"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,160)">
+        <g>
           <path
             id="g-svg-96"
             fill="rgba(128,239,239,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,160 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="160"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,200)">
+        <g>
           <path
             id="g-svg-97"
             fill="rgba(128,242,242,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,200 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="200"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,240)">
+        <g>
           <path
             id="g-svg-98"
             fill="rgba(128,244,244,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,240 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="240"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,280)">
+        <g>
           <path
             id="g-svg-99"
             fill="rgba(128,247,247,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,280 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="280"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,320)">
+        <g>
           <path
             id="g-svg-100"
             fill="rgba(128,249,249,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,320 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="320"
             width="40"
             height="40"
           />
         </g>
-        <g transform="matrix(1,0,0,1,360,360)">
+        <g>
           <path
             id="g-svg-101"
             fill="rgba(128,252,252,1)"
-            d="M 0,0 l 40,0 l 0,40 l-40 0 z"
+            d="M 360,360 l 40,0 l 0,40 l-40 0 z"
+            x="360"
+            y="360"
             width="40"
             height="40"
           />
diff --git a/__tests__/integration/utils/offscreen-canvas-context.ts b/__tests__/integration/utils/offscreen-canvas-context.ts
index 25cf474af..0edb46b47 100644
--- a/__tests__/integration/utils/offscreen-canvas-context.ts
+++ b/__tests__/integration/utils/offscreen-canvas-context.ts
@@ -121,6 +121,7 @@ export class OffscreenCanvasContext {
   }
 
   measureText(text: string): TextMetrics {
+    // @ts-ignore
     return {
       width: measureText(text, this.fontSize),
       actualBoundingBoxAscent: 0,
diff --git a/__tests__/performance/scripts/main.ts b/__tests__/performance/scripts/main.ts
index 3a76f71dc..12599d798 100644
--- a/__tests__/performance/scripts/main.ts
+++ b/__tests__/performance/scripts/main.ts
@@ -39,7 +39,7 @@ const Cases = {
   Path: () => {
     return new Path({
       style: {
-        path: [
+        d: [
           ['M', 100 * Math.random(), 100 * Math.random()],
           ['L', 100 * Math.random(), 100 * Math.random()],
           ['L', 100 * Math.random(), 100 * Math.random()],
diff --git a/__tests__/unit/util/scale-to-pixel.spec.ts b/__tests__/unit/util/scale-to-pixel.spec.ts
index ad3cc306c..6f95203ef 100644
--- a/__tests__/unit/util/scale-to-pixel.spec.ts
+++ b/__tests__/unit/util/scale-to-pixel.spec.ts
@@ -23,7 +23,7 @@ describe('scale to pixel', () => {
     // height: 10
     const path1 = new Path({
       style: {
-        path: 'M0,0 L10,10 L20,0 Z',
+        d: 'M0,0 L10,10 L20,0 Z',
       },
     });
     const path1Bbox = path1.getBBox();
@@ -56,7 +56,7 @@ describe('scale to pixel', () => {
     // height: 10
     const path1 = new Path({
       style: {
-        path: 'M0,0 L10,10 L20,0 Z',
+        d: 'M0,0 L10,10 L20,0 Z',
       },
     });
     const path1Bbox = path1.getBBox();
diff --git a/__tests__/utils/render.ts b/__tests__/utils/render.ts
index b7492a72f..c378f2911 100644
--- a/__tests__/utils/render.ts
+++ b/__tests__/utils/render.ts
@@ -23,7 +23,7 @@ export function createCanvas(size = 300, renderer = 'canvas', grid = false) {
       path.push(['M', i, 0], ['L', i, size]);
       path.push(['M', 0, i], ['L', size, i]);
     }
-    canvas.appendChild(new Path({ style: { lineWidth: 0.5, stroke: '#ddd', lineDash: [gap / 4, gap / 4], path } }));
+    canvas.appendChild(new Path({ style: { lineWidth: 0.5, stroke: '#ddd', lineDash: [gap / 4, gap / 4], d: path } }));
   }
 
   return canvas;
diff --git a/package.json b/package.json
index 5905fba13..0cc624e53 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/component",
-  "version": "1.0.1-beta.0",
+  "version": "2.0.0",
   "description": "Visualization components for AntV, based on G.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -44,16 +44,16 @@
     "component"
   ],
   "dependencies": {
-    "@antv/g": "^5.18.6",
+    "@antv/g": "^6.0.0",
     "@antv/scale": "^0.4.3",
     "@antv/util": "^3.3.5",
     "svg-path-parser": "^1.1.0"
   },
   "devDependencies": {
-    "@antv/g-canvas": "^1.11.5",
-    "@antv/g-plugin-control": "^1.9.6",
-    "@antv/g-svg": "^1.10.20",
-    "@antv/g-webgl": "^1.9.8",
+    "@antv/g-canvas": "^2.0.0",
+    "@antv/g-plugin-control": "^2.0.0",
+    "@antv/g-svg": "^2.0.0",
+    "@antv/g-webgl": "^2.0.0",
     "@babel/plugin-proposal-decorators": "^7.20.5",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
diff --git a/src/animation/utils.ts b/src/animation/utils.ts
index cbbdbc7cf..ad1a04fe4 100644
--- a/src/animation/utils.ts
+++ b/src/animation/utils.ts
@@ -96,25 +96,26 @@ export function transitionShape(
   const middle = Math.ceil(+duration / 2);
   const offset = +duration / 4;
 
-  const getPosition = (shape: DisplayObject) => {
-    if (shape.nodeName === 'circle') {
-      const [cx, cy] = shape.getLocalPosition();
-      const r = shape.attr('r');
-      return [cx - r, cy - r];
-    }
-    return shape.getLocalPosition();
-  };
-
-  const [sx, sy] = getPosition(source);
-  const [ex, ey] = getPosition(target);
+  const {
+    center: [sx, sy],
+  } = source.getGeometryBounds();
+  const {
+    center: [ex, ey],
+  } = target.getGeometryBounds();
   const [mx, my] = [(sx + ex) / 2 - sx, (sy + ey) / 2 - sy];
 
   const { opacity: so = 1 } = source.style;
   const { opacity: to = 1 } = target.style;
+
+  const st = source.style.transform || '';
+  const tt = target.style.transform || '';
+  // const st = source.style._transform || '';
+  // const tt = target.style._transform || '';
+
   const sourceAnimation = source.animate(
     [
-      { opacity: so, transform: 'translate(0, 0)' },
-      { opacity: 0, transform: `translate(${mx}, ${my})` },
+      { opacity: so, transform: `translate(0, 0) ${st}` },
+      { opacity: 0, transform: `translate(${mx}, ${my}) ${st}` },
     ],
     {
       fill: 'both',
@@ -124,8 +125,8 @@ export function transitionShape(
   );
   const targetAnimation = target.animate(
     [
-      { opacity: 0, transform: `translate(${-mx}, ${-my})`, offset: 0.01 },
-      { opacity: to, transform: 'translate(0, 0)' },
+      { opacity: 0, transform: `translate(${-mx}, ${-my}) ${tt}`, offset: 0.01 },
+      { opacity: to, transform: `translate(0, 0) ${tt}` },
     ],
     {
       fill: 'both',
diff --git a/src/index.ts b/src/index.ts
index 02c8391dc..c7e66d288 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,3 @@
-import { runtime } from '@antv/g';
-
-runtime.enableCSSParsing = false;
-
 // ui
 export * from './ui';
 
diff --git a/src/ui/axis/constant.ts b/src/ui/axis/constant.ts
index e35193c92..c7827e391 100644
--- a/src/ui/axis/constant.ts
+++ b/src/ui/axis/constant.ts
@@ -37,8 +37,7 @@ export const AXIS_BASE_DEFAULT_ATTR: Partial<AxisBaseStyleProps> = {
   lineArrow: () =>
     new Path({
       style: {
-        path: [['M', 10, 10], ['L', -10, 0], ['L', 10, -10], ['L', 0, 0], ['L', 10, 10], ['Z']],
-        anchor: '0.5 0.5',
+        d: [['M', 10, 10], ['L', -10, 0], ['L', 10, -10], ['L', 0, 0], ['L', 10, 10], ['Z']],
         fill: 'black',
         transformOrigin: 'center',
       },
diff --git a/src/ui/axis/guides/labels.ts b/src/ui/axis/guides/labels.ts
index de73ea300..8878ffe0e 100644
--- a/src/ui/axis/guides/labels.ts
+++ b/src/ui/axis/guides/labels.ts
@@ -187,24 +187,30 @@ function overlapHandler(attr: Required<AxisStyleProps>) {
   });
 }
 
-function renderLabel(container: DisplayObject, datum: any, data: any[], style: any, attr: Required<AxisStyleProps>) {
+function renderLabel(
+  container: DisplayObject,
+  datum: any,
+  data: any[],
+  style: any,
+  attr: Required<AxisStyleProps>
+): DisplayObject {
   const index = data.indexOf(datum);
   const label = select(container)
     .append(formatter(datum, index, data, attr))
     .attr('className', CLASS_NAMES.labelItem.name)
     .node();
   const [labelStyle, { transform, ...groupStyle }] = splitStyle(getCallbackStyle(style, [datum, index, data]));
-  percentTransform(container, transform);
 
-  const rotate = getLabelRotation(datum, container, attr);
-  container.setLocalEulerAngles(+rotate);
+  percentTransform(label, transform);
+  const rotate = getLabelRotation(datum, label, attr);
+  if (!label.getLocalEulerAngles()) {
+    label.setLocalEulerAngles(rotate);
+  }
 
   applyTextStyle(label, {
     ...getLabelStyle(datum.value, rotate, attr),
     ...labelStyle,
   });
-  // todo G transform 存在问题，需要二次设置
-  percentTransform(container, transform);
   container.attr(groupStyle);
   return label;
 }
@@ -227,24 +233,30 @@ export function renderLabels(
           .attr('className', CLASS_NAMES.label.name)
           .transition(function (datum) {
             renderLabel(this, datum, data, style, attr);
-            this.attr(getLabelPos(datum, data, attr));
-            this.__bbox__ = datum.bbox;
+            const { x, y } = getLabelPos(datum, data, attr);
+            // .axis-label
+            this.style.transform = `translate(${x}, ${y})`;
             return null;
           })
-          .call(() => overlapHandler.call(container, attr)),
+          .call(() => {
+            overlapHandler.call(container, attr);
+          }),
       (update) =>
         update
           .transition(function (datum) {
             const prevLabel = this.querySelector(CLASS_NAMES.labelItem.class);
             const label = renderLabel(this, datum, data, style, attr);
             const shapeAnimation = transitionShape(prevLabel, label, animate.update);
-            const animation = transition(this, getLabelPos(datum, data, attr), animate.update);
-            this.__bbox__ = datum.bbox;
+            const { x, y } = getLabelPos(datum, data, attr);
+            const animation = transition(this, { transform: `translate(${x}, ${y})` }, animate.update);
             return [...shapeAnimation, animation];
+            // return [animation];
           })
           .call((selection) => {
             const transitions = get(selection, '_transitions').flat().filter(defined) as IAnimation[];
-            onAnimatesFinished(transitions, () => overlapHandler.call(container, attr));
+            onAnimatesFinished(transitions, () => {
+              overlapHandler.call(container, attr);
+            });
           }),
       (exit) =>
         exit.transition(function () {
diff --git a/src/ui/axis/guides/line.ts b/src/ui/axis/guides/line.ts
index 5639300f1..2bc587958 100644
--- a/src/ui/axis/guides/line.ts
+++ b/src/ui/axis/guides/line.ts
@@ -101,14 +101,14 @@ function renderArc(
 
   return container
     .selectAll(CLASS_NAMES.line.class)
-    .data([{ path: getArcPath(startAngle, endAngle, ...center, radius) }], (d, i) => i)
+    .data([{ d: getArcPath(startAngle, endAngle, ...center, radius) }], (d, i) => i)
     .join(
       (enter) =>
         enter
           .append('path')
           .attr('className', CLASS_NAMES.line.name)
           .styles(attr)
-          .styles({ path: (d: any) => d.path }),
+          .styles({ d: (d: any) => d.d }),
       (update) =>
         update
           .transition(function () {
@@ -121,7 +121,7 @@ function renderArc(
             if (animation) {
               const layout = () => {
                 const data = get(this.attributes, '__keyframe_data__') as Parameters<typeof getArcPath>;
-                this.style.path = getArcPath(...data);
+                this.style.d = getArcPath(...data);
               };
               animation.onframe = layout;
               animation.onfinish = layout;
diff --git a/src/ui/axis/guides/ticks.ts b/src/ui/axis/guides/ticks.ts
index 7473d4d8f..a991b2b5c 100644
--- a/src/ui/axis/guides/ticks.ts
+++ b/src/ui/axis/guides/ticks.ts
@@ -77,7 +77,7 @@ function createTick(
   const tick = createTickEl(select(this), datum, index, data, attr);
   applyTickStyle(datum, index, data, tick, this, attr, tickAttr);
   const [x, y] = getValuePos(datum.value, attr);
-  return transition(this, { x, y }, animate);
+  return transition(this, { transform: `translate(${x}, ${y})` }, animate);
 }
 
 export function renderTicks(
diff --git a/src/ui/axis/guides/title.ts b/src/ui/axis/guides/title.ts
index 8566036ca..82903a43e 100644
--- a/src/ui/axis/guides/title.ts
+++ b/src/ui/axis/guides/title.ts
@@ -32,7 +32,9 @@ function getTitlePosition(
     halfExtents: [mainHalfWidth, mainHalfHeight],
   } = mainGroup.node().getLocalBounds();
 
-  const [titleHalfWidth, titleHalfHeight] = titleGroup.node().getLocalBounds().halfExtents;
+  const {
+    halfExtents: [titleHalfWidth, titleHalfHeight],
+  } = titleGroup.node().getLocalBounds();
 
   let [x, y] = [mainX + mainHalfWidth, mainY + mainHalfHeight];
 
@@ -49,17 +51,16 @@ function getTitlePosition(
 
   if (pos.includes('t')) y -= mainHalfHeight + titleHalfHeight + spacingTop;
   if (pos.includes('r')) x += mainHalfWidth + titleHalfWidth + spacingRight;
-  if (pos.includes('l')) x -= mainHalfWidth + titleHalfWidth * 2 + spacingLeft;
-  if (pos.includes('b')) y += mainHalfHeight + titleHalfHeight * 2 + spacingBottom;
+  if (pos.includes('l')) x -= mainHalfWidth + titleHalfWidth + spacingLeft;
+  if (pos.includes('b')) y += mainHalfHeight + titleHalfHeight + spacingBottom;
 
   return { x, y };
 }
 
 function inferTransform(n: DisplayObject, direction: string, position: string): string {
-  const node = n.cloneNode(true);
-  node.style.transform = 'scale(1, 1)';
-  node.style.transform = 'none';
-  const { height } = node.getBBox();
+  const { halfExtents } = n.getGeometryBounds();
+  const height = halfExtents[1] * 2;
+
   if (direction === 'vertical') {
     if (position === 'left') return `rotate(-90) translate(0, ${height / 2})`;
     if (position === 'right') return `rotate(-90) translate(0, -${height / 2})`;
@@ -75,12 +76,12 @@ function applyTitleStyle(
   animate: GenericAnimation
 ) {
   const style = subStyleProps(attr, 'title');
-  const [titleStyle, { transform: specified, ...groupStyle }] = splitStyle(style);
+  const [titleStyle, { transform: specified, transformOrigin, ...groupStyle }] = splitStyle(style);
 
-  title.styles(titleStyle);
   group.styles(groupStyle);
 
   const transform = specified || inferTransform(title.node(), titleStyle.direction, titleStyle.position);
+  title.styles({ ...titleStyle, transformOrigin });
   percentTransform(title.node(), transform);
 
   const { x, y } = getTitlePosition(
@@ -90,8 +91,7 @@ function applyTitleStyle(
     attr
   );
 
-  const animation = transition(group.node(), { x, y }, animate);
-  percentTransform(title.node(), transform);
+  const animation = transition(group.node(), { transform: `translate(${x}, ${y})` }, animate);
   return animation;
 }
 
diff --git a/src/ui/axis/overlap/autoEllipsis.ts b/src/ui/axis/overlap/autoEllipsis.ts
index cc10eb8fc..2ad3044f1 100644
--- a/src/ui/axis/overlap/autoEllipsis.ts
+++ b/src/ui/axis/overlap/autoEllipsis.ts
@@ -3,7 +3,6 @@ import type { DisplayObject } from '../../../shapes';
 import { Text } from '../../../shapes';
 import { getFont, measureTextWidth } from '../../../util';
 import { AxisStyleProps, EllipsisOverlapCfg } from '../types';
-import { getBBox } from '../utils/bounds';
 import { boundTest } from '../utils/test';
 
 export type Utils = {
@@ -40,7 +39,7 @@ export default function ellipseLabels(
   if (isNil(max) || max === Infinity) {
     max = Math.max.apply(
       null,
-      labels.map((d) => getBBox(d).width)
+      labels.map((d) => d.getBBox().width)
     );
   }
   // Generally, 100 ticks cost less than 300ms. If cost time exceed, means ticks count is too large to see.
diff --git a/src/ui/axis/overlap/autoHide.ts b/src/ui/axis/overlap/autoHide.ts
index e04fc4756..3dbe0c6bc 100644
--- a/src/ui/axis/overlap/autoHide.ts
+++ b/src/ui/axis/overlap/autoHide.ts
@@ -3,7 +3,6 @@ import { defined, getLocalBBox, hide } from '../../../util';
 import { isAxisHorizontal, isAxisVertical } from '../guides/line';
 import type { AxisStyleProps, HideOverlapCfg } from '../types';
 import { boundTest } from '../utils/test';
-import { getBBox } from '../utils/bounds';
 
 type Hide = (item: DisplayObject) => void;
 type Show = (item: DisplayObject) => void;
@@ -32,7 +31,7 @@ export default function hideLabels(
   const source = labels.slice();
   let target = labels.slice();
 
-  const minLabelWidth = Math.min(1, ...labels.map((d) => getBBox(d).width));
+  const minLabelWidth = Math.min(1, ...labels.map((d) => d.getBBox().width));
 
   if (attr.type === 'linear' && (isAxisHorizontal(attr) || isAxisVertical(attr))) {
     const minX = getLocalBBox(labels[0]).left;
diff --git a/src/ui/axis/utils/bounds.ts b/src/ui/axis/utils/bounds.ts
index 6b2329760..d25bd7f46 100644
--- a/src/ui/axis/utils/bounds.ts
+++ b/src/ui/axis/utils/bounds.ts
@@ -78,6 +78,9 @@ export class Bounds {
   }
 }
 
+/**
+ * Can't use getBounds directly since we should not use AABB here.
+ */
 export function getBounds(item: DisplayObject<any>, margin?: SeriesAttr) {
   const angle = item.getEulerAngles() || 0;
   item.setEulerAngles(0);
@@ -85,8 +88,8 @@ export function getBounds(item: DisplayObject<any>, margin?: SeriesAttr) {
   const {
     min: [x, y],
     max: [right, bottom],
-  } = item.getLocalBounds();
-  const { width: w, height: h } = getBBox(item);
+  } = item.getBounds();
+  const { width: w, height: h } = item.getBBox();
 
   let height = h;
   let dx = 0;
@@ -122,11 +125,6 @@ export function getBounds(item: DisplayObject<any>, margin?: SeriesAttr) {
   const [t = 0, r = 0, b = t, l = r] = parseSeriesAttr(margin);
   const bounds = new Bounds((dx += x) - l, (dy += y) - t, dx + w + r, dy + height + b);
   item.setEulerAngles(angle);
-  return bounds.rotatedPoints(degToRad(angle), anchorX, anchorY);
-}
 
-export function getBBox(shape: DisplayObject): DOMRect {
-  // @ts-ignore
-  if (shape.__bbox__) return shape.__bbox__;
-  return shape.getBBox();
+  return bounds.rotatedPoints(degToRad(angle), anchorX, anchorY);
 }
diff --git a/src/ui/axis/utils/test.ts b/src/ui/axis/utils/test.ts
index 0ec3e46d6..dddabb1b7 100644
--- a/src/ui/axis/utils/test.ts
+++ b/src/ui/axis/utils/test.ts
@@ -57,8 +57,10 @@ export function boundTest<T extends DisplayObject>(items: T[], attr: AxisStylePr
   };
 
   const testIntersect = (prevItem: T, currItem: T) => {
-    if (!prevItem) return true;
-    return !intersect(prevItem, currItem, parseSeriesAttr(margin));
+    if (!prevItem || !prevItem.firstChild) return true;
+    // Get the first child of the item(Text).
+    // @ts-ignore
+    return !intersect(prevItem.firstChild, currItem.firstChild, parseSeriesAttr(margin));
   };
 
   for (const curr of items) {
diff --git a/src/ui/breadcrumb/index.ts b/src/ui/breadcrumb/index.ts
index a562cf128..902366f67 100644
--- a/src/ui/breadcrumb/index.ts
+++ b/src/ui/breadcrumb/index.ts
@@ -69,8 +69,7 @@ export class Breadcrumb extends Component<BreadcrumbStyleProps> {
       const shape = new Tag({
         className: 'breadcrumb-item',
         style: {
-          x: cursorX,
-          y: cursorY,
+          transform: `translate(${cursorX}, ${cursorY})`,
           ...tagStyle,
           text: isNil(datum.text) ? datum.id : datum.text,
           ...pick(datum, ['marker']),
@@ -88,7 +87,7 @@ export class Breadcrumb extends Component<BreadcrumbStyleProps> {
       if (!isNil(width)) {
         const avaliableWidth = width! - right;
         if (cursorX > avaliableWidth) {
-          shape.attr({ x: 0, y: cursorY + shapeH });
+          shape.attr({ transform: `translateY(${cursorY + shapeH})` });
           // 更新光标
           cursorX = shapeW;
           cursorY += shapeH;
diff --git a/src/ui/button/index.ts b/src/ui/button/index.ts
index efce63dd9..563a9ce20 100644
--- a/src/ui/button/index.ts
+++ b/src/ui/button/index.ts
@@ -95,8 +95,10 @@ export class Button extends Component<ButtonStyleProps> {
 
   // @todo 处理 markerAlign='right' 的场景. 方案: left marker & right marker 处理为两个 shape, 互相不干扰
   public render(attributes: Required<ButtonStyleProps>, container: Group) {
-    const { text = '', padding = 0, markerSymbol, markerSpacing = 0 } = attributes;
-    container.attr('cursor', this.state === 'disabled' ? 'not-allowed' : 'pointer');
+    const { text = '', padding = 0, markerSymbol, markerSpacing = 0, x = 0, y = 0 } = attributes;
+    container.attr({
+      cursor: this.state === 'disabled' ? 'not-allowed' : 'pointer',
+    });
     const [pt, pr, pb, pl] = parseSeriesAttr(padding);
     const height = this.buttonHeight;
 
@@ -106,8 +108,8 @@ export class Button extends Component<ButtonStyleProps> {
     const style = {
       ...markerStyle,
       symbol: markerSymbol,
-      x: pl + markerSize / 2,
-      y: height / 2,
+      x: x + pl + markerSize / 2,
+      y: y + height / 2,
       size: markerSize,
     };
     const markerShape = maybeAppend(container, '.marker', () => new Marker({ className: 'marker', style }))
@@ -120,8 +122,8 @@ export class Button extends Component<ButtonStyleProps> {
     this.textShape = maybeAppend(container, '.text', 'text')
       .attr('className', 'text')
       .styles({
-        x: markerSize ? bounds.max[0] + markerSpacing : pl,
-        y: height / 2,
+        x: x + (markerSize ? bounds.max[0] + markerSpacing : pl),
+        y: y + height / 2,
         ...textStyle,
         text,
         textAlign: 'left',
@@ -141,6 +143,8 @@ export class Button extends Component<ButtonStyleProps> {
       .styles({
         zIndex: -1,
         ...buttonStyle,
+        x,
+        y,
         height,
         width: pl + (markerSize ? markerSize + markerSpacing : 0) + textBounds.halfExtents[0] * 2 + pr,
       });
diff --git a/src/ui/button/types.ts b/src/ui/button/types.ts
index 01ec2fe60..c0ec59659 100644
--- a/src/ui/button/types.ts
+++ b/src/ui/button/types.ts
@@ -13,6 +13,8 @@ export type ButtonStyleProps = GroupStyleProps &
       Partial<PrefixStyleProps<RectStyleProps, 'button'>> &
       Partial<PrefixStyleProps<Omit<MarkerStyleProps, 'symbol'>, 'marker'>>
   > & {
+    x?: number;
+    y?: number;
     type?: 'primary' | 'dashed' | 'link' | 'text' | 'default';
     /**
      * @title 大小
diff --git a/src/ui/checkbox/constant.ts b/src/ui/checkbox/constant.ts
index 57f24511b..4a94aa632 100644
--- a/src/ui/checkbox/constant.ts
+++ b/src/ui/checkbox/constant.ts
@@ -42,7 +42,7 @@ const CHECKED_SHAPE_PATH = [
 ] as any;
 
 export const CHECKED_SHAPE_STYLE = {
-  path: CHECKED_SHAPE_PATH,
+  d: CHECKED_SHAPE_PATH,
   lineWidth: 1,
   cursor: 'pointer',
 };
diff --git a/src/ui/checkbox/index.ts b/src/ui/checkbox/index.ts
index dea11041f..2d0b9d29c 100644
--- a/src/ui/checkbox/index.ts
+++ b/src/ui/checkbox/index.ts
@@ -30,8 +30,6 @@ export class Checkbox extends Component<CheckboxStyleProps> {
 
   constructor(options: CheckboxOptions) {
     super(options, {
-      x: 0,
-      y: 0,
       labelText: '',
       spacing: 4,
       checked: false,
diff --git a/src/ui/crosshair/base.ts b/src/ui/crosshair/base.ts
index 59573f6f3..fe6360810 100644
--- a/src/ui/crosshair/base.ts
+++ b/src/ui/crosshair/base.ts
@@ -43,7 +43,7 @@ export abstract class CrosshairBase<T extends CrosshairBaseStyleProps> extends C
     const style = subStyleProps(this.attributes, 'line');
     return {
       ...style,
-      path: this.crosshairPath,
+      d: this.crosshairPath,
     };
   }
 
diff --git a/src/ui/crosshair/circle.ts b/src/ui/crosshair/circle.ts
index c7161647f..1751d5761 100644
--- a/src/ui/crosshair/circle.ts
+++ b/src/ui/crosshair/circle.ts
@@ -34,7 +34,7 @@ export class CircleCrosshair extends CrosshairBase<Required<CircleCrosshairStyle
     } = this.attributes;
 
     const path = this.createCirclePath(((lx - cx) ** 2 + (ly - cy) ** 2) ** 0.5) as any;
-    this.crosshairShape.attr({ path });
+    this.crosshairShape.attr({ d: path });
   }
 
   protected adjustLayout() {
diff --git a/src/ui/crosshair/polygon.ts b/src/ui/crosshair/polygon.ts
index f548416bb..9cc5cb28f 100644
--- a/src/ui/crosshair/polygon.ts
+++ b/src/ui/crosshair/polygon.ts
@@ -54,7 +54,7 @@ export class PolygonCrosshair extends CrosshairBase<Required<PolygonCrosshairSty
     if (!ix || !iy) return;
     const equivalentRadius = lineLen(center, [lx, ly]) / lineLen(center, [ix, iy]);
     const path = this.createPolygonPath(equivalentRadius) as any;
-    this.crosshairShape.attr({ path });
+    this.crosshairShape.attr({ d: path });
   }
 
   protected adjustLayout() {
diff --git a/src/ui/grid/index.ts b/src/ui/grid/index.ts
index be7eb8c0b..6a61768b4 100644
--- a/src/ui/grid/index.ts
+++ b/src/ui/grid/index.ts
@@ -79,7 +79,7 @@ function renderGridLine(
   const lines = data.map((item, idx) => {
     return {
       id: item.id || `grid-line-${idx}`,
-      path: getLinePath(item.points, attr),
+      d: getLinePath(item.points, attr),
     };
   });
   return container
@@ -90,7 +90,7 @@ function renderGridLine(
         enter.append('path').each(function (datum, index) {
           const lineStyle = getCallbackValue(
             getPrimitiveAttributes({
-              path: datum.path,
+              d: datum.d,
               ...style,
             }),
             [datum, index, lines]
@@ -108,7 +108,7 @@ function renderGridLine(
         update.transition(function (datum, index) {
           const lineStyle = getCallbackValue(
             getPrimitiveAttributes({
-              path: datum.path,
+              d: datum.d,
               ...style,
             }),
             [datum, index, lines]
@@ -134,7 +134,7 @@ function renderAlternateRegion(container: Selection<Group>, data: GridStyleProps
   for (let idx = 0; idx < data.length - 1; idx++) {
     const [prev, curr] = [data[idx].points, data[idx + 1].points];
     const path = connectPaths(prev, curr, style);
-    regions.push({ path, fill: getColor(idx) });
+    regions.push({ d: path, fill: getColor(idx) });
   }
 
   return container
diff --git a/src/ui/indicator/indicator.ts b/src/ui/indicator/indicator.ts
index a926133cc..edbffb060 100644
--- a/src/ui/indicator/indicator.ts
+++ b/src/ui/indicator/indicator.ts
@@ -58,7 +58,7 @@ export class Indicator extends Component<IndicatorStyleProps> {
 
     this.background = select(this.group)
       .maybeAppendByClassName(CLASS_NAMES.background, 'path')
-      .styles({ ...style, path });
+      .styles({ ...style, d: path });
     this.group.appendChild(this.label.node());
   }
 
@@ -78,7 +78,8 @@ export class Indicator extends Component<IndicatorStyleProps> {
 
   private adjustLayout() {
     const [dx, dy] = this.point;
-    this.group.attr('x', -dx).attr('y', -dy);
+    const { x, y } = this.attributes;
+    this.group.attr('transform', `translate(${x - dx}, ${y - dy})`);
   }
 
   private getPath(position: Position, bbox: BBox) {
diff --git a/src/ui/indicator/types.ts b/src/ui/indicator/types.ts
index 9cca3314a..0f98134e8 100644
--- a/src/ui/indicator/types.ts
+++ b/src/ui/indicator/types.ts
@@ -8,6 +8,8 @@ export type Position = 'top' | 'right' | 'bottom' | 'left';
 export type IndicatorStyleProps<T = any> = GroupStyleProps &
   PrefixObject<PathStyleProps, 'background'> &
   PrefixObject<Omit<TextStyleProps, 'text'>, 'label'> & {
+    x: number;
+    y: number;
     labelText?: T;
     /** position of indicator related to pointer  */
     position?: Position;
diff --git a/src/ui/layout/layout.ts b/src/ui/layout/layout.ts
index 928bfabc5..e8e81a09d 100644
--- a/src/ui/layout/layout.ts
+++ b/src/ui/layout/layout.ts
@@ -71,6 +71,9 @@ export class Layout extends Group {
     if (!this.attributes.display || !this.isConnected) return;
     if (this.children.some((child) => !child.isConnected)) return;
     try {
+      const { x, y } = this.attributes;
+      this.style.transform = `translate(${x}, ${y})`;
+
       const bboxes = calcLayout(
         this.getAvailableSpace(),
         this.children.map((child) => (child as DisplayObject).getBBox()),
@@ -79,7 +82,7 @@ export class Layout extends Group {
 
       this.children.forEach((child, index) => {
         const { x, y } = bboxes[index];
-        (child as DisplayObject).attr({ x, y });
+        child.style.transform = `translate(${x}, ${y})`;
       });
     } catch (e) {
       // do nothing
diff --git a/src/ui/layout/types.ts b/src/ui/layout/types.ts
index 1da8bf5e8..a9b7a5d8f 100644
--- a/src/ui/layout/types.ts
+++ b/src/ui/layout/types.ts
@@ -4,6 +4,8 @@ import type { SeriesAttr } from '../../util/series';
 
 export type LayoutStyleProps = GroupStyleProps &
   LayoutElementConfig & {
+    x?: number;
+    y?: number;
     width: number;
     height: number;
     margin?: SeriesAttr;
diff --git a/src/ui/legend/category.ts b/src/ui/legend/category.ts
index b33754cf7..ad61c5a0d 100644
--- a/src/ui/legend/category.ts
+++ b/src/ui/legend/category.ts
@@ -44,7 +44,7 @@ export class Category extends Component<CategoryStyleProps> {
     const itemStyle = { ...partialItemStyle, width, height, x: 0, y: 0 } as CategoryStyleProps;
     this.itemsGroup = container
       .maybeAppendByClassName<Group>(CLASS_NAMES.itemsGroup, 'g')
-      .styles({ x, y, ...groupStyle });
+      .styles({ ...groupStyle, transform: `translate(${x}, ${y})` });
     const that = this;
     this.itemsGroup
       .selectAll(CLASS_NAMES.items.class)
@@ -66,7 +66,7 @@ export class Category extends Component<CategoryStyleProps> {
     const { showTitle } = this.attributes;
     if (showTitle) {
       const { x, y } = this.title.node<Title>().getAvailableSpace();
-      this.itemsGroup.node().setLocalPosition(x, y);
+      this.itemsGroup.node().style.transform = `translate(${x}, ${y})`;
     }
   }
 
@@ -84,8 +84,9 @@ export class Category extends Component<CategoryStyleProps> {
   }
 
   render(attributes: Required<CategoryStyleProps>, container: Group) {
-    const { width, height } = attributes;
+    const { width, height, x = 0, y = 0 } = this.attributes;
     const ctn = select(container);
+    container.style.transform = `translate(${x}, ${y})`;
 
     this.renderTitle(ctn, width!, height!);
 
diff --git a/src/ui/legend/category/item.ts b/src/ui/legend/category/item.ts
index 424304673..c697efd56 100644
--- a/src/ui/legend/category/item.ts
+++ b/src/ui/legend/category/item.ts
@@ -42,6 +42,8 @@ export type CategoryItemStyleProps = GroupStyleProps &
     valueText?: ExtendDisplayObject;
     // if width and height not specific, set it to actual space occurred
     width?: number;
+    x?: number;
+    y?: number;
   };
 
 export type CategoryItemOptions = ComponentOptions<CategoryItemStyleProps>;
@@ -196,7 +198,8 @@ export class CategoryItem extends Component<CategoryItemStyleProps> {
 
       // record the scale of marker
       this.markerGroup.node().scale(1 / this.markerGroup.node().getScale()[0]);
-      scaleToPixel(this.markerGroup.node(), this.scaleSize, true);
+      const scale = scaleToPixel(this.markerGroup.node(), this.scaleSize, true);
+      this.markerGroup.node().style._transform = `scale(${scale})`;
     });
   }
 
@@ -231,18 +234,25 @@ export class CategoryItem extends Component<CategoryItemStyleProps> {
       },
     } = this;
     const halfHeight = height / 2;
-    this.markerGroup.styles({ x: markerX, y: halfHeight });
-    this.labelGroup.styles({ x: labelX, y: halfHeight });
+
+    // console.log(this.markerGroup.node().style._transform);
+
+    this.markerGroup.styles({
+      transform: `translate(${markerX}, ${halfHeight})${this.markerGroup.node().style._transform}`,
+    });
+    this.labelGroup.styles({ transform: `translate(${labelX}, ${halfHeight})` });
 
     ellipsisIt(this.labelGroup.select(CLASS_NAMES.label.class).node(), Math.ceil(labelWidth));
     if (this.showValue) {
-      this.valueGroup.styles({ x: valueX, y: halfHeight });
+      this.valueGroup.styles({ transform: `translate(${valueX}, ${halfHeight})` });
       ellipsisIt(this.valueGroup.select(CLASS_NAMES.value.class).node(), Math.ceil(valueWidth));
     }
   }
 
   public render(attributes: CategoryItemStyleProps, container: Group) {
     const ctn = select(container);
+    const { x = 0, y = 0 } = attributes;
+    ctn.styles({ transform: `translate(${x}, ${y})` });
     this.renderMarker(ctn);
     this.renderLabel(ctn);
     this.renderValue(ctn);
diff --git a/src/ui/legend/category/items.ts b/src/ui/legend/category/items.ts
index 32b467176..7a09390cc 100644
--- a/src/ui/legend/category/items.ts
+++ b/src/ui/legend/category/items.ts
@@ -36,6 +36,8 @@ export type CategoryItemsStyleProps = GroupStyleProps &
     data: CategoryItemsDatum[];
     orientation?: 'horizontal' | 'vertical';
     layout?: 'flex' | 'grid';
+    x?: number;
+    y?: number;
     width?: number;
     height?: number;
     gridRow?: number;
diff --git a/src/ui/legend/continuous.ts b/src/ui/legend/continuous.ts
index d391cf31d..eea1a5bbd 100644
--- a/src/ui/legend/continuous.ts
+++ b/src/ui/legend/continuous.ts
@@ -92,7 +92,9 @@ export class Continuous extends Component<ContinuousStyleProps> {
     /** label */
 
     /** content */
-    const contentGroup = select(container).maybeAppendByClassName(CLASS_NAMES.contentGroup, 'g').styles({ x, y });
+    const contentGroup = select(container)
+      .maybeAppendByClassName(CLASS_NAMES.contentGroup, 'g')
+      .styles({ transform: `translate(${x}, ${y})` });
 
     const labelGroup = contentGroup.maybeAppendByClassName(CLASS_NAMES.labelGroup, 'g').styles({ zIndex: 1 });
     ifShow(!!showLabel, labelGroup, (group) => {
@@ -268,8 +270,7 @@ export class Continuous extends Component<ContinuousStyleProps> {
     const { length, size } = this.ribbonShape;
     const style: Required<RibbonStyleProps> = deepAssign(
       {
-        x,
-        y,
+        transform: `translate(${x}, ${y})`,
         length,
         size,
         type,
@@ -344,22 +345,6 @@ export class Continuous extends Component<ContinuousStyleProps> {
     this.setHandlePosition('end', max);
   }
 
-  private adjustTitle() {
-    const { titlePosition, orientation } = this.attributes;
-    const [title] = this.getElementsByClassName(CLASS_NAMES.title.name);
-    const handle: Handle = this.handlesGroup.select(`.${this.getHandleClassName('start')}`).node();
-    if (!title || !handle) return;
-    if (titlePosition !== 'top-left' || orientation !== 'horizontal') return;
-    const {
-      min: [handleX],
-    } = handle.getLocalBounds();
-    const {
-      min: [titleX],
-    } = title.getLocalBounds();
-    const diffX = handleX - titleX;
-    title.style.x = +(this.style.x || 0) + diffX;
-  }
-
   private cacheHandleBBox: DOMRect | null = null;
 
   private get handleBBox() {
@@ -391,7 +376,7 @@ export class Continuous extends Component<ContinuousStyleProps> {
       [ribbonX + ribbonSize * this.handleOffsetRatio, ribbonY + offset]
     );
     const handle: Handle = this.handlesGroup.select(`.${this.getHandleClassName(type)}`).node();
-    handle?.update({ x, y, formatter: handleFormatter });
+    handle?.update({ transform: `translate(${x}, ${y})`, formatter: handleFormatter });
   }
 
   private renderIndicator(container: Selection) {
diff --git a/src/ui/legend/continuous/ribbon.ts b/src/ui/legend/continuous/ribbon.ts
index ca02373a3..a7bb5c3b7 100644
--- a/src/ui/legend/continuous/ribbon.ts
+++ b/src/ui/legend/continuous/ribbon.ts
@@ -93,7 +93,7 @@ function getClipPath(attr: RequiredRibbonStyleProps): any[] {
 
 function renderTrack(container: Selection, attr: RequiredRibbonStyleProps) {
   const style = subStyleProps(attr, 'track');
-  container.maybeAppendByClassName(CLASS_NAMES.track, 'path').styles({ path: getTrackPath(attr), ...style });
+  container.maybeAppendByClassName(CLASS_NAMES.track, 'path').styles({ d: getTrackPath(attr), ...style });
 }
 
 function renderSelection(container: Selection, attr: RequiredRibbonStyleProps) {
@@ -102,12 +102,12 @@ function renderSelection(container: Selection, attr: RequiredRibbonStyleProps) {
 
   const ribbon = container
     .maybeAppendByClassName(CLASS_NAMES.selection, 'path')
-    .styles({ path: getSelectionPath(attr), fill, ...style });
+    .styles({ d: getSelectionPath(attr), fill, ...style });
   const clipPath = ribbon
     .maybeAppendByClassName(CLASS_NAMES.clipPath, 'path')
-    .styles({ path: getClipPath(attr) })
+    .styles({ d: getClipPath(attr) })
     .node();
-  ribbon.style('clip-path', clipPath);
+  ribbon.style('clipPath', clipPath);
 }
 
 export class Ribbon extends Component<RibbonStyleProps> {
diff --git a/src/ui/marker/index.ts b/src/ui/marker/index.ts
index ba3f95be9..f209dc0e0 100644
--- a/src/ui/marker/index.ts
+++ b/src/ui/marker/index.ts
@@ -44,7 +44,8 @@ function getType(symbol: MarkerStyleProps['symbol']): string | null {
 
 export class Marker extends Component<MarkerStyleProps> {
   public render(attributes: Required<MarkerStyleProps>, container: Group) {
-    const { symbol, size = 16, ...style } = attributes;
+    const { symbol, size = 16, x = 0, y = 0, transform, transformOrigin, ...style } = attributes;
+
     const type = getType(symbol);
     ifShow(!!type, select(container), (group) => {
       group
@@ -58,13 +59,13 @@ export class Marker extends Component<MarkerStyleProps> {
               img: symbol,
               width: r,
               height: r,
-              x: -size,
-              y: -size,
+              x: x - size,
+              y: y - size,
             });
           } else {
             const r = (size as number) / 2;
             const symbolFn = isFunction(symbol) ? symbol : Marker.getSymbol(symbol);
-            selection.styles({ path: symbolFn?.(0, 0, r), ...style });
+            selection.styles({ d: symbolFn?.(x, y, r), ...style });
           }
         });
     });
diff --git a/src/ui/marker/types.ts b/src/ui/marker/types.ts
index 8fd3e87b9..d3e0ec53e 100644
--- a/src/ui/marker/types.ts
+++ b/src/ui/marker/types.ts
@@ -4,6 +4,8 @@ import type { BaseCustomElementStyleProps } from '../../shapes';
 export type FunctionalSymbol = (x: number, y: number, r: number) => any;
 
 export type MarkerStyleProps = BaseCustomElementStyleProps & {
+  x?: number;
+  y?: number;
   size?: number;
   symbol: string | FunctionalSymbol;
 };
diff --git a/src/ui/navigator/index.ts b/src/ui/navigator/index.ts
index 2f259680c..8bb33f2a3 100644
--- a/src/ui/navigator/index.ts
+++ b/src/ui/navigator/index.ts
@@ -41,6 +41,8 @@ const CLASS_NAMES = classNames(
 export class Navigator extends Component<NavigatorStyleProps> {
   constructor(options: NavigatorOptions) {
     super(options, {
+      x: 0,
+      y: 0,
       animate: {
         easing: 'linear',
         duration: 200,
@@ -48,7 +50,7 @@ export class Navigator extends Component<NavigatorStyleProps> {
       },
       buttonCursor: 'pointer',
       buttonFill: 'black',
-      buttonPath: button(0, 0, 6),
+      buttonD: button(0, 0, 6),
       buttonSize: 12,
       controllerPadding: 5,
       controllerSpacing: 5,
@@ -305,6 +307,8 @@ export class Navigator extends Component<NavigatorStyleProps> {
 
     this.updatePageInfo();
 
+    // group.node().style.transform = `translate(${pageWidth + spacing}, ${pageHeight / 2})`;
+
     // put it on the right side of the container
     group.node().setLocalPosition(pageWidth + spacing, pageHeight / 2);
     if (whetherToAddEventListener) {
@@ -318,6 +322,9 @@ export class Navigator extends Component<NavigatorStyleProps> {
   }
 
   render(attributes: NavigatorStyleProps, container: Group) {
+    const { x = 0, y = 0 } = attributes;
+    this.attr('transform', `translate(${x}, ${y})`);
+
     /**
      * container
      *  |- contentGroup (with clip path)
diff --git a/src/ui/navigator/types.ts b/src/ui/navigator/types.ts
index 2f98d17ec..2b18b01e9 100644
--- a/src/ui/navigator/types.ts
+++ b/src/ui/navigator/types.ts
@@ -6,6 +6,8 @@ import type { PrefixObject } from '../../types';
 export type NavigatorStyleProps = Omit<RectStyleProps, 'width' | 'height'> &
   PrefixObject<PathStyleProps & { size?: number }, 'button'> &
   PrefixObject<TextStyleProps, 'pageNum'> & {
+    x?: number;
+    y?: number;
     animate?: GenericAnimation;
     /** padding between buttons and page number  */
     controllerPadding?: number;
diff --git a/src/ui/scrollbar/index.ts b/src/ui/scrollbar/index.ts
index 162ae3a4e..799814c56 100644
--- a/src/ui/scrollbar/index.ts
+++ b/src/ui/scrollbar/index.ts
@@ -23,6 +23,8 @@ export class Scrollbar extends Component<ScrollbarStyleProps> {
 
   constructor(options: ScrollbarOptions) {
     super(options, {
+      x: 0,
+      y: 0,
       isRound: true,
       orientation: 'vertical',
       padding: [2, 2, 2, 2],
@@ -90,11 +92,13 @@ export class Scrollbar extends Component<ScrollbarStyleProps> {
   }
 
   private renderSlider(container: Group) {
-    const { orientation, trackSize, padding, slidable } = this.attributes;
+    const { x, y, orientation, trackSize, padding, slidable } = this.attributes;
     const trackStyle = subStyleProps<RectStyleProps>(this.attributes, 'track');
     const selectionStyle = subStyleProps<RectStyleProps>(this.attributes, 'thumb');
 
     const style: SliderStyleProps = {
+      x,
+      y,
       brushable: false,
       orientation,
       padding,
diff --git a/src/ui/scrollbar/types.ts b/src/ui/scrollbar/types.ts
index 76d04a716..cc5d7d7b3 100644
--- a/src/ui/scrollbar/types.ts
+++ b/src/ui/scrollbar/types.ts
@@ -8,6 +8,8 @@ import type { SliderStyleProps } from '../slider';
 export type ScrollbarStyleProps = GroupStyleProps &
   PrefixObject<RectStyleProps, 'track'> &
   PrefixObject<RectStyleProps, 'thumb'> & {
+    x?: number;
+    y?: number;
     /** 滑条朝向 */
     orientation?: Required<SliderStyleProps>['orientation'];
 
diff --git a/src/ui/select/option.ts b/src/ui/select/option.ts
index a4378783d..010dacee1 100644
--- a/src/ui/select/option.ts
+++ b/src/ui/select/option.ts
@@ -52,7 +52,7 @@ export class Option extends Component<OptionStyleProps> {
       fill: selected ? this.selectedColor : '#fff',
     });
     // place label
-    this.label.attr({ x: left, y: (backgroundHeight - labelHeight) / 2 });
+    this.label.attr({ transform: `translate(${left}, ${(backgroundHeight - labelHeight) / 2})` });
   }
 
   constructor(options: OptionOptions) {
diff --git a/src/ui/select/select.ts b/src/ui/select/select.ts
index 170bf811f..57316875f 100644
--- a/src/ui/select/select.ts
+++ b/src/ui/select/select.ts
@@ -9,6 +9,8 @@ import type { SelectOptions, SelectStyleProps } from './types';
 export class Select extends Component<SelectStyleProps> {
   static defaultOptions: SelectOptions = {
     style: {
+      x: 0,
+      y: 0,
       width: 140,
       height: 32,
       options: [],
@@ -74,10 +76,10 @@ export class Select extends Component<SelectStyleProps> {
   );
 
   private renderSelect() {
-    const { width, height, bordered, showDropdownIcon } = this.style;
+    const { x, y, width, height, bordered, showDropdownIcon } = this.style;
     const selectStyle = subStyleProps(this.attributes, 'select');
     const placeholderStyle = subStyleProps(this.attributes, 'placeholder');
-    this.select.attr({ width, height, ...selectStyle, fill: '#fff', strokeWidth: bordered ? 1 : 0 });
+    this.select.attr({ x, y, width, height, ...selectStyle, fill: '#fff', strokeWidth: bordered ? 1 : 0 });
     const padding = this.dropdownPadding;
     // dropdown icon
     const iconSize = 10;
@@ -85,7 +87,7 @@ export class Select extends Component<SelectStyleProps> {
       select(this.select)
         .maybeAppend('.dropdown-icon', 'path')
         .style('d', 'M-5,-3.5 L0,3.5 L5,-3.5')
-        .style('transform', `translate(${width - iconSize - padding[1] - padding[3]}, ${height / 2})`)
+        .style('transform', `translate(${x + width - iconSize - padding[1] - padding[3]}, ${y + height / 2})`)
         .style('lineWidth', 1)
         .style('stroke', this.select.style.stroke);
     }
@@ -93,7 +95,7 @@ export class Select extends Component<SelectStyleProps> {
     const currentOption = this.style.options?.find((option) => option.value === this.currentValue);
     // placeholder
     const finalPlaceholderStyle = {
-      x: padding[3],
+      x: x + padding[3],
       ...placeholderStyle,
     };
     select(this.select)
@@ -107,7 +109,7 @@ export class Select extends Component<SelectStyleProps> {
             .styles(finalPlaceholderStyle)
             .style('y', function () {
               const bbox = this.getBBox();
-              return (height - bbox.height) / 2;
+              return y + (height - bbox.height) / 2;
             }),
         (update) => update.styles(finalPlaceholderStyle),
         (exit) => exit.remove()
@@ -116,7 +118,7 @@ export class Select extends Component<SelectStyleProps> {
     // value
     const labelStyle = subStyleProps(this.attributes, 'optionLabel');
     const finalValueStyle = {
-      x: padding[3],
+      x: x + padding[3],
       ...labelStyle,
     };
 
@@ -131,7 +133,7 @@ export class Select extends Component<SelectStyleProps> {
             .styles(finalValueStyle)
             .style('y', function () {
               const bbox = this.getBBox();
-              return (height - bbox.height) / 2;
+              return y + (height - bbox.height) / 2;
             }),
         (update) => update.styles(finalValueStyle),
         (exit) => exit.remove()
@@ -139,7 +141,7 @@ export class Select extends Component<SelectStyleProps> {
   }
 
   private renderDropdown() {
-    const { width, height, options, onSelect, open } = this.style;
+    const { x, y, width, height, options, onSelect, open } = this.style;
     const dropdownStyle = subStyleProps(this.attributes, 'dropdown');
     const optionStyle = subStyleProps(this.attributes, 'option');
     const padding = this.dropdownPadding;
@@ -193,7 +195,7 @@ export class Select extends Component<SelectStyleProps> {
     const { spacing } = dropdownStyle;
 
     this.dropdown.attr({
-      y: height + spacing,
+      transform: `translate(${x}, ${y + height + spacing})`,
       width: bbox.width + padding[1] + padding[3],
       height: bbox.height + padding[0] + padding[2],
       ...dropdownStyle,
diff --git a/src/ui/select/types.ts b/src/ui/select/types.ts
index c26f6cebf..3e5bec7b0 100644
--- a/src/ui/select/types.ts
+++ b/src/ui/select/types.ts
@@ -28,6 +28,10 @@ export type SelectStyleProps = GroupStyleProps &
   PrefixObject<Omit<RectStyleProps, 'width' | 'height'>, 'dropdown'> &
   PrefixObject<TextStyleProps, 'option'> &
   PrefixObject<Omit<OptionStyleProps, 'value' | 'label' | 'selected' | 'onClick'>, 'option'> & {
+    /** 左上角 X 坐标 */
+    x?: number;
+    /** 左上角 Y 坐标 */
+    y?: number;
     /** 宽度 */
     width?: number;
     /** 高度 */
diff --git a/src/ui/slider/constant.ts b/src/ui/slider/constant.ts
index 1f6811679..29c36d5db 100644
--- a/src/ui/slider/constant.ts
+++ b/src/ui/slider/constant.ts
@@ -20,6 +20,8 @@ export const HANDLE_LABEL_DEFAULT_CFG = {
 } as const;
 
 export const HANDLE_DEFAULT_CFG = {
+  x: 0,
+  y: 0,
   orientation: 'horizontal',
   showLabel: true,
   type: 'start',
diff --git a/src/ui/slider/handle.ts b/src/ui/slider/handle.ts
index 13cd3f51f..ef1584ddb 100644
--- a/src/ui/slider/handle.ts
+++ b/src/ui/slider/handle.ts
@@ -8,6 +8,8 @@ import { HANDLE_DEFAULT_CFG, HANDLE_ICON_DEFAULT_CFG, HANDLE_LABEL_DEFAULT_CFG }
 export type HandleType = 'start' | 'end';
 
 export type IconStyleProps = PathStyleProps & {
+  x?: number;
+  y?: number;
   size?: number;
   radius?: number;
   shape?: string | ((type: HandleType) => DisplayObject);
@@ -19,6 +21,8 @@ export type LabelStyleProps = Partial<TextStyleProps>;
 export type HandleStyleProps = GroupStyleProps &
   PrefixStyleProps<LabelStyleProps, 'label'> &
   PrefixStyleProps<IconStyleProps, 'icon'> & {
+    x?: number;
+    y?: number;
     orientation?: IconStyleProps['orientation'];
     showLabel?: boolean;
     spacing?: number;
@@ -41,7 +45,7 @@ const CLASS_NAMES = classNames(
 
 class HandleIcon extends Component<IconStyleProps> {
   render(attributes: Required<IconStyleProps>, container: DisplayObject) {
-    const { size = 10, radius = size / 4, orientation, ...iconStyle } = attributes;
+    const { x, y, size = 10, radius = size / 4, orientation, ...iconStyle } = attributes;
     // 默认手柄
     const width = size!;
     const height = width * 2.4;
@@ -53,21 +57,20 @@ class HandleIcon extends Component<IconStyleProps> {
         width,
         height,
         radius,
-        x: -width / 2,
-        y: -height / 2,
+        x: x - width / 2,
+        y: y - height / 2,
+        transformOrigin: 'center',
       });
 
-    const x1 = (1 / 3) * width;
-    const x2 = (2 / 3) * width;
-    const y1 = (1 / 4) * height;
-    const y2 = (3 / 4) * height;
+    const x1 = x + (1 / 3) * width - width / 2;
+    const x2 = x + (2 / 3) * width - width / 2;
+    const y1 = y + (1 / 4) * height - height / 2;
+    const y2 = y + (3 / 4) * height - height / 2;
 
     rect.maybeAppendByClassName(`${CLASS_NAMES.iconLine}-1`, 'line').styles({ x1, x2: x1, y1, y2, ...iconStyle });
     rect.maybeAppendByClassName(`${CLASS_NAMES.iconLine}-2`, 'line').styles({ x1: x2, x2, y1, y2, ...iconStyle });
 
-    rect.node().setOrigin(width / 2, height / 2);
-    if (orientation === 'vertical') container.setLocalEulerAngles(90);
-    else container.setLocalEulerAngles(0);
+    if (orientation === 'vertical') rect.node().style.transform = 'rotate(90)';
   }
 }
 
@@ -81,8 +84,14 @@ export class Handle extends Component<HandleStyleProps> {
   }
 
   private renderLabel(container: Group) {
-    const { showLabel } = this.attributes;
-    const { transform, ...style } = subStyleProps(this.attributes, 'label');
+    const { x, y, showLabel } = this.attributes;
+    const {
+      x: labelX = 0,
+      y: labelY = 0,
+      transform,
+      transformOrigin,
+      ...style
+    } = subStyleProps(this.attributes, 'label');
     const [labelStyle, groupStyle] = splitStyle(style, []);
 
     const labelGroup = select(container).maybeAppendByClassName(CLASS_NAMES.labelGroup, 'g').styles(groupStyle);
@@ -92,7 +101,10 @@ export class Handle extends Component<HandleStyleProps> {
     ifShow(!!showLabel, labelGroup, (group) => {
       this.label = group.maybeAppendByClassName(CLASS_NAMES.label, 'text').styles({
         ...rest,
+        x: x + labelX,
+        y: y + labelY,
         transform,
+        transformOrigin,
         text: `${text}`,
       });
 
@@ -107,8 +119,8 @@ export class Handle extends Component<HandleStyleProps> {
   }
 
   private renderIcon(container: Group) {
-    const { orientation, type } = this.attributes;
-    const iconStyle = { orientation, ...HANDLE_ICON_DEFAULT_CFG, ...subStyleProps(this.attributes, 'icon') };
+    const { x, y, orientation, type } = this.attributes;
+    const iconStyle = { x, y, orientation, ...HANDLE_ICON_DEFAULT_CFG, ...subStyleProps(this.attributes, 'icon') };
     const { iconShape = () => new HandleIcon({ style: iconStyle }) } = this.attributes;
     const iconGroup = select(container).maybeAppendByClassName(CLASS_NAMES.iconGroup, 'g');
     iconGroup
diff --git a/src/ui/slider/index.ts b/src/ui/slider/index.ts
index 8607a2a78..439970bcf 100644
--- a/src/ui/slider/index.ts
+++ b/src/ui/slider/index.ts
@@ -83,7 +83,7 @@ export class Slider extends Component<SliderStyleProps> {
   }
 
   private get availableSpace() {
-    const { padding } = this.attributes;
+    const { x, y, padding } = this.attributes;
     const [top, right, bottom, left] = parseSeriesAttr(padding!);
     const { width, height } = this.shape;
     return {
@@ -96,6 +96,8 @@ export class Slider extends Component<SliderStyleProps> {
 
   constructor(options: SliderOptions) {
     super(options, {
+      x: 0,
+      y: 0,
       animate: { duration: 100, fill: 'both' },
       brushable: true,
       formatter: (val: any) => val.toString(),
@@ -167,18 +169,21 @@ export class Slider extends Component<SliderStyleProps> {
   }
 
   private renderTrack(container: Group) {
+    const { x, y } = this.attributes;
     const style = subStyleProps(this.attributes, 'track');
 
     this.trackShape = select(container)
       .maybeAppendByClassName(CLASS_NAMES.track, 'rect')
-      .styles({ ...this.shape, ...style });
+      .styles({ x, y, ...this.shape, ...style });
   }
 
   private renderBrushArea(container: Group) {
-    const { brushable } = this.attributes;
+    const { x, y, brushable } = this.attributes;
     this.brushArea = select(container)
       .maybeAppendByClassName(CLASS_NAMES.brushArea, 'rect')
       .styles({
+        x,
+        y,
         fill: 'transparent',
         cursor: brushable ? 'crosshair' : 'default',
         ...this.shape,
@@ -186,11 +191,11 @@ export class Slider extends Component<SliderStyleProps> {
   }
 
   private renderSparkline(container: Group) {
-    const { orientation } = this.attributes;
+    const { x, y, orientation } = this.attributes;
     const sparklineGroup = select(container).maybeAppendByClassName(CLASS_NAMES.sparklineGroup, 'g');
 
     ifShow(orientation === 'horizontal', sparklineGroup, (group) => {
-      const style = this.sparklineStyle!;
+      const style = { ...this.sparklineStyle!, x, y };
       group.maybeAppendByClassName(CLASS_NAMES.sparkline, () => new Sparkline({ style })).update(style);
     });
   }
@@ -232,7 +237,7 @@ export class Slider extends Component<SliderStyleProps> {
   }
 
   private renderSelection(container: Group) {
-    const { type, selectionType } = this.attributes;
+    const { x, y, type, selectionType } = this.attributes;
     this.foregroundGroup = select(container).maybeAppendByClassName(CLASS_NAMES.foreground, 'g');
 
     // value 类型的 slider 不渲染选区
@@ -245,7 +250,10 @@ export class Slider extends Component<SliderStyleProps> {
           if (selectionType === 'invert') return 'crosshair';
           return 'default';
         })
-        .styles(selectionStyle);
+        .styles({
+          ...selectionStyle,
+          transform: `translate(${x}, ${y})`,
+        });
     };
 
     const that = this;
@@ -381,8 +389,8 @@ export class Slider extends Component<SliderStyleProps> {
   private inferTextStyle(handleType: HandleType): Record<string, any> {
     const { orientation } = this.attributes;
     if (orientation === 'horizontal') return {};
-    if (handleType === 'start') return { transform: 'rotate(90)', textAlign: 'start' };
-    if (handleType === 'end') return { transform: 'rotate(90)', textAlign: 'end' };
+    if (handleType === 'start') return { transformOrigin: 'left center', transform: 'rotate(90)', textAlign: 'start' };
+    if (handleType === 'end') return { transformOrigin: 'right center', transform: 'rotate(90)', textAlign: 'end' };
     return {};
   }
 
@@ -470,8 +478,8 @@ export class Slider extends Component<SliderStyleProps> {
   }
 
   private getHandleStyle(handleType: HandleType): HandleStyleProps {
-    const { showLabel, showLabelOnInteraction, orientation } = this.attributes;
-    const handlePosition = this.calcHandlePosition(handleType);
+    const { x: ox, y: oy, showLabel, showLabelOnInteraction, orientation } = this.attributes;
+    const { x, y } = this.calcHandlePosition(handleType);
     const textStyle = this.calcHandleText(handleType);
 
     let internalShowLabel = showLabel;
@@ -483,7 +491,7 @@ export class Slider extends Component<SliderStyleProps> {
     return {
       ...superStyleProps(this.getHandleIconStyle(), 'icon'),
       ...superStyleProps({ ...this.getHandleLabelStyle(handleType), ...textStyle }, 'label'),
-      ...handlePosition,
+      transform: `translate(${x + ox}, ${y + oy})`,
       orientation,
       showLabel: internalShowLabel,
       type: handleType,
diff --git a/src/ui/slider/types.ts b/src/ui/slider/types.ts
index c4766c50d..1da4b7b6c 100644
--- a/src/ui/slider/types.ts
+++ b/src/ui/slider/types.ts
@@ -21,6 +21,8 @@ export type SliderStyleProps = GroupStyleProps &
   PrefixObject<RectStyleProps, 'selection'> &
   HandleStyleProps &
   Partial<PrefixStyleProps<Omit<SparklineStyleProps, 'width' | 'height'>, 'sparkline'>> & {
+    x?: number;
+    y?: number;
     /** 动画配置 */
     animate?: GenericAnimation;
 
diff --git a/src/ui/sparkline/columns.ts b/src/ui/sparkline/columns.ts
index 42618cdda..608b0c1d0 100644
--- a/src/ui/sparkline/columns.ts
+++ b/src/ui/sparkline/columns.ts
@@ -5,6 +5,8 @@ import { deepAssign, select } from '../../util';
 export type ColumnStyleProps = GroupStyleProps;
 
 export interface ColumnsStyleProps extends BaseStyleProps {
+  x?: number;
+  y?: number;
   columns: ColumnStyleProps[][];
 }
 
@@ -19,7 +21,8 @@ export class Columns extends DisplayObject<ColumnsStyleProps> {
   }
 
   public render(): void {
-    const { columns } = this.attributes;
+    const { columns, x, y } = this.attributes;
+    this.columnsGroup.style.transform = `translate(${x}, ${y})`;
 
     select(this.columnsGroup)
       .selectAll('.column')
diff --git a/src/ui/sparkline/index.ts b/src/ui/sparkline/index.ts
index e1ec0f7d7..de44df2f3 100644
--- a/src/ui/sparkline/index.ts
+++ b/src/ui/sparkline/index.ts
@@ -90,13 +90,13 @@ export class Sparkline extends Component<SparklineStyleProps> {
       lines: lines.map((line, idx) => {
         return {
           stroke: this.getColor(idx),
-          path: smooth ? lineToCurvePath(line) : lineToLinePath(line),
+          d: smooth ? lineToCurvePath(line) : lineToLinePath(line),
           ...lineStyle,
         };
       }) as any,
       areas: areas.map((path, idx) => {
         return {
-          path,
+          d: path,
           fill: this.getColor(idx),
           ...areaStyle,
         };
@@ -155,6 +155,8 @@ export class Sparkline extends Component<SparklineStyleProps> {
   constructor(options: SparklineOptions) {
     super(options, {
       type: 'line',
+      x: 0,
+      y: 0,
       width: 200,
       height: 20,
       isStack: false,
@@ -173,9 +175,13 @@ export class Sparkline extends Component<SparklineStyleProps> {
   public render(attributes: Required<SparklineStyleProps>, container: Group) {
     maybeAppend(container, '.container', 'rect').attr('className', 'container').node();
 
-    const { type } = attributes;
+    const { type, x, y } = attributes;
     const className = `spark${type}`;
-    const style: any = type === 'line' ? this.linesStyle : this.columnsStyle;
+    const style: any = {
+      x,
+      y,
+      ...(type === 'line' ? this.linesStyle : this.columnsStyle),
+    };
 
     select(container)
       .selectAll('.spark')
diff --git a/src/ui/sparkline/lines.ts b/src/ui/sparkline/lines.ts
index 02a3b17be..9ee08e2a3 100644
--- a/src/ui/sparkline/lines.ts
+++ b/src/ui/sparkline/lines.ts
@@ -4,6 +4,8 @@ import { DisplayObject, Group } from '../../shapes';
 import { deepAssign, select } from '../../util';
 
 export interface LinesStyleProps extends BaseStyleProps {
+  x?: number;
+  y?: number;
   lines: PathStyleProps[];
   areas: PathStyleProps[];
 }
@@ -19,7 +21,8 @@ export class Lines extends DisplayObject<LinesStyleProps> {
   }
 
   public render(): void {
-    const { lines, areas } = this.attributes;
+    const { lines, areas, x, y } = this.attributes;
+    this.style.transform = `translate(${x}, ${y})`;
     if (lines) this.renderLines(lines);
     if (areas) this.renderAreas(areas);
   }
diff --git a/src/ui/sparkline/types.ts b/src/ui/sparkline/types.ts
index 6b9f4fc99..7493cbc67 100644
--- a/src/ui/sparkline/types.ts
+++ b/src/ui/sparkline/types.ts
@@ -31,6 +31,8 @@ type ColumnStyleProps = CallableObject<PrefixObject<RectStyleProps, 'column'>, C
 export type SparklineStyleProps = GroupStyleProps &
   LineStyleProps &
   ColumnStyleProps & {
+    x?: number;
+    y?: number;
     color?: string | string[] | ((idx: number) => string);
     data?: number[] | number[][];
     isStack?: boolean;
diff --git a/src/ui/switch/index.ts b/src/ui/switch/index.ts
index 08e76ba78..3d0cfb6fc 100644
--- a/src/ui/switch/index.ts
+++ b/src/ui/switch/index.ts
@@ -92,6 +92,7 @@ export class Switch extends Component<SwitchStyleProps> {
           });
 
           // 增加 整体宽度 需要对 tag 提前渲染获得 width 然后通过 width 计算 x 的位置
+          // @ts-ignore
           const { max, min } = tagShape?.getLocalBounds() || {};
           const width = max[0] - min[0] + sizeStyle.radius;
           const height = max[1] - min[1];
diff --git a/src/ui/switch/types.ts b/src/ui/switch/types.ts
index 46ca1ae15..3dfffbfa3 100644
--- a/src/ui/switch/types.ts
+++ b/src/ui/switch/types.ts
@@ -3,6 +3,8 @@ import type { ComponentOptions } from '../../core';
 import type { TagStyleProps } from '../tag';
 
 export type SwitchStyleProps = GroupStyleProps & {
+  x?: number;
+  y?: number;
   /**
    * @title 大小
    * @description switch 开关组件大小。默认为: default, 高度大小等于 22px，宽度默认等于高度的两倍，会随着内部的子元素大小自动调整。
diff --git a/src/ui/tag/index.ts b/src/ui/tag/index.ts
index a37225d28..390731117 100644
--- a/src/ui/tag/index.ts
+++ b/src/ui/tag/index.ts
@@ -23,6 +23,7 @@ function adjust(container: Group, paddingLeft: number, paddingTop: number, align
 }
 
 function getTextPosition(markerShape: Marker, spacing?: number) {
+  // @ts-ignore
   const bounds = markerShape.getLocalBounds();
 
   return {
diff --git a/src/ui/tag/types.ts b/src/ui/tag/types.ts
index a5cf92de3..9f64bc1f4 100644
--- a/src/ui/tag/types.ts
+++ b/src/ui/tag/types.ts
@@ -6,6 +6,8 @@ import type { MarkerStyleProps } from '../marker';
 export type TagStyleProps = GroupStyleProps &
   PrefixStyleProps<Omit<TextStyleProps, 'x' | 'y' | 'text'>, 'label'> &
   PrefixStyleProps<Partial<RectStyleProps>, 'background'> & {
+    x?: number;
+    y?: number;
     text?: string;
     /** 水平对齐方式 */
     align?: 'start' | 'center' | 'end';
diff --git a/src/ui/timebar/controller.ts b/src/ui/timebar/controller.ts
index 829bfb74d..b4af47b05 100644
--- a/src/ui/timebar/controller.ts
+++ b/src/ui/timebar/controller.ts
@@ -19,6 +19,8 @@ const componentsMap: Record<Functions | 'split', { new (...args: any): DisplayOb
 export class Controller extends Component<ControllerStyleProps> {
   static defaultOptions: ControllerOptions = {
     style: {
+      x: 0,
+      y: 0,
       width: 300,
       height: 40,
       padding: 0,
@@ -50,13 +52,13 @@ export class Controller extends Component<ControllerStyleProps> {
   }
 
   private renderBackground() {
-    const { width, height } = this.style;
+    const { x, y, width, height } = this.style;
     const backgroundStyle = subStyleProps(this.attributes, 'background');
-    this.background.attr({ width, height, ...backgroundStyle });
+    this.background.attr({ x, y, width, height, ...backgroundStyle });
   }
 
   private renderFunctions() {
-    const { functions, iconSize, iconSpacing, width, height, align } = this.attributes;
+    const { functions, iconSize, iconSpacing, x, y, width, height, align } = this.attributes;
 
     const {
       padding: [, right, , left],
@@ -85,8 +87,8 @@ export class Controller extends Component<ControllerStyleProps> {
     components.forEach((name, index) => {
       const Ctor = componentsMap[name];
       const style: Record<string, any> = {
-        x: index * (iconSize + iconSpacing) + xOffset,
-        y: height / 2,
+        x: x + index * (iconSize + iconSpacing) + xOffset,
+        y: y + height / 2,
         size: iconSize,
       };
 
@@ -105,11 +107,9 @@ export class Controller extends Component<ControllerStyleProps> {
 
       if (Ctor === SpeedSelect) {
         // SpeedSelect 直接插入到 canvas
-        const { x: baseX, y: baseY } = this.getBBox();
-        const { x, y } = style;
         const canvas = this.ownerDocument?.defaultView;
         if (canvas) {
-          this.speedSelect = new Ctor({ style: { ...style, zIndex: 100, x: baseX + x, y: baseY + y } }) as SpeedSelect;
+          this.speedSelect = new Ctor({ style: { ...style, zIndex: 100 } }) as SpeedSelect;
           (canvas as unknown as Canvas).appendChild(this.speedSelect);
         }
       } else {
diff --git a/src/ui/timebar/handle.ts b/src/ui/timebar/handle.ts
index 4018878d3..3d7fd4905 100644
--- a/src/ui/timebar/handle.ts
+++ b/src/ui/timebar/handle.ts
@@ -40,6 +40,10 @@ type ChartModeHandleStyleProps = GroupStyleProps &
   PrefixObject<Omit<RectStyleProps, 'x' | 'y' | 'width' | 'height'>, 'background'> &
   PrefixObject<Omit<LineStyleProps, 'x1' | 'y1' | 'x2' | 'y2'>, 'icon'> &
   PrefixObject<Omit<LineStyleProps, 'x1' | 'y1' | 'x2' | 'y2'>, 'border'> & {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
     /** 图标尺寸 */
     iconSize?: number;
     type: HandleType;
@@ -48,6 +52,8 @@ type ChartModeHandleOptions = ComponentOptions<ChartModeHandleStyleProps>;
 export class ChartModeHandle extends Component<ChartModeHandleStyleProps> {
   static defaultOptions: ChartModeHandleOptions = {
     style: {
+      x: 0,
+      y: 0,
       width: 10,
       height: 50,
       iconSize: 10,
@@ -62,41 +68,41 @@ export class ChartModeHandle extends Component<ChartModeHandleStyleProps> {
   };
 
   private renderBackground() {
-    const { width, height } = this.attributes;
+    const { x, y, width, height } = this.attributes;
     const style = subStyleProps(this.attributes, 'background');
     select(this)
       .maybeAppend('background', 'rect')
       .attr('className', 'background')
-      .styles({ x: -width / 2, y: -height / 2, width, height, ...style });
+      .styles({ x: x - width / 2, y: y - height / 2, width, height, ...style });
   }
 
   private renderIcon() {
-    const { iconSize } = this.attributes;
+    const { x, y, iconSize } = this.attributes;
     const style = subStyleProps(this.attributes, 'icon');
     const diffX = 1;
     const diffY = iconSize / 2;
     select(this)
       .maybeAppend('icon-left-line', 'line')
       .attr('className', 'icon-left-line')
-      .styles({ x1: -diffX, y1: -diffY, x2: -diffX, y2: diffY, ...style });
+      .styles({ x1: x - diffX, y1: y - diffY, x2: x - diffX, y2: y + diffY, ...style });
     select(this)
       .maybeAppend('icon-right-line', 'line')
       .attr('className', 'icon-right-line')
-      .styles({ x1: diffX, y1: -diffY, x2: diffX, y2: diffY, ...style });
+      .styles({ x1: x + diffX, y1: y - diffY, x2: x + diffX, y2: y + diffY, ...style });
   }
 
   private renderBorder() {
-    const { width, height, type } = this.attributes;
+    const { x: xx, y, width, height, type } = this.attributes;
     const style = subStyleProps(this.attributes, 'border');
     const x = type === 'start' ? +width / 2 : -width / 2;
     select(this)
       .maybeAppend('border', 'line')
       .attr('className', 'border')
       .styles({
-        x1: x,
-        y1: -height / 2,
-        x2: x,
-        y2: +height / 2,
+        x1: x + xx,
+        y1: y - height / 2,
+        x2: x + xx,
+        y2: y + height / 2,
         ...style,
       });
   }
diff --git a/src/ui/timebar/icons.ts b/src/ui/timebar/icons.ts
index 65f959715..bfd70892c 100644
--- a/src/ui/timebar/icons.ts
+++ b/src/ui/timebar/icons.ts
@@ -66,10 +66,10 @@ export abstract class IconBase<T extends Record<string, any> = {}> extends Compo
   }
 
   protected renderBackground() {
-    const { size } = this.attributes;
+    const { x, y, size } = this.attributes;
     const halfSize = size / 2;
     const backgroundStyle = subStyleProps(this.attributes, 'background');
-    this.background.attr({ x: -halfSize, y: -halfSize, width: size, height: size, ...backgroundStyle });
+    this.background.attr({ x: x - halfSize, y: y - halfSize, width: size, height: size, ...backgroundStyle });
   }
 
   protected showIndicator() {
@@ -161,8 +161,7 @@ const arrow = (size: number, color: string = '#565758') => {
   return new Path({
     style: {
       fill: color,
-      anchor: '0.5 0.5',
-      path: `M ${size},${size} L -${size},0 L ${size},-${size} Z`,
+      d: `M ${size},${size} L -${size},0 L ${size},-${size} Z`,
       transformOrigin: 'center',
     },
   });
@@ -183,7 +182,7 @@ export class Reset extends IconBase {
   }
 
   renderIcon() {
-    const { color } = this.attributes;
+    const { x, y, color } = this.attributes;
     const size = this.iconSize;
     const { lineWidth } = this;
     const arrowSize = lineWidth + 0.5;
@@ -193,7 +192,7 @@ export class Reset extends IconBase {
       .styles({
         stroke: color,
         lineWidth,
-        path: this.arcPath(0, 0, size / 2 - lineWidth),
+        d: this.arcPath(x, y, size / 2 - lineWidth),
         markerStart: arrow(arrowSize, color),
       });
   }
@@ -206,19 +205,19 @@ export class Backward extends IconBase {
   }
 
   renderIcon() {
-    const { color } = this.attributes;
+    const { x, y, color } = this.attributes;
     const size = this.iconSize;
     const deltaX = size / 2;
     const deltaY = size / 2 / 3 ** 0.5;
     const points: PolygonStyleProps['points'] = [
-      [0, 0],
-      [0, -deltaY],
-      [-deltaX, 0],
-      [0, deltaY],
-      [0, 0],
-      [deltaX, -deltaY],
-      [deltaX, deltaY],
-      [0, 0],
+      [x, y],
+      [x, y - deltaY],
+      [x - deltaX, y],
+      [x, y + deltaY],
+      [x, y],
+      [x + deltaX, y - deltaY],
+      [x + deltaX, y + deltaY],
+      [x, y],
     ];
     select(this.icon).maybeAppend('.backward', 'polygon').styles({
       points,
@@ -234,19 +233,19 @@ export class Forward extends IconBase {
   }
 
   renderIcon() {
-    const { color } = this.attributes;
+    const { x, y, color } = this.attributes;
     const size = this.iconSize;
     const deltaX = size / 2;
     const deltaY = size / 2 / 3 ** 0.5;
     const points: PolygonStyleProps['points'] = [
-      [0, 0],
-      [0, -deltaY],
-      [deltaX, 0],
-      [0, deltaY],
-      [0, 0],
-      [-deltaX, -deltaY],
-      [-deltaX, deltaY],
-      [0, 0],
+      [x, y],
+      [x, y - deltaY],
+      [x + deltaX, y],
+      [x, y + deltaY],
+      [x, y],
+      [x - deltaX, y - deltaY],
+      [x - deltaX, y + deltaY],
+      [x, y],
     ];
     select(this.icon).maybeAppend('.forward', 'polygon').styles({
       points,
@@ -261,14 +260,14 @@ export class Play extends IconBase {
   }
 
   renderIcon() {
-    const { color } = this.attributes;
+    const { x, y, color } = this.attributes;
     const size = this.iconSize;
     const deltaX = (size / 3) * 3 ** 0.5 * 0.8;
     const points: PolygonStyleProps['points'] = [
-      [deltaX, 0],
-      [-deltaX / 2, -(size / 2) * 0.8],
-      [-deltaX / 2, (size / 2) * 0.8],
-      [deltaX, 0],
+      [x + deltaX, y],
+      [x - deltaX / 2, y - (size / 2) * 0.8],
+      [x - deltaX / 2, y + (size / 2) * 0.8],
+      [x + deltaX, y],
     ];
     select(this.icon).maybeAppend('.play', 'polygon').styles({
       points,
@@ -283,19 +282,19 @@ export class Pause extends IconBase {
   }
 
   renderIcon() {
-    const { color } = this.attributes;
+    const { x, y, color } = this.attributes;
     const size = this.iconSize;
     const deltaX = size / 3;
     const points: PolygonStyleProps['points'] = [
-      [-deltaX, -size / 2],
-      [-deltaX, size / 2],
-      [-deltaX / 2, size / 2],
-      [-deltaX / 2, -size / 2],
-      [-deltaX, -size / 2],
-      [deltaX / 2, -size / 2],
-      [deltaX / 2, size / 2],
-      [deltaX, size / 2],
-      [deltaX, -size / 2],
+      [x - deltaX, y - size / 2],
+      [x - deltaX, y + size / 2],
+      [x - deltaX / 2, y + size / 2],
+      [x - deltaX / 2, y - size / 2],
+      [x - deltaX, y - size / 2],
+      [x + deltaX / 2, y - size / 2],
+      [x + deltaX / 2, y + size / 2],
+      [x + deltaX, y + size / 2],
+      [x + deltaX, y - size / 2],
     ];
     select(this.icon).maybeAppend('.pause', 'polygon').styles({
       points,
@@ -311,17 +310,17 @@ export class Range extends IconBase {
   }
 
   renderIcon() {
-    const { color } = this.attributes;
+    const { x, y, color } = this.attributes;
     const { iconSize: size, lineWidth } = this;
     const gap = lineWidth;
 
     select(this.icon)
       .maybeAppend('.left-line', 'line')
       .styles({
-        x1: -size / 2,
-        y1: -size / 2,
-        x2: -size / 2,
-        y2: size / 2,
+        x1: x - size / 2,
+        y1: y - size / 2,
+        x2: x - size / 2,
+        y2: y + size / 2,
         stroke: color,
         lineWidth,
       });
@@ -329,10 +328,10 @@ export class Range extends IconBase {
     select(this.icon)
       .maybeAppend('.right-line', 'line')
       .styles({
-        x1: size / 2,
-        y1: -size / 2,
-        x2: size / 2,
-        y2: size / 2,
+        x1: x + size / 2,
+        y1: y - size / 2,
+        x2: x + size / 2,
+        y2: y + size / 2,
         stroke: color,
         lineWidth,
       });
@@ -340,10 +339,10 @@ export class Range extends IconBase {
     select(this.icon)
       .maybeAppend('.left-arrow', 'line')
       .styles({
-        x1: 0,
-        y1: 0,
-        x2: -size / 2 + gap * 2,
-        y2: 0,
+        x1: x,
+        y1: y,
+        x2: x - size / 2 + gap * 2,
+        y2: y,
         stroke: color,
         lineWidth,
         markerEnd: arrow(lineWidth * 2, color),
@@ -352,10 +351,10 @@ export class Range extends IconBase {
     select(this.icon)
       .maybeAppend('.right-arrow', 'line')
       .styles({
-        x1: 0,
-        y1: 0,
-        x2: size / 2 - gap * 2,
-        y2: 0,
+        x1: x,
+        y1: y,
+        x2: x + size / 2 - gap * 2,
+        y2: y,
         stroke: color,
         lineWidth,
         markerEnd: arrow(lineWidth * 2, color),
@@ -370,16 +369,16 @@ export class Value extends IconBase {
   }
 
   renderIcon() {
-    const { color } = this.attributes;
+    const { x, y, color } = this.attributes;
     const { iconSize: size, lineWidth } = this;
 
     select(this.icon)
       .maybeAppend('.line', 'line')
       .styles({
-        x1: 0,
-        y1: -size / 2,
-        x2: 0,
-        y2: size / 2,
+        x1: x,
+        y1: y - size / 2,
+        x2: x,
+        y2: y + size / 2,
         stroke: color,
         lineWidth,
       });
@@ -389,10 +388,10 @@ export class Value extends IconBase {
     select(this.icon)
       .maybeAppend('.left-arrow', 'line')
       .styles({
-        x1: -size / 2 - gap * 2,
-        y1: 0,
-        x2: -gap * 2,
-        y2: 0,
+        x1: x - size / 2 - gap * 2,
+        y1: y,
+        x2: x - gap * 2,
+        y2: y,
         stroke: color,
         lineWidth,
         markerEnd: arrow(lineWidth * 2, color),
@@ -401,10 +400,10 @@ export class Value extends IconBase {
     select(this.icon)
       .maybeAppend('.right-arrow', 'line')
       .styles({
-        x1: size / 2 + gap * 2,
-        y1: 0,
-        x2: gap * 2,
-        y2: 0,
+        x1: x + size / 2 + gap * 2,
+        y1: y,
+        x2: x + gap * 2,
+        y2: y,
         stroke: color,
         lineWidth,
         markerEnd: arrow(lineWidth * 2, color),
@@ -426,18 +425,18 @@ export class LineChart extends IconBase {
   }
 
   renderIcon() {
-    const { color } = this.attributes;
+    const { x, y, color } = this.attributes;
     const { iconSize: size, lineWidth } = this;
 
     const gap = lineWidth;
     const deltaX = (size - gap * 2 - lineWidth) / 4;
     const deltaY = (size - gap * 2 - lineWidth) / 2;
-    const [ox, oy] = [-size / 2 + gap, size / 2 - gap * 2];
+    const [ox, oy] = [x - size / 2 + gap, y + size / 2 - gap * 2];
 
     select(this.icon)
       .maybeAppend('.coordinate', 'polyline')
       .styles({
-        points: getCoordinatePoints(size),
+        points: getCoordinatePoints(size).map(([px, py]) => [px + x, py + y]),
         stroke: color,
         lineWidth,
       });
@@ -468,18 +467,18 @@ export class BarChart extends IconBase {
 
   renderIcon() {
     const { data } = this;
-    const { color } = this.attributes;
+    const { x, y, color } = this.attributes;
     const { iconSize: size, lineWidth } = this;
 
     const gap = lineWidth;
     const deltaX = (size - gap) / data.length;
     const deltaY = (size - gap * 2) / 4;
-    const [ox, oy] = [-size / 2 + gap * 2, size / 2 - gap];
+    const [ox, oy] = [x - size / 2 + gap * 2, y + size / 2 - gap];
 
     select(this.icon)
       .maybeAppend('.coordinate', 'polyline')
       .styles({
-        points: getCoordinatePoints(size),
+        points: getCoordinatePoints(size).map(([px, py]) => [px + x, py + y]),
         stroke: color,
         lineWidth,
       });
@@ -514,15 +513,15 @@ export class Split extends IconBase {
   }
 
   renderIcon() {
-    const { color } = this.attributes;
+    const { x, y, color } = this.attributes;
     const { iconSize: size, lineWidth } = this;
     select(this.icon)
       .maybeAppend('.split', 'line')
       .styles({
-        x1: 0,
-        y1: -size / 2,
-        x2: 0,
-        y2: size / 2,
+        x1: x,
+        y1: y - size / 2,
+        x2: x,
+        y2: y + size / 2,
         stroke: color,
         lineWidth,
       });
@@ -540,16 +539,24 @@ export class SpeedSelect extends IconBase<{ speed?: number; onSelect: SelectStyl
 
   renderIcon() {
     const { iconSize } = this;
-    const { speed = 1 } = this.attributes;
-    const inheritStyle = omit(this.attributes as any, ['x', 'y', 'width', 'height', 'size', 'color', 'speed']);
+    const { x, y, speed = 1 } = this.attributes;
+    const inheritStyle = omit(this.attributes as any, [
+      'x',
+      'y',
+      'transform',
+      'transformOrigin',
+      'width',
+      'height',
+      'size',
+      'color',
+      'speed',
+    ]);
     const width = clamp(iconSize, 20, Infinity);
     const height = 20;
-    const x = -width / 2;
-    const y = -height / 2;
     const style: SelectStyleProps = {
       ...inheritStyle,
-      x,
-      y,
+      x: x - width / 2,
+      y: y - height / 2,
       width,
       height,
       defaultValue: speed,
@@ -605,7 +612,7 @@ export abstract class ToggleIcon<T extends string> extends Component<ToggleIconS
   }
 
   render() {
-    const { x, y, onChange, ...restStyles } = this.attributes;
+    const { onChange, ...restStyles } = this.attributes;
     select(this.icon)
       .selectAll('.icon')
       .data([this.currentType])
diff --git a/src/ui/timebar/timebar.ts b/src/ui/timebar/timebar.ts
index 2d8b138d0..d5c4144fd 100644
--- a/src/ui/timebar/timebar.ts
+++ b/src/ui/timebar/timebar.ts
@@ -18,6 +18,8 @@ type States = Pick<TimebarStyleProps, 'speed' | 'selectionType' | 'chartType' |
 export class Timebar extends Component<TimebarStyleProps> {
   static defaultOptions: TimebarOptions = {
     style: {
+      x: 0,
+      y: 0,
       axisLabelFill: '#6e6e6e',
       axisLabelTextAlign: 'left',
       axisLabelTextBaseline: 'top',
@@ -75,10 +77,10 @@ export class Timebar extends Component<TimebarStyleProps> {
 
   /** 计算空间分配 */
   private get space() {
-    const { width, height, type, controllerHeight } = this.attributes;
+    const { x, y, width, height, type, controllerHeight } = this.attributes;
 
     const availableTimelineHeight = clamp(+height - controllerHeight, 0, +height);
-    const controllerBBox = new BBox(0, +height - controllerHeight, +width, controllerHeight);
+    const controllerBBox = new BBox(x, y + +height - controllerHeight, +width, controllerHeight);
 
     // chart 模式下可用
     let axisBBox: BBox;
@@ -86,13 +88,13 @@ export class Timebar extends Component<TimebarStyleProps> {
     if (type === 'chart') {
       // axis 默认分配高度为 35
       axisHeight = 35;
-      axisBBox = new BBox(0, availableTimelineHeight - axisHeight, +width, axisHeight);
+      axisBBox = new BBox(x, y + availableTimelineHeight - axisHeight, +width, axisHeight);
     } else axisBBox = new BBox();
 
     const timelineHeight = type === 'time' ? 10 : availableTimelineHeight;
     const timelineBBox = new BBox(
-      0,
-      type === 'time' ? availableTimelineHeight : availableTimelineHeight - timelineHeight,
+      x,
+      y + (type === 'time' ? availableTimelineHeight : availableTimelineHeight - timelineHeight),
       +width,
       timelineHeight - axisHeight
     );
@@ -210,8 +212,9 @@ export class Timebar extends Component<TimebarStyleProps> {
           if (typeof time === 'number') return parseBySeries(time);
           return formatTime(time, 'YYYY-MM-DD HH:mm:ss');
         },
-        x,
-        y,
+        transform: `translate(${x}, ${y})`,
+        // x,
+        // y,
         zIndex: 1,
         ...userDefinedChartStyle,
       };
@@ -237,8 +240,9 @@ export class Timebar extends Component<TimebarStyleProps> {
       trackSize: height,
       type: selectionType,
       values: this.sliderValues,
-      x,
-      y,
+      // x,
+      // y,
+      transform: `translate(${x}, ${y})`,
       zIndex: 1,
       ...userDefinedChartStyle,
     };
diff --git a/src/ui/timebar/types.ts b/src/ui/timebar/types.ts
index 23fb51c8e..afc41f0b1 100644
--- a/src/ui/timebar/types.ts
+++ b/src/ui/timebar/types.ts
@@ -8,6 +8,8 @@ import type { LinearAxisStyleProps } from '../axis/types';
 export type Functions = 'reset' | 'speed' | 'backward' | 'playPause' | 'forward' | 'selectionType' | 'chartType';
 export type ControllerStyleProps = GroupStyleProps &
   PrefixObject<BaseStyleProps, 'background'> & {
+    x?: number;
+    y?: number;
     width: number;
     height: number;
     padding?: SeriesAttr;
@@ -72,6 +74,8 @@ export type TimebarStyleProps = GroupStyleProps &
   PrefixObject<Omit<LinearAxisStyleProps, 'type' | 'startPos' | 'endPos' | 'data'>, 'axis'> &
   Pick<ControllerStyleProps, UnvarnishedControllerProps> &
   PrefixObject<Omit<ControllerStyleProps, 'width' | 'onChange' | UnvarnishedControllerProps>, 'controller'> & {
+    x?: number;
+    y?: number;
     /**
      * 类型
      * @description time 时间轴
diff --git a/src/ui/tooltip/types.ts b/src/ui/tooltip/types.ts
index 5a8249686..294f1d859 100644
--- a/src/ui/tooltip/types.ts
+++ b/src/ui/tooltip/types.ts
@@ -20,6 +20,8 @@ export type TooltipItem = {
 };
 
 export type TooltipStyleProps = GroupStyleProps & {
+  x?: number;
+  y?: number;
   /* 项目 */
   data?: TooltipItem[];
   /** 标题 */
diff --git a/src/util/offscreen.ts b/src/util/offscreen.ts
index 945b7b1b4..7f4a97ec4 100644
--- a/src/util/offscreen.ts
+++ b/src/util/offscreen.ts
@@ -6,6 +6,7 @@ import { hide } from './visibility';
 class OffscreenGroup extends Group {
   constructor(...args: any[]) {
     super(...args);
+    this.isMutationObserved = true;
     this.addEventListener(ElementEvent.INSERTED, () => {
       hide(this);
     });
diff --git a/src/util/primitive.ts b/src/util/primitive.ts
index c66d504dc..920f340f9 100644
--- a/src/util/primitive.ts
+++ b/src/util/primitive.ts
@@ -1,11 +1,8 @@
 export const PRIMILTIVE_ATTRIBUTES = [
   '$el',
-  'anchor',
   'cx',
   'cy',
   'd',
-  'defX',
-  'defY',
   'dx',
   'dy',
   'fill',
diff --git a/src/util/scale-to-pixel.ts b/src/util/scale-to-pixel.ts
index 94a7d3656..ec5e157cf 100644
--- a/src/util/scale-to-pixel.ts
+++ b/src/util/scale-to-pixel.ts
@@ -6,6 +6,8 @@ import type { DisplayObject } from '../shapes';
 export function scaleToPixel(el: DisplayObject, size: number, applyScale = false) {
   const { width, height } = el.getBBox();
   const scale = size / Math.max(width, height);
-  if (applyScale) el.scale(scale);
+  if (applyScale) {
+    el.style.transform = `scale(${scale})`;
+  }
   return scale;
 }